How to customise names of the JS files produced by Vue CLI?

Question

I can't find documentation on how to minimize assets and produce *.min.js files using vue cli. Im using vue cli version 4.2.3.

I require the extention to be *.min.js for rollbar to function correctly.

How would you go about configuring vue cli to produce minimized assets? (no TS involved).

Answer 1

I'm sure Vue CLI minifies JS output when running build in production mode. It's just using different naming convention (no "min.js")

To tweak file names of JS chunks produced by Vue CLI, you can do the following:

Check the default Webpack config Vue CLI uses by running vue inspect on command line (dev mode) or vue inspect --mode production (production mode)

Look for an output (should be near the beginning of the output). In my project it looks like this:

Dev mode:

output: {
    path: '.....some dir\\dist',
    filename: 'js/[name].js',
    publicPath: '/',
    chunkFilename: 'js/[name].js'
  }, 

Production mode:

output: {
    path: '.....some dir\\dist',
    filename: 'js/[name].[contenthash:8].js',
    publicPath: '/',
    chunkFilename: 'js/[name].[contenthash:8].js'
  }, 

Now you can tweak it - add vue.config.js to your project if you don't have it already and add following:

module.exports = {
    configureWebpack: config => {
      if(process.env.NODE_ENV === "production") {
        config.output.filename = 'js/[name].[contenthash:8].min.js'
        config.output.chunkFilename = 'js/[name].[contenthash:8].min.js'
      } else {
        config.output.filename = 'js/[name].js'
        config.output.chunkFilename = 'js/[name].js';
      }
    }
}

[name] and [contenthash:8] are Webpack placeholders - more info in documentation