webpack 4 和 babel 7 出错答案

【问题标题】：Error with webpack 4 and babel 7webpack 4 和 babel 7 出错
【发布时间】：2018-04-19 12:50:04
【问题描述】：

我有一个使用 React 和 Webpack 作为构建系统的项目。我的 devDependencies

"webpack": "^4.5.0",

webpack.config.js

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
...

我得到这个错误：

./node_modules/project/components/InfiniteScroller.jsx 中的错误模块解析失败：意外的令牌 (9:8) 您可能需要一个适当的加载器来处理这种文件类型。

我做错了什么？

【问题讨论】：

标签： javascript webpack

【解决方案1】：

看起来您正在包含来自 node_modules 的未编译代码，出于效率原因，您的加载程序专门排除了编译 node_modules 代码 (exclude: /node_modules/)。通常模块会暴露库的编译版本（通常在 /dist 中，通常由模块的 package.json 中的“main”属性指向）。

如果你想解析 node_modules 中的代码，我建议你只为node_modules/project 做，而不是所有模块以提高效率。相应地修改您的排除语句，例如：exclude: /node_modules(?!\/project)/

您还需要确保使用必要的预设来处理文件（例如babel-preset-env、babel-preset-react）和文件可能需要的任何插件（例如transform-object-rest-spread 等）。

【讨论】：

【解决方案2】：

由于我没有足够的积分来评论，我将发布作为答案 -

我看到您正在导入一个 .jsx 模块 - 您应该尝试添加

query: {
  presets: ['es2015','react']
}

use之后的规则

【讨论】：