Configuración de combinación de Webpack y vue-cli, cómo eliminar todos los archivos console.log, comentarios de código y depurador al empaquetar el código del entorno de producción

Este artículo está basado en vue-cli 5.0.0, webpack 5.0, TerserWebpackPlugin

Recientemente, después de que el desarrollo del proyecto de la compañía se pusiera en línea, se descubrió que la consola tenía mucha información impresa durante la prueba. Sin embargo, si lo elimina y empaqueta manualmente, la carga de trabajo será demasiado y no será propicio para el mantenimiento y la depuración en el futuro. Todo debe estar empaquetado por webpack para eliminar automáticamente la consola y los comentarios para nosotros.

El primer paso es encontrar el complemento webpack para optimizar las declaraciones de console.log en Internet --------- uglifyjs-webpack-plugin , pero después de verificar la biblioteca npm, descubrí que esta biblioteca no ha sido actualizado durante mucho tiempo, y sospecho que puede no ser adecuado para webpack5

Finalmente, encontré este complemento TerserWebpackPlugin  en el sitio web oficial del paquete web

 El siguiente paso es descargar la configuración,

$ 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 //是否将注释全部集中到一个文件中
     })],
   },
}
};

Y luego has terminado (no) 

Luego falla y las notas impresas siguen ahí. . . . Eche un vistazo a la configuración del paquete de impresión aleatoria (para obtener más información, consulte el documento vuecli relacionado con el paquete web | Vue CLI )

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

 

 

 Se descubrió que la optimización que configuramos en configurewebpack no se fusionó con la optimización en el archivo de configuración predeterminado del paquete web, sino que se fusionó en opciones. Después de revisar la documentación, descubrí que si desea personalizar la configuración, debe usar el método chainWebpack en 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
    })
  },
})

 La sintaxis de una cadena de paquete web específica puede referirse a:

GitHub - Yatoo2018/webpack-chain at zh-cmn-Hans Una API de encadenamiento para generar y simplificar la modificación de configuraciones de Webpack. - GitHub - Yatoo2018/webpack-chain en zh-cmn-Hans https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans

Finalmente, volvemos a imprimir el archivo de configuración del empaquetado. 

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
     //...
}

En este punto, la configuración predeterminada de nuestro complemento TerserPlugin se ha fusionado con nuestra configuración modificada personalizada

Finalmente, después de volver a empaquetar, descubrí que la consola no tiene comentarios y está perfectamente hecha.