1

将webpack从升级^1.14.0到后，我收到 JSX 解析错误"^3.0.0"

ERROR in ./shared/Application.js
Module parse failed: /Users/arjunkumar/Documents/Work/test/web/shared/Application.js Unexpected token (25:2)
You may need an appropriate loader to handle this file type.

中的相关代码Application.js如下所示

ReactDOM.render(
  <Provider store={store}>
    <Router routes={Routes(store)} history={history} />
  </Provider>,
  document.getElementById('app-shell') 
);

文件的相关部分webpack.config.js如下所示（所有必需的插件都正确导入到 webpack 配置文件中，以下代码中不存在）。

module.exports = {
  entry: {
    app:['./shared/Application.js'],
    vendors:[// vendors like react and other libs ]
  },
  output: {
    path: __dirname + '/public/build',
    filename: 'app.[chunkhash].js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'autoprefixer-loader',
            'sass-loader'
          ],
          exclude: /node_modules/
        }),
      },
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use:[{
          loader: 'babel-loader',
          options: {
            presets: [
              ['es2015', {modules: false}],
              'react'
            ],
            babelrc: false
          }
        }]
      },
      {
        test: /\.jsx$/,
        exclude: [/node_modules/],
        use:[{
          loader: 'babel-loader',
          options: {
            presets: [
              'es2015',
              'react'
            ],
            babelrc: false
          }
        }]
      },
    ]
  },
  devtool: ( process.env.NODE_ENV === 'production' ) ? false : 'eval',
  plugins: [
    new ExtractTextPlugin(
      'app.[chunkhash].css',
      {
        allChunks: true
      }
    ),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['utilities','vendors'],
      filename: '[name].[chunkhash].js',
      minChunks: Infinity
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      },
      output: {
        comments:false
      },
      comments: false
    }),
    new AssetsPlugin({
      filename: 'assets.json',
      fullPath: false,
      path: __dirname + '/public/build',
      prettyPrint: true
    })
  ]

};

来自文件的问题的相关依赖关系package.json如下。

{
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-object-assign": "^6.8.0",
    "babel-plugin-transform-react-constant-elements": "^6.9.1",
    "babel-plugin-transform-react-inline-elements": "^6.8.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.2.9",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-loose": "^8.0.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "extract-text-webpack-plugin": "^2.1.2",
    "html-webpack-plugin": "^2.21.0",
    "husky": "^0.13.1",
    "lodash-webpack-plugin": "^0.10.6",
    "node-sass": "^3.13.1",
    "postcss-loader": "^2.0.6",
    "purifycss-webpack": "^0.4.2",
    "sass-loader": "^4.1.1",
    "webpack": "^3.0.0",
    "webpack-bundle-analyzer": "^2.3.0",
    "webpack-dev-server": "^2.5.0"
  },
  "dependencies": {
    "react": "^15.1.0"
  }
}

以防万一有人想检查.babelrc文件（我认为babel-loader尊重babelrc: false标志webpack.config.js）。

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "env": {
    "production": {
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-inline-elements",
        "transform-react-remove-prop-types"
      ]
    }
  },
  "comments": false,
  "compact": false
}

关于可能出错的任何想法或线索？

我注意到的另一件重要的事情是，即使我的 webpack 项目和全局依赖项位于3.0.0，当我在项目中运行 webpack 时，它显示Version: webpack 1.15.0在顶部。截图如下。

webpack 版本错误

4

2 回答 2

1

您正在webpack从命令行运行，这意味着您正在运行全局安装，除非您./node_modules/.bin/的PATH. 即使您说您的全局安装版本应该是3.0.0，但始终运行本地安装的版本是一个更好的主意。如果你想从命令行运行它，你可以通过运行：

./node_modules/.bin/webpack --progress

一种更优雅的运行方式是在您的package.json.

"scripts": {
  "build": "webpack --progress"
}

npm 将自动查找./node_modules/.bin/可执行文件。然后您可以使用以下命令运行该脚本：

npm run build

您的配置看起来不错，除了resolve.extensions不再允许/需要空字符串。

resolve: {
  extensions: ['.js', '.jsx']
},

我真的不明白你为什么对.jsand使用两种不同的规则.jsx。您可以有一个与 . 匹配的正则表达式/\.jsx?$/。但这两条规则并不完全相同。不同之处在于你modules: false只使用 for .js，但你应该让 webpack 处理 ES 模块。如果你没有理由采取不同的做法，你应该结合这两条规则。

于 2017-07-06T15:30:07.850 回答
0

如果Webpack 1.x在编译时它在输出中显示，那么这就是它不起作用的原因。您的配置适用于 Webpack 3，因此 Webpack 1 不知道如何处理它。

这可能是因为您已webpack@1.x作为全局模块安装，例如npm i webpack -g这意味着它的版本与您的package.json. 由于这类问题，全局安装依赖项通常不是一个好主意，除非您从 npm 安装真正的全局应用程序。

第一步是npm uninstall -g webpack这样您就不会再意外运行全局版本，然后您需要在构建时显式运行本地版本，例如

而不仅仅是运行

webpack

你应该跑

$(npm bin)/webpack

以便您运行安装到node_modules.

于 2017-07-06T15:26:09.923 回答