Webpack v4迁移问题：optimization.splitChunk命名异常

我明白你在Webpack从v3迁移到v4时遇到的这个命名困扰——开发模式下splitChunks能正常生成shared.js和vendor.js，但切换到生产模式后，这两个bundle却变成了数字命名，直接导致页面无法正确引入。结合你的配置和需求，我们可以通过调整几个关键配置项来解决这个问题：

问题根源 #

Webpack在production模式下默认启用了一系列优化策略，其中chunkIds的默认值为deterministic（v4及以上版本），这会让Webpack用数字ID来命名chunk以优化缓存，但恰好和你需要保留指定名称的需求冲突。另外，你配置中splitChunks.name: true的设置，在生产模式下可能会被默认优化规则覆盖，导致自定义名称失效。

解决方案 #

1. 强制使用命名式Chunk ID #

在Webpack配置的optimization中添加chunkIds: 'named'，确保生产模式下Webpack始终使用chunk的名称而非数字ID：

optimization: {
  chunkIds: 'named', // 核心配置：生产模式下也使用名称作为chunk标识
  splitChunks: {
    // 移除name: true，改为在缓存组中明确指定名称
    chunks: 'async',
    cacheGroups: {
      default: false,
      commons: {
        chunks: 'initial',
        name: 'shared', // 固定命名为shared
        minChunks: 2,
        maxInitialRequests: 5,
        minSize: 0,
        enforce: true // 确保该缓存组规则优先执行，不被其他策略覆盖
      },
      vendor: {
        test: /[\/]node_modules[\/]/,
        name: 'vendor', // 固定命名为vendor
        enforce: true,
        chunks: 'all',
        minChunks: 1
      }
    }
  }
}

2. 统一Output命名规则 #

因为你提到哈希由其他步骤生成，所以需要确保output中的filename和chunkFilename在生产模式下都使用[name]作为命名模板，避免异步chunk使用数字命名：

output: {
  filename: '[name].js', // 无论开发还是生产，都按名称生成文件
  chunkFilename: '[name].js', // 异步chunk也遵循名称规则
  jsonpFunction: '__LIB__',
  publicPath: '/content/dist/'
}

注：你原配置中filename在RELEASE模式下已经是[name].js，可以简化成统一写法，减少条件判断的复杂度。

配置生效逻辑 #

• chunkIds: 'named'会覆盖生产模式下的默认deterministic配置，让Webpack始终以chunk的自定义名称生成文件名，而非自动分配的数字ID。
• splitChunks.cacheGroups中明确指定name并设置enforce: true，确保这些缓存组的命名规则不会被Webpack的其他优化策略覆盖。
• 统一output的命名模板，让所有bundle都遵循[name].js的规则，从根源上避免数字命名的出现。

验证修改 #

调整配置后重新运行生产模式的构建命令，你应该会看到输出文件中正常生成shared.js和vendor.js，而非数字命名的bundle，这样就能直接在页面中正确引入它们了。

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