webpack和vue-cli合并配置，打包生产环境代码时删除所有的console.log、代码注释和debugger

本文基于vue-cli 5.0.0,webpack 5.0,TerserWebpackPlugin

最近公司项目开发上线后，发现控制台有很多当时测试时打印的信息。但是如果手动删除然后打包的话工作量太大，而且不利于以后的维护和debugger。所有必须通过webpack打包时自动帮我们删除console和注释。

第一步上网找到webpack关于优化console.log语句的插件---------uglifyjs-webpack-plugin，但是查看npm库后发现这个库很久没更新过怀疑可能不适配webpack5

 最后在webpack官网找到这个插件TerserWebpackPlugin

 接下来就是下载配置，

1.  
   $ npm install terser-webpack-plugin --save-dev
2.  
    
3.  
   //vue.config.js
4.  
   const TerserPlugin = require("terser-webpack-plugin");
5.  
    
6.  
   module.exports = {
7.  
   //...
8.  
   configureWebpack: {
9.  
   optimization: {
10.  
    minimize: true,
11.  
    minimizer: [new TerserPlugin({
12.  
    terserOptions: {
13.  
    compress: {
14.  
    drop_debugger: true,
15.  
    drop_console: true,
16.  
    pure_funcs: ['console.log']//删除打印语句
17.  
    },
18.  
    format: {
19.  
    comments: false //删除所有注释
20.  
    }
21.  
     
22.  
    },
23.  
    parallel: true, //多核打包，提升打包速度
24.  
    extractComments: false //是否将注释全部集中到一个文件中
25.  
    })],
26.  
    },
27.  
    }
28.  
    };

然后就大功告成（不是） 

然后就失败了打印注释都还在。。。。随机打印打包配置看看（具体可以看看vuecli文档webpack 相关 | Vue CLI）

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

 发现我们在configurewebpack中配置的optimization并没有和webpack默认配置文件中的optimization合并，而是合并到了options中。在翻看文档后发现如果要自定义配置的话需要使用vuecli中的chainWebpack方法

1.  
   //vue.config.js
2.  
   const { defineConfig } = require('@vue/cli-service');
3.  
   const TerserPlugin = require("terser-webpack-plugin");
4.  
   module.exports = defineConfig({
5.  
   lintOnSave: false,
6.  
   transpileDependencies: true,
7.  
   productionSourceMap: false,
8.  
   chainWebpack: config => {
9.  
   config.optimization.minimizer('terser').tap(args => {
10.  
    args.forEach(item => {
11.  
    if(item.hasOwnProperty('terserOptions')) {
12.  
    Object.assign(item['terserOptions'].compress,{
13.  
    drop_debugger: true,
14.  
    drop_console: true,
15.  
    pure_funcs: ['console.log']
16.  
    })
17.  
    }
18.  
    item['terserOptions']['format'] = {
19.  
    comments: false
20.  
    }
21.  
    })
22.  
    return args
23.  
    })
24.  
    },
25.  
    })

 具体webpack-chain的语法可以参考：

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

最后我们再次打印下打包配置文件 

1.  
   optimization: {
2.  
   //....
3.  
   mnimizer: [
4.  
   /* config.optimization.minimizer('terser') */
5.  
   new TerserPlugin(
6.  
   {
7.  
   terserOptions: {
8.  
   compress: {
9.  
   arrows: false,
10.  
    collapse_vars: false,
11.  
    comparisons: false,
12.  
    computed_props: false,
13.  
    hoist_funs: false,
14.  
    hoist_props: false,
15.  
    hoist_vars: false,
16.  
    inline: false,
17.  
    loops: false,
18.  
    negate_iife: false,
19.  
    properties: false,
20.  
    reduce_funcs: false,
21.  
    reduce_vars: false,
22.  
    switches: false,
23.  
    toplevel: false,
24.  
    typeofs: false,
25.  
    booleans: true,
26.  
    if_return: true,
27.  
    sequences: true,
28.  
    unused: true,
29.  
    conditionals: true,
30.  
    dead_code: true,
31.  
    evaluate: true,
32.  
    drop_debugger: true,
33.  
    drop_console: true,
34.  
    pure_funcs: [
35.  
    'console.log'
36.  
    ]
37.  
    },
38.  
    mangle: {
39.  
    safari10: true
40.  
    },
41.  
    format: {
42.  
    comments: false
43.  
    }
44.  
    },
45.  
    parallel: true,
46.  
    extractComments: false
47.  
    }
48.  
    ),
49.  
    minimize: true
50.  
    //...
51.  
    }

此时我们TerserPlugin插件的默认配置就已经和我们自定义修改的配置进行合并了

最后重新打包发现控制台已经没有注释，完美收工。

这篇好文章是转载于：学新通技术网