赞
踩
1、安装 “uglifyjs-webpack-plugin”
cnpm i --save uglifyjs-webpack-plugin
没有安装cnpm的同学可以用npm
2、在项目根目录下创建一个名为 vue.config.js的文件
3、在vue.config.js中引入uglifyjs-webpack-plugin
const UglifyPlugin = require('uglifyjs-webpack-plugin')
4、在vue.config.js中配置uglifyjs-webpack-plugin
- module.exports = {
- configureWebpack: (config) => {
- if (process.env.NODE_ENV == 'production') {
- // 为生产环境修改配置
- config.mode = 'production'
- // 将每个依赖包打包成单独的js文件
- let optimization = {
- minimizer: [new UglifyPlugin({
- uglifyOptions: {
- warnings: false,
- compress: {
- drop_console: true,
- drop_debugger: false,
- pure_funcs: ['console.log']
- }
- }
- })]
- }
- Object.assign(config, {
- optimization
- })
- } else {
- // 为开发环境修改配置
- config.mode = 'development'
- }
- }
- };
这就可以了,接下来大家可以打包试试了
cnpm run build
如果报错的话,估计是uglifyjs-webpack-plugin版本又更新了,可能需要修改配置中的 “minimizer”节点,官方文档地址:uglifyjs-webpack-plugin - npm
如有错误,欢迎指出!
打包后的代码段:app.js
- new UglifyJsPlugin({
- uglifyOptions: {
- compress: {
- warnings: false,
- //drop_console 传递true以放弃对控制台的调用。*功能
- drop_console: true,
- // pure_funces 禁用console.log函数
- pure_funcs: ['console.log']
- },
- },
- sourceMap: config.build.productionSourceMap,
- parallel: true
- }),
如何安装node.js就不再介绍了, 百度一下一大把.安装uglifyjs如下:
npm install uglify-js -g
打开一个用于存放JS文件的文件夹,进入到cmd
此时输入命令对app.8d991fddffba99b1a623.js文件进行压缩并输出文件名为app.8d991fddffba99b1a623.min.js的文件: m是浑浊 o是压缩
uglifyjs app.8d991fddffba99b1a623.js -o app.8d991fddffba99b1a623.min.js 也可以运行如下代码, 测试一下-m参数:
uglifyjs app.8d991fddffba99b1a623.js -m -o app.8d991fddffba99b1a623.min.js
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。