Webpack and vue-cli merge configuration, how to delete all console.log, code comments and debugger when packaging production environment code

This article is based on vue-cli 5.0.0, webpack 5.0, TerserWebpackPlugin

Recently, after the company's project development went online, it was found that the console had a lot of information printed during the test. However, if you manually delete and package it, the workload will be too much, and it will not be conducive to future maintenance and debugger. All must be packaged by webpack to automatically delete the console and comments for us.

The first step is to find the webpack plug-in for optimizing the console.log statement on the Internet --------- uglifyjs-webpack-plugin , but after checking the npm library, I found that this library has not been updated for a long time, and I suspect that it may not be suitable for webpack5

Finally, I found this plugin TerserWebpackPlugin  on the webpack official website

 The next step is to download the configuration,

$ npm install terser-webpack-plugin --save-dev

//vue.config.js
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    //...
configureWebpack: {
   optimization: {
      minimize: true,
      minimizer: [new TerserPlugin({
        terserOptions: {
            compress: {
                drop_debugger: true, 
                drop_console: true,
                pure_funcs: ['console.log']//删除打印语句
            },
            format: {
              comments: false //删除所有注释
            }
            
        },
        parallel: true,  //多核打包，提升打包速度
        extractComments: false //是否将注释全部集中到一个文件中
     })],
   },
}
};

And then you're done (not) 

Then it fails and the print notes are still there. . . . Take a look at the random print packaging configuration (for details, please refer to the vuecli document webpack related | Vue CLI )

vue inspect --mode prodction > ./inspect.js

 

 

 It was found that the optimization we configured in configurewebpack was not merged with the optimization in the webpack default configuration file, but was merged into options. After looking through the documentation, I found that if you want to customize the configuration, you need to use the chainWebpack method in vuecli

//vue.config.js
const { defineConfig } = require('@vue/cli-service');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = defineConfig({
  lintOnSave: false,
  transpileDependencies: true,
  productionSourceMap: false,
  chainWebpack: config => { 
    config.optimization.minimizer('terser').tap(args => {
      args.forEach(item => {
        if(item.hasOwnProperty('terserOptions')) {
          Object.assign(item['terserOptions'].compress,{
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ['console.log']
          })
        }
        item['terserOptions']['format'] = {
          comments: false
        }
      })
      return args
    })
  },
})

 The syntax of specific webpack-chain can refer to:

GitHub - Yatoo2018/webpack-chain at zh-cmn-HansA chaining API to generate and simplify the modification of Webpack configurations. - GitHub - Yatoo2018/webpack-chain at zh-cmn-Hanshttps://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans

Finally, we print the packaging configuration file again 

optimization: {
   //....
   mnimizer: [
      /* config.optimization.minimizer('terser') */
      new TerserPlugin(
        {
          terserOptions: {
            compress: {
              arrows: false,
              collapse_vars: false,
              comparisons: false,
              computed_props: false,
              hoist_funs: false,
              hoist_props: false,
              hoist_vars: false,
              inline: false,
              loops: false,
              negate_iife: false,
              properties: false,
              reduce_funcs: false,
              reduce_vars: false,
              switches: false,
              toplevel: false,
              typeofs: false,
              booleans: true,
              if_return: true,
              sequences: true,
              unused: true,
              conditionals: true,
              dead_code: true,
              evaluate: true,
              drop_debugger: true,
              drop_console: true,
              pure_funcs: [
                'console.log'
              ]
            },
            mangle: {
              safari10: true
            },
            format: {
              comments: false
            }
          },
          parallel: true,
          extractComments: false
        }
      ),
     minimize: true
     //...
}

At this point, the default configuration of our TerserPlugin plug-in has been merged with our custom modified configuration

Finally, after repackaging, I found that the console has no comments, and it's done perfectly.