How to get drop_console to work cli v5 webpack5?

[jeff-wishnie]

The following configuration worked for me with vue-cli/vue-cli-services 4 and webpack 4:

// relevent section of vue.config.js

module.exports = {
  configureWebpack: {
    devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
    optimization: {
      ...(process.env.NODE_ENV === 'production' && {
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              output: { comments: false },
              compress: { drop_console: true },
              mangle: true,
            },
            extractComments: false,
          }),
        ],
      }),
  }
}

(note: For webpack v5/cli v5 I've updated output -> format)

This no longer works--drop_console is not being respected.

Interestingly, the output of vue inspect --mode production shows the following (as a snippet):

minimizer: [
   new TerserPlugin(...),
   {
      options {
           options: {
               compress: { drop_console: true }
          }
   }
]

Where the vue-cli-service v4 ouput shows:

minimizer: [
   new TerserPlugin(...),
   {
      options {
           terserOptions: { <--------------
               compress: { drop_console: true }
          }
   }
]

Is this a bug? Is my configuration off?

Has someone gotten this to work??

[Viggo95]

in @vue/cli-service@^5.0.0-rc.1

remove console 👇

module.exports = {
  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      const compress = args[0].terserOptions.compress
      compress.drop_console = true
      return args
    })
  },
}

terser-webpack-plugin#options

[jeff-wishnie]

Thatnks, I'll give that a shot.

Any idea why the configuration merge via the configureWebpack attribute is failing?

I prefer to use that in my vue.config.js over chainWebpack

[jeff-wishnie]

chainWebpack approach does work.

But I think configureWebpack should work (as it did with vue-cli-service v4/Webpack v4) so maybe a bug with the Webpack config merging?