Webpack 4中babel-loader的exclude规则不生效问题排查

你遇到的问题核心是exclude正则表达式的写法逻辑搞反了，导致myuimodule反而被排除在外，没有被babel-loader处理。我来帮你拆解原因和解决办法：

为什么你的规则不生效？ #

你写的正则/node_modules(?!\/myuimodule)/，它的逻辑是：匹配所有后面不紧跟着/myuimodule的node_modules字符串。但实际项目里，myuimodule的文件路径是类似node_modules/myuimodule/src/index.js，这里node_modules后面确实跟着/myuimodule，所以这个路径会被你的exclude规则命中，直接跳过babel-loader处理——这和你想要的"排除node_modules，但保留myuimodule"完全相反。

两种正确的配置方式 #

方式1：用include + exclude组合（推荐，逻辑更清晰） #

先整体排除node_modules，再单独把myuimodule加入include列表。因为webpack的规则里，include的优先级高于exclude，所以符合include条件的文件会被babel-loader处理：

rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    include: /node_modules\/myuimodule/,
    use: ['babel-loader'],
  },
  // 其他规则...
]

方式2：修正负向预查正则 #

如果你一定要用负向预查的写法，需要调整正则逻辑，让它匹配不在myuimodule目录下的node_modules文件：

rules: [
  {
    test: /\.jsx?$/,
    // 匹配node_modules/后面不紧跟myuimodule/的路径
    exclude: /node_modules\/(?!myuimodule\/)/,
    use: ['babel-loader'],
  },
  // 其他规则...
]

小技巧：验证规则是否生效 #

可以安装log-loader，在webpack配置里添加打印逻辑，确认哪些文件被babel-loader处理：

npm install log-loader --save-dev

然后修改配置：

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

运行webpack后，终端会打印出所有被处理的文件路径，你可以检查myuimodule的文件是否在列表里。

内容的提问来源于stack exchange，提问作者Pavel Perevezencev