生产环境构建时Webpack排除指定文件夹失效问题求助

1. 修正路径匹配逻辑 #

你当前配置的exclude路径写法有问题，Webpack对路径匹配的要求更严谨，推荐两种可靠写法：

方式一：用绝对路径精准匹配 #

先引入Node的path模块，通过path.resolve生成项目根目录到mock文件夹的绝对路径，避免相对路径匹配偏差：

const path = require('path');

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      {
        test: /\.(ts|json)$/i,
        exclude: [path.resolve(__dirname, 'src/api/mock')],
        use: [
          // 这里必须加上你处理TS/JSON的loader，比如ts-loader、babel-loader
          'ts-loader'
        ],
      },
    ],
  },
};

方式二：用正则表达式匹配路径 #

直接写正则匹配mock目录的路径，适配不同系统的路径分隔符：

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      {
        test: /\.(ts|json)$/i,
        exclude: /src\/api\/mock\//,
        use: [
          'ts-loader' // 替换成你项目实际使用的loader
        ],
      },
    ],
  },
};

2. 确保配置作用于生产环境 #

如果你的Webpack是分环境配置（比如单独的webpack.prod.js），要把这条规则写在生产环境的配置文件里，别误写到开发环境配置中。

3. 排查规则冲突 #

检查项目中是否有其他针对TS/JSON文件的loader规则，要是有，需要把排除mock目录的逻辑合并到对应的规则里，避免规则优先级冲突导致排除失效。

额外：处理被导入的mock文件 #

如果上述配置还是没生效，大概率是mock目录下的文件被其他模块导入了，Webpack会强制打包被导入的文件。这种情况可以：

• 在代码中通过环境变量控制mock导入：

// 示例：在API入口文件中
if (process.env.NODE_ENV !== 'production') {
  import('./mock');
}

• 或者用Webpack的IgnorePlugin直接忽略mock模块：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /src\/api\/mock/,
    }),
  ],
};

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