Webpack 4 babel 加载器排除不工作答案

【问题标题】：Webpack 4 babel loader exclude not workingWebpack 4 babel 加载器排除不工作
【发布时间】：2018-04-23 15:42:08
【问题描述】：

我尝试使用 React 设置 Webpack 4.6.0，但遇到了一个问题：

在webpack.config.js:

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

在.babelrc中

{
  "presets": [
    "@babel/react",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "modules": false
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-syntax-dynamic-import"
  ]
}

为什么 babel-loader 不排除 myuimodule？

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

您收到此错误是因为您的 exclude 行。 Webpack 尝试构建你的包。它从 entry 这一行开始找到依赖关系树的某个位置

import Progress from './path/to/Progress.jsx'

然后它会尝试解析您的文件并将其加载到包中。它没有找到这个文件的规则，所以没有加载器做他们的工作。遇到jsx标签，无法解析，报错Unexpected token，提醒开发者检查该文件是否存在loader。

它找不到该文件的加载器，因为您明确排除了加载器处理该文件。

【讨论】：

Progress.jsx 在我的 myuimodule 中
在rules声明exclude: /node_modules(?!\/myuimodule)/
但字面意思是 exclude 而不是 include。尝试用包含替换它。
你可以尝试排除作为函数吗？正如这里提到的github.com/webpack/webpack/issues/2031#issuecomment-283517150
或者您可以添加包含并列出所有源目录，包括 myuimodule。

【解决方案2】：

看起来很疯狂，但请尝试将 .babelrc 重命名为 babel.config.json。不知道为什么会这样，但它已经为我解决了两次问题。不记得我第一次在哪里找到这个解决方案。

【讨论】：