webpack dynamic import naming doesn't work

[MarvinXu]

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:
webpack/webpack#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')
  },
//...

[MarvinXu]

@6220119 Thx a lot! So the problem is babel-loader removed comments before webpack can find the chunkname. BTW, how did you find out ?

[6220119]

I was experiencing the same issue as I was trying the Webpack Async Code Splitting feature using dynamic import with vuejs-template/webpack.
So I did some searching and I hit your issue reporting, then I checked the generated source from webpack and I saw that the magic comment was removed. So webpack used number (1.js, 2.js, ...) instead.
Then I assume either the vue-loader or Babel had messed with the comment, then I found the configuration of Babel.

Actually, I think the Babel's comment configuration is not necessary because the Uglify plugin will do that on the later stage.

[MarvinXu]

then I checked the generated source from webpack

I don't get it. What is "generated source"? Do you mean "dist" files? But even in the correctly generated output, I didn't see any magic comment (I turned off uglifyjs)

[6220119]

Yes, I mean the "dist" files.
Well, it is just my guess :) I have checked again on the generated source file and also don't find those magic comments.
I did read the source code of webpack to figure out that it had never reached the the logic to process the webpackChunkName. See the \node_modules\webpack\lib\dependencies\ImportParserPlugin.js

[LinusBorg]

Actually, I think the Babel's comment configuration is not necessary because the Uglify plugin will do that on the later stage.

Yeah, that makes sense and will update the .babelrc config accordingly.

[MarvinXu]

@6220119 Thx, I should go learn the source code as well. XD

[Mouvedia]

In your .babelrc config file, make sure comment: true is used.

Please add this in the documentation!
Also is there any way to make exception for the comment property?

[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.