How to put a static name for files generated in the bundle?

Question

I'm working on an MPA application with Vue CLI, and the moment I make the bundle, Webpack generates the files automatically. The output file list is something like this:

chunk-vendors.7f809fbd.js
chunk-common.aae8cb13.js
home.f85a21ab.js
chunk-common.9113b70b.css
etc...

Is it possible to manually define the name of these generated files? I want filenames like this:

chunk-vendors.my-standard.js
chunk-common.my-standard.js
home.my-standard.js
chunk-common.my-standard.css

Answer 1

This can be accomplished with the following Vue CLI config (from vuejs/vue-cli#1967):

// vue.config.js
const chunkPrefix = '[name].my-standard'

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => Object.assign({}, options, { name: `${chunkPrefix}.[ext]` }));
  },
  css: {
    extract: {
      filename: `${chunkPrefix}.css`,
      chunkFilename: `${chunkPrefix}.css`,
    },
  },
  configureWebpack: {
    output: {
      filename: `${chunkPrefix}.js`,
      chunkFilename: `${chunkPrefix}.js`,
    }
  },
}