Question

我有一个使用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）您可能需要一个适当的加载器来处理这种文件类型。

我做错了什么？

Answer 1

看起来您包含来自node_modules的未编译代码，出于效率原因，您的加载程序明确排除了编译node_modules代码（exclude: /node_modules/）。通常模块公开库的编译版本（通常在/ dist中，通常由＆＃34; main＆＃34;属性在模块的package.json中指向）。

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

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

Answer 2

由于我没有足够的评论意见，我将作为答案发布 -

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

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

在use

之后的规则

webpack 4和babel 7出错

2 个答案: