Vue-cli: Cannot specify output chunk names

Created on 24 Apr 2018  路  9Comments  路  Source: vuejs/vue-cli

Version

3.0.0-beta.6

Reproduction link

sanchitgn/chunk

Steps to reproduce

  1. Specify a chunk using dynamic import syntax
  2. Add a chunk name import(/* webpackChunkName: "profile" */ "./views/Profile/Profile.vue")
  3. Build yarn run build

What is expected?

   File                                      Size             Gzipped

  dist/js/profile.e9349658.js               31.66 kb         5.56 kb

What is actually happening?

 File                                      Size             Gzipped

  dist/js/0.e9349658.js                     31.66 kb         5.56 kb

Sorry if this is has already been posted. Could not find a similar issue.
The other webpack comments (webpackMode) work fine

Possible duplicate #1097

enhancement

Most helpful comment

I think this line is the problematic one:

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/prod.js#L8

Please try this in vue.config.js (can't do that myelf right now):

module.exports {
  chainWebpack: config => {
    config.output.chunkFilename(`js/[name].[id].[chunkhash:8].js`)

  }
}

If that solves the problem, we should change ths with a PR.

All 9 comments

Setting "comments": true in .babelrc doesn't seem to work

...which is why I alredy removed my comment. I misread your OP.

But it would be important to get an acutal reproduction (codesandbox doesn't use vue-cli), or at the very least, which options you used to create your project.

@LinusBorg Check this repo. After specifying webpackChunkName in router.js, the output is still 0.[hash].js. The project was created with the latest vue-cli. The only change it the dynamic Home component

I think this line is the problematic one:

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/prod.js#L8

Please try this in vue.config.js (can't do that myelf right now):

module.exports {
  chainWebpack: config => {
    config.output.chunkFilename(`js/[name].[id].[chunkhash:8].js`)

  }
}

If that solves the problem, we should change ths with a PR.

Yup, that solves it. It makes sense to add [name] in the chunk file name.

Edit: Add PR #1173

Looks like this one can be closed.

This doesn't work if you're building as lib or wc, because the lib/wc config is applied after the vue.config.js.

Please open a new issue with a reproduction if you have a problem. This issue is closed and the chances of your information being noticed nd processed is therefore close to zero.

I had to switch from "removeComments": true to "removeComments": false in my tsconfig.json
Hope this can save someone hours of wasted time...

Was this page helpful?
0 / 5 - 0 ratings