webpack dynamic import naming doesn't work

I used comment to define chunkname as follows:

import(/* webpackChunkName: "chunk1" */'../components/chunk1.js')

then change webpack config output.chunkFilename: utils.assetsPath('js/[name].js')

but the build result has no file named chunk1.js.

At first I thought it’s a webpack bug. so I post an issue on webpack: https://github.com/webpack/webpack/issues/4861

But then I made a simple project without vuejs-template , chunkname works fine.

So I think there must be something wrong in the config of this template, could you help me find out ?

My test project: https://github.com/MarvinXu/webpack-chunkname-test

many thx!

[6220119]

In your .babelrc config file, make sure comment: true is used. In build/webpack.prod.conf.js file, make sure output.chunkFileName contains [name]. Example:

//...
output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash:5].js'),
    chunkFilename: utils.assetsPath('js/[name].[id].[chunkhash:5].js')
  },
//...

[LinusBorg]

In my opinion, There’s no need to add it to the docs because it’s the default value.

Back when this issue was relevant, we had comments: false in the Babel config, but that was months ago.

Adding something about this to the doc would be starting a list of “don’t do this” about general webpack features.