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

I am using Vue.js to build a web app. And webpack (version: 4.41.2) is my build tool, and I am using dynamic import way t load component, a simple definition is as below:

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

The webpack output config is :

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

Below are built out files:

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

As you see, there is a file with name chat~file, In our company security rule, if file name contains ~ , will block to download them, so I need to change the signal ~ here to other allowed signal like _, does any one know how to change this in webpack config ?

CodePudding user response：

Config name delimiter by optimization.splitChunks.automaticNameDelimiter = '_'

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

CodePudding user response：

You can configure the names of the generated chunks with the vue.config.js file. Try with this:

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

EDIT because comment:

Can change delimiter with automaticNameDelimiter (check documentation).