VUE项目使用WebPack打包删除注释和console、debugger插件集成

简介

使用的组件是【uglifyjs-webpack-plugin】。

第一步

在package.json中增加依赖。

"devDependencies": {
 	 "uglifyjs-webpack-plugin": "^1.3.0"
}

增加依赖后，需要npm安装一下

cnpm install -all

第二步

在vue.config.js中增加代码。
（1）先引入插件。

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");    //引入插件

（2）修改打包代码

configureWebpack: {
   optimization: {
      minimizer: [
         new UglifyJsPlugin({
            uglifyOptions: {
               // 删除注释
               output: {
                  comments: false
               },
               // 删除console debugger 删除警告
               compress: {
                  warnings: false,
                  drop_console: true,//console
                  drop_debugger: false,
                  pure_funcs: ["console.log"]//移除console
               }
            }
         })
      ]
   },
   resolve: {
      alias: {
         '@': resolve('src')
      }
   },
   externals: {
      'echarts': 'echarts', // 配置使用CDN
      'AMap': 'AMap',
      'AMapUI': 'AMapUI'
   }
}