webpack 动态导入：如何更改文件名中的默认信号“~”？

Question

我正在使用 Vue.js 构建网络应用程序。而webpack (version: 4.41.2) 是我的构建工具，我使用动态导入方式加载组件，简单定义如下：

components: {
  chat: () => import(import(/* webpackChunkName: "chat" */ './chat')),
  file: () => import(import(/* webpackChunkName: "file" */ './file'))
}

webpack 输出配置为：

output: {
  filename: 'js/[name].[chunkhash].js',
  chunkFilename: 'js/[name].[chunkhash].js'
},

以下是构建文件：

chat.ed11dfebe7589449a58f.js,
file.5d49ceb7951cfdd60f32.js,
chat~file.9626240163418cbf81b9.js

如你所见，有一个名为chat~file的文件，在我们公司的安全规则中，如果文件名包含~，将阻止下载它们，所以我需要更改信号~ 这里是其他允许的信号，比如 _，有人知道如何在 webpack 配置中更改它吗？

Answer 1

您可以使用vue.config.js 文件配置生成的块的名称。试试这个：

module.exports {
  configureWebpack: (config) => {
      config.output.filename = '[name].[hash:8].js';
      config.output.chunkFilename = '[name].[hash:8].js';
  }
}

编辑因为评论：

可以使用 automaticNameDelimiter 更改分隔符（检查 documentation）。

Answer 2

配置名称分隔符 optimization.splitChunks.automaticNameDelimiter = '_'

https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks

webpack 动态导入：如何更改文件名中的默认信号“~”？

webpack dynamic import: How to change the default signal "~" in file name?

vue.js

webpack

dynamic-import