耐心往下看：

 

一、前言：

1. vue-cli2 在 build 文件下面的webpack.prod.conf.js中配置;

2. vue-cli3 在项目目录下的vue.config.js文件里面配置，本文只讲vue-cli3(vue-cli4同理设置）。

二、安装。

安装插件 uglifyjs-webpack-plugin 

yarn add -D uglifyjs-webpack-plugin  或  npm install uglifyjs-webpack-plugin

至于为什么要加 -D,请看下面两篇文章的解释。

https://blog.csdn.net/wangguoyu1996/article/details/80443861

https://www.cnblogs.com/hukuangjie/p/11369179.html

三、在 vue.config.js 文件中进行配置

1. 在文件头部引入

//打包配置自动忽略console.log等
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

2. 配置这段代码

//打包环境去掉console.log等
new UglifyJsPlugin({
  uglifyOptions: {
     compress: {
       warnings: false,
       drop_console: true,  //注释console
       drop_debugger: true, //注释debugger
       pure_funcs: ['console.log'], //移除console.log
     },
   },
}),

为了避免不明确，复制完整代码段：

//打包配置自动忽略console.log等
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
	publicPath: './',
	devServer: {
		......
	},
	css:{
		......
	},
	// eslint-disable-next-line no-unused-vars
	configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          //打包环境去掉console.log
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                warnings: false,
                drop_console: true,  //注释console
                drop_debugger: true, //注释debugger
                pure_funcs: ['console.log'], //移除console.log
              },
            },
          }),
        ],
      }
    }

  }
}

问题得到解决。

 

但是，就在写完这篇文章之后，我在打包的时候就发现报错了.....

然后查阅资料发现，是因为最新版的 uglifyjs-webpack-plugin 插件已经不支持es6语法，github官方有说明： https://github.com/webpack-contrib/uglifyjs-webpack-plugin/blob/master/CHANGELOG.md#200-2018-09-14

里边说到 使用  terser-webpack-plugin  这个插件，暂时先放过，底下我会放出这个配置的文章地址。

那么回到上题，这个问题没法解决了了吗？

当然是可以的，将  uglifyjs-webpack-plugin 的版本降低到 V 1.1.1版本就可以正常使用了。

 yarn add -D uglifyjs-webpack-plugin@1.1.1

 

然后这个时候我又有了新的疑问，这怎么感觉哪里有点问题，哦，我的脚手架里的 babel 不是自动 es6 转es5 的吗？

我就不死心的再次尝试了一下，发现只要把里边的移除警告去掉，他就好使了.......

// warnings: false,  //移除警告
 drop_console: true,  //注释console
 drop_debugger: true, //注释debugger
 pure_funcs: ['console.log'], //移除console.log

我将这里的移除警告注释掉了，再次打包，好使了....

太难了，暂时不知道什么原因，大家如有解决办法，可以给个解答，如果没有，就暂时这么用吧。

 

terser-webpack-plugin 打包

链接地址： https://blog.csdn.net/sinat_32017511/article/details/115936167