vue-cli3打包压缩、混淆、去注释

目录

• 1. 描述
• 2. uglifyjs-webpack-plugin
• 2.1 github
• 2.2 安装
• 2.3 配置
• 3. terser-webpack-plugin
• 2.1 github
• 2.2 安装
• 2.3 配置

1. 描述

使用vue-cli编写的插件或库文件，打包的时候若是须要压缩、混淆、去注释，去除debugger、console.log等，可使用 uglifyjs-webpack-plugin 或者 terser-webpack-plugin，前者不支持es6，打包时可能会报Unexpected token的错误，后者是前者对es6的支持版本。

2. uglifyjs-webpack-plugin

2.1 github

• https://github.com/webpack-contrib/uglifyjs-webpack-plugin

2.2 安装

npm install uglifyjs-webpack-plugin --save-dev

2.3 配置

在vue.config.js中配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// module.exports 中配置，可加参数，详见github文档或百度
configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(new UglifyJsPlugin())
  }
}

3. terser-webpack-plugin

2.1 github

• https://github.com/webpack-contrib/terser-webpack-plugin

2.2 安装

npm install terser-webpack-plugin --save-dev

2.3 配置

在vue.config.js中配置

const TerserPlugin = require('terser-webpack-plugin')

// module.exports 中配置，可加参数，详见github文档或百度
configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(new TerserPlugin())
  }
}