Webpack5升级后共享chunk为数字ID，如何恢复Webpack4的命名格式？

解决方法 #

你遇到的命名差异是Webpack 5对splitChunks的默认行为调整导致的，按照以下修改配置即可对齐Webpack 4的产物命名：

entry: {
  app: "app",
  admin: "admin"
},
optimization: {
  // 生产环境默认chunkIds为deterministic会生成数字ID，添加该行保证跨环境命名一致
  chunkIds: "named",
  splitChunks: {
    chunks: "all",
    // 关键配置：开启共享chunk的自动拼接命名，对齐Webpack 4默认行为
    name: true,
    cacheGroups: {
      vendor: {
        name: "vendor",
        test: /[\\/]node_modules[\\/]/,
        // 提升vendor缓存组优先级，避免node_modules代码被打入普通共享chunk
        priority: 10
      }
    }
  },
  runtimeChunk: "single"
}

差异原因 #

• Webpack 4 中splitChunks.name默认值为true，会自动将被多入口引用的共享chunk名称，生成为所有引用入口的名称用~拼接的格式，也就是你预期的admin~app.js
• Webpack 5 中splitChunks.name默认值调整为false，无显式名称的共享chunk会直接使用chunk ID作为文件名，生产环境默认chunk ID为数字哈希格式，因此出现了121.js这类命名的文件

上述配置修改后，即可生成和Webpack 4完全一致的产物结构。

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