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

Question

迁移到Webpack 2后，使用gulp运行带有webpack-stream的webpack似乎会导致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），并且输入文件由装载程序处理。
• 使用相同的babel ./app/app.jsx和依赖关系，没有webpack的Ran babel（.babelrc）。输出正确，没有错误。
• 没有gulp，而且输出正确。
• 更新了相关的软件包（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",
  }
}

Answer 1

目前不在电脑上，所以无法测试，但你可以尝试：

将导入更改为：

import ReactDOM from 'react-dom'

然后将渲染更改为：

ReactDOM.render (
   ...
)

Answer 2

您是否尝试添加

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

到您的.babelrc文件？