My async route:
const MainView = () => import(/* webpackChunkName: "group-foo" */ '@/components/MainView')
const OneView = () => import(/* webpackChunkName: "group-foo" */ '@/components/OneView')
const TwoView = () => import(/* webpackChunkName: "group-foo" */ '@/components/TwoView')
After I run build:

The bundle name is 0 rather than group-foo.
Hm, that generally happens when comments are stripped, usually but babel.
We had a "comments: false" setting in .babelrc for a long time(before webpack introduced this feature) which stripped comments from transpiled code and consequently broke this webpack feature.
But I removed this from the template back on June 22nd (https://github.com/vuejs-templates/webpack/commit/8563cdb8d8d1e4abaef64f7695697b70957b9490), so that should work, assuming you created your project after this date.
Could you verify that your .babelrc does not contain this setting?
Edit: Oh, I see you submitted a PR that changes something else. Nice, will check it out!
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
The .babelrc seems fine. And if comments: false setting in .babelrc, the magic comments are not supposed to work. I send a PR and it should solve this issue.
Thanks for the PR, will merge it as soon as I found time to take it for a quick spin.
Hi, I don't see this as a bug. In production this shouldn't matter because the chunk is named properly as you can see in the Chunk names column. Only the file is named numeric.
Please also note that using name instead of id generates bigger manifest since the mapping for name to id has to be stored somewhere. See here
Note that these filenames need to be generated at runtime to send the requests for chunks. Because of this, placeholders like [name] and [chunkhash] need to add a mapping from chunk id to placeholder value to the output bundle with the webpack runtime. This increases the size and may invalidate the bundle when placeholder value for any chunk changes.
In this case I'd like to undo this change.
edit: add quote
I see, it does have some side effects with [name]. And I agree that it shouldn't matter what the chunk name is in production, if the chunks are group together properly.
I think it's better to undo this change. @LinusBorg
Most helpful comment
Hm, that generally happens when comments are stripped, usually but babel.
We had a
"comments: false"setting in.babelrcfor a long time(before webpack introduced this feature) which stripped comments from transpiled code and consequently broke this webpack feature.But I removed this from the template back on June 22nd (https://github.com/vuejs-templates/webpack/commit/8563cdb8d8d1e4abaef64f7695697b70957b9490), so that should work, assuming you created your project after this date.
Could you verify that your
.babelrcdoes not contain this setting?Edit: Oh, I see you submitted a PR that changes something else. Nice, will check it out!