webpack动态导入如何修改打包后chunk文件名默认的~分隔符

你打包产物中出现的带~的文件是webpack抽离多个动态导入模块公共依赖时自动生成的公共chunk，~是webpack默认的公共chunk名称分隔符，可通过如下配置修改：

修改webpack配置 #

在webpack配置的optimization.splitChunks节点下添加automaticNameDelimiter参数，将默认分隔符替换为_即可：

module.exports = {
  // 你的其他原有配置保持不变
  output: {
    filename: 'js/[name].[chunkhash].js',
    chunkFilename: 'js/[name].[chunkhash].js'
  },
  optimization: {
    splitChunks: {
      // 核心配置：将默认分隔符~替换为_
      automaticNameDelimiter: '_',
      // 其余splitChunks配置保持原有逻辑即可，未自定义过该配置的话保留默认值即可
      chunks: 'all'
    }
  }
}

配置修改完成后重新打包，原chat~file.xxxx.js文件会自动重命名为chat_file.xxxx.js，符合安全规则要求。

补充注意：你提供的动态导入组件示例代码存在冗余嵌套问题，原代码chat: () => import(import(/* webpackChunkName: "chat" */ './chat'))多套了一层import，正确写法为chat: () => import(/* webpackChunkName: "chat" */ './chat')，冗余写法可能导致模块加载失败，建议修正。

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