如何配置Webpack避免JS文件重命名？Angular项目D3懒加载更名需求

完全可以实现，你只需要在Webpack的splitChunks配置里新增一个针对d3的缓存组，指定自定义命名规则即可。修改后的配置如下：

optimization: {
  splitChunks: {
    minChunks: 3,
    cacheGroups: {
      // 专门匹配d3库的缓存组
      d3Vendor: {
        test: /[\\/]node_modules[\\/]d3[\\/]/,
        name: 'd3',
        filename: '[name].js', // 改成 '[name].min.js' 就能生成d3.min.js
        chunks: 'all',
        priority: 10 // 确保这个组的优先级高于默认缓存组，避免被覆盖
      }
    }
  },
  chunkIds: 'named',
}

配置解释： #

• test：通过正则匹配node_modules下的d3相关模块，确保只有d3会被分到这个chunk里
• name：设置chunk的基础名称为'd3'
• filename：直接指定输出文件名，你可以根据需求改成[name].js或[name].min.js
• chunks: 'all'：同步和异步加载的d3依赖都会被匹配到这个chunk
• priority：给这个缓存组设置更高优先级，防止默认的vendor组把d3抢走

如果希望只在生产环境输出.min.js后缀，可以通过环境变量动态判断：

filename: `d3.${process.env.NODE_ENV === 'production' ? 'min.' : ''}js`

修改完配置后重新打包，d3对应的懒加载chunk就会变成你想要的文件名了。

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