迁入Webpack 2后，吞咽或webpack流导致了webpack建筑的失败。

Question

在迁移到Webpack 2之后，用一口口水用webpack溪运行webpack，似乎会导致babel或using抛出一个错误(无法分辨错误的来源)。使用下面的配置和结构成功地运行webpack，但是通过管道通过gulp和webpack流会导致这个错误：

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)，输入文件由装载机处理。
• Ran (babel ./app/app.jsx)没有webpack使用相同的.babelrc和依赖关系。输出是正确的，没有错误。
• 然webpack不饮而尽，产量是正确的。
• 更新相关软件包( babel核心，babel装载机，babel预置，webpack流，吞咽等).
• 检查是否有任何简单语法错误。

以下是相关档案：

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

目前还不能在PC上进行测试，但您可以尝试：

将导入更改为：

import ReactDOM from 'react-dom'

然后将呈现更改为：

ReactDOM.render (
   ...
)

Answer 2

你有没有试过添加

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

你的.babelrc文件？