WebPack排除目录失效求助：path配置方式不生效

问题原因 #

• 使用path.resolve(__dirname, '/node_modules')时，/node_modules是根绝对路径，会覆盖__dirname，生成的是系统根目录下的node_modules，而非项目目录下的对应文件夹，自然匹配不到要排除的目录。
• 数组配置时路径写法错误，导致无法正确匹配目标目录。

正确配置方案 #

方案1：使用路径数组（推荐） #

确保路径写法正确，用相对路径拼接项目根目录：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: [
          // 正确拼接项目下的node_modules
          path.resolve(__dirname, 'node_modules'),
          // 正确拼接要排除的自定义目录
          path.resolve(__dirname, 'Scripts/excludeDirectory')
        ]
      }
    ]
  }
};

注意：path.resolve(__dirname, 'node_modules')和path.resolve(__dirname, './node_modules')效果一致，无需多余的./。

方案2：使用正则表达式排除多个目录 #

如果习惯用正则，也可以扩展正则规则匹配多个目录：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /(node_modules|Scripts\/excludeDirectory)/
      }
    ]
  }
};

验证小技巧 #

可以在配置里临时添加日志，确认生成的路径是否正确：

console.log('node_modules路径:', path.resolve(__dirname, 'node_modules'));
console.log('排除目录路径:', path.resolve(__dirname, 'Scripts/excludeDirectory'));

运行webpack时查看控制台输出的路径，和实际项目目录对比，确保完全一致。

内容的提问来源于stack exchange，提问作者Paul Gregory