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

Posted 2023-02-22

【中文标题】迁移到 Webpack 2 后，gulp 或 webpack-stream 导致 webpack 构建失败

【英文标题】：After migrating to Webpack 2, gulp or webpack-stream causes webpack build to fail

【发布时间】：2017-07-18 16:10:53

【问题描述】：

迁移到 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)，并且入口文件由加载器处理。 使用相同的 .babelrc 和依赖项在没有 webpack 的情况下运行 babel (babel ./app/app.jsx)。输出正确，没有错误。 在没有 gulp 的情况下运行 webpack，输出正确。 更新了相关包（babel-core、babel-loader、babel presets、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",
  

【问题讨论】：

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

@Chris 不幸的是，这让我稍微轻松了一点，我们会解决这个问题的！我要尝试更多的东西，我会更新帖子。

【参考方案1】：

目前不在 PC 上，因此无法对此进行测试，但您可以尝试一下吗：

将导入更改为：

import ReactDOM from 'react-dom'

然后将渲染更改为：

ReactDOM.render (
   ...
)

【讨论】：

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

不确定您是否已修复它，只是尝试使用上面的配置重新创建并且构建良好，您正在运行什么命令生成错误？

通过 gulp 运行它似乎正在这样做。我做了同样的事情，它对我来说也很好，也只是运行 webpack。有机会我会更新的，肯定是 gulp 或 webpack 流。

似乎错误是关于使用不适当的加载器解析 JSX 模块或在没有加载器的情况下解析它，如错误日志第 3 行和第 4 行中所述。如上所述更改导入似乎不相关到上述日志中的错误。

【参考方案2】：

你有没有尝试添加

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

到你的 .babelrc 文件？