Question

将 webpack 从^1.14.0升级到"^3.0.0"

后，我收到了JSX解析错误

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。屏幕截图如下。

Answer 1

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

来完成

./node_modules/.bin/webpack --progress

更优雅的运行方式是在package.json中创建npm script。

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

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

npm run build

您的配置看起来没问题，resolve.extensions除外，它不再允许/需要空字符串。

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

我真的不明白为什么你对.js和.jsx使用了两个不同的规则。您可以使用与/\.jsx?$/匹配的正则表达式。但这两条规则并不完全相同。区别在于您仅对modules: false使用.js，但您应该让webpack处理ES模块。如果您没有理由以不同方式执行此操作，则应结合使用这两个规则。

Answer 2

如果在编译时在输出中显示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。

中的Webpack版本

JSX意外的令牌 - Webpack和babel-loader

2 个答案: