如何在webpack的splitChunks配置中排除多个指定文件？

你的配置仅针对有明确name属性的chunk做过滤，实际场景中很多chunk（比如动态导入生成的匿名chunk、未配置name的入口chunk）要么没有name，要么name和你预设的文件名不一致，导致匹配失败。

下面分两种常用场景提供解决方案： #

场景1：按chunk名称排除整个chunk不参与拆分 #

先确认你要排除的chunk的实际名称，可先加日志打印所有chunk名做核对：

const excludedChunkNames = ['file 1', 'file 2'];

module.exports = {
  // ...其他webpack配置
  optimization: {
    splitChunks: {
      chunks (chunk) {
        // 构建时会输出所有参与拆分判断的chunk名，核对是否和你配置的一致
        console.log('Chunk name:', chunk.name);
        return !excludedChunkNames.includes(chunk.name);
      }
    }
  }
};

如果确认chunk名匹配还是不生效，可补充判断chunk的入口文件路径兜底：

const excludedFiles = [/file 1\.js$/, /file 2\.js$/];
module.exports = {
  // ...其他webpack配置
  optimization: {
    splitChunks: {
      chunks (chunk) {
        const entryPath = chunk.getModules()[0]?.resource;
        return !excludedFiles.some(reg => reg.test(entryPath || '')) && !excludedFiles.includes(chunk.name);
      }
    }
  }
};

场景2：排除指定源文件/模块不被抽取到公共chunk #

如果你要排除的是单个文件/模块，不是整个chunk，用exclude配置项更精准：

const path = require('path');
// 填写要排除的文件绝对路径
const excludedModules = [
  path.resolve(__dirname, 'src/utils/file1.js'),
  path.resolve(__dirname, 'src/components/file2.vue')
];

module.exports = {
  // ...其他webpack配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      exclude(module) {
        // module.resource就是当前模块的源文件绝对路径
        return excludedModules.includes(module.resource);
      }
    }
  }
};

验证方式 #

构建时添加--profile --json参数导出构建统计信息，可直接查看chunk拆分结果确认是否生效：

npx webpack --profile --json > stats.json

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