Vue项目WebPack打包删除注释和console

---

问题：vue项目构建生成的js文件包含一些注释，里面含使用的依赖包及版本信息，可能会对网站造成危害，那么如何清除掉这些注释呢？

方法一：使用插件uglifyjs-webpack-plugin -D

1. 安装uglifyjs-webpack-plugin

  npm install uglifyjs-webpack-plugin -D

2. vue.config.js里添加配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') //引入插件
 
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            // 删除注释
            output: {
              comments: false
            },
            // 删除console debugger 删除警告
            compress: {
              drop_console: true, //console
              drop_debugger: false,
              pure_funcs: ['console.log'] //移除console
            }
          }
        })
      ]
    }
  }
}

注意： npm run build打包去掉console和警告
在本地开发环境中肯定都会去打印一些数据，但是你如果上传到正式环境呢这些肯定不能再有了，但是你也不能一行一行的去注释掉吧，这样很麻烦所以vue在配置的时候其实是有这个配置的但是需要你自己去配置文件里面修改一下，这样才能方便你的开发二可以达到偷懒的地步

下面就说一下这个配置其实就两行代码就可以了

 drop_debugger: false,
 pure_funcs: ['console.log'] //移除console

方法二：使用插件terser-webpack-plugin

1. 首先查看项目里webpack的版本号

npm list webpack

2. 根据webpack版本号更新 “html-webpack-plugin”版本到4或者5

Webpack 5
 npm i --save-dev html-webpack-plugin
Webpack 4
 npm i --save-dev html-webpack-plugin@4

3. webpack版本为4的还需要安装“terser-webpack-plugin”

npm i --save-dev terser-webpack-plugin@4

4. 修改“vue.config.js”文件

Webpack 4 需要导入,Webpack 5不需要
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  ...
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            output: {
              comments: false
            }
          },
          extractComments: false
        })
      ]
    }
  },
  ...
  }

方法三：vue.config.js里添加配置

  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.output = {
        comments: false,
      }
      args[0].extractComments = false
      args[0].terserOptions.compress.pure_funcs = ['console.log']
      return args
    })
  },