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

 接下来就是下载配置，

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

然后就大功告成（不是） 

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

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

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

//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
    })
  },
})

 具体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

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

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

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

最后重新打包发现控制台已经没有注释，完美收工。文章来源地址https://www.toymoban.com/news/detail-762852.html

到了这里，关于webpack与vue-cli合并配置，打包生产环境代码时如何删除所有的console.log、代码注释和debugger的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！