迁移到Webpack 2后，使用gulp或webpack-stream会导致Webpack构建失败

Question

迁移到Webpack 2后，使用gulp运行webpack时使用webpack-stream似乎会导致babel或webpack抛出错误（无法确定错误的来源）。使用下面的配置和结构运行webpack可以成功构建，但通过gulp和webpack-stream进行管道处理会导致此错误：

Message:
    ./app/app.jsx
Module parse failed: /Users/schne482/Code/tralgo/app/app.jsx Unexpected token (11:1)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (11:1)
    at Parser.pp$4.raise (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseParenAndDistinguishExpression (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1861:32)
    at Parser.pp$3.parseExprAtom (/Users/schne482/Code/tralgo/node_modules/webpack-stream/node_modules/acorn/dist/acorn.js:1796:19)
Details:
    domain: [object Object]
    domainThrown: true

我已经完成的工作:

• 更改了webpack.config.js的结构以遵守Webpack 2规范。
• 将babel配置移到单独的.babelrc文件中。没有看到任何效果。
• 确保.babelrc文件的结构正确。
• 确保Webpack指向正确的入口文件（./app/app.jsx）并由加载器处理该入口文件。
• 使用相同的.babelrc和依赖项运行babel (babel ./app/app.jsx)，不使用Webpack进行操作。输出是正确的，没有错误。
• 在没有gulp的情况下运行Webpack，输出是正确的。
• 更新相关软件包（babel-core、babel-loader、babel预设、webpack-stream、gulp等）。
• 检查是否有任何简单的语法错误。

以下是相关文件：

gulpfile.js:

const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const webpack_config = require('./webpack.config');

function webpack_build_dev() {
  webpack_config.devtool = 'eval-source-map';
  return gulp.src('app/app.jsx')
    .pipe(webpackStream(webpack_config), webpack)
    .pipe(gulp.dest('./'));
}

gulp.task('webpack:build:dev', gulp.series('clean', webpack_build_dev));

./app/app.jsx:

import React from 'react';
import { render } from 'react-dom';

const app = (
    <h1>Hello</h1>
);

render(
  app,
  document.getElementById('app')
);

./webpack.config.js:

const webpack = require('webpack');
const path = require('path');

module.exports = {
  context: path.resolve(__dirname, './app'),
  entry: './app.jsx',
  output: {
      path: path.resolve(__dirname, './public'),
      filename: 'bundle.js',
  },
  resolve: {
      modules: [
          path.resolve(__dirname, './app'),
          "node_modules",
      ],
  },
  module: {
    rules: [
      {
          test: /\.jsx?$/,
          exclude: /(node_modules)/,
          use: 'babel-loader',
      },
    ],
  },
};

./.babelrc:

{
  "presets": [
    "es2015",
    "react"
  ]
}

./package.json（相关的 devDependencies）：

{
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "webpack": "^2.2.1",
  }
}

- Jordan

---

我遇到了和你一样的问题... - Chris

@Chris，不幸的是这让我稍微放心了一些，我们会解决这个问题的！我将尝试更多的方法，然后更新帖子。 - Jordan

Answer 1

目前不在电脑旁，无法测试，但您可以尝试：

将导入更改为：

import ReactDOM from 'react-dom'

然后将 render 改为：

ReactDOM.render (
   ...
)

- user2997982

---

没有改变任何东西，也不应该改变。如果是这样的话，那么这将是一个错误，因为它是有效的ES6代码。 - Jordan

不确定您是否已经解决了这个问题，我刚刚尝试使用您提供的配置进行重现，构建成功了。请问您运行哪个命令导致出现错误？ - user2997982

通过gulp运行它似乎可以做到这一点。我也尝试了同样的方法，只是运行webpack，它对我来说构建得很好。我会在有机会时更新这个问题，肯定是gulp或webpack流的问题。 - Jordan

看起来错误是关于使用不适当的加载器解析JSX模块或在错误日志的第3行和第4行中没有使用加载器进行解析。按照上述更改导入似乎与上述日志中的错误不相关。 - Rin Minase

Answer 2

你尝试过添加吗？

 "plugins": ["transform-object-rest-spread", "babel-plugin-transform-react-jsx"]

你要返回你的 .babelrc 文件吗？

- Chris