由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成JS和CSS的压缩和混淆,因此不需要引用额外的插件。
命令 webpack -p 表示调用 UglifyJS 来压缩代码。 还有很多 webpack 插件如 html-webpack-plugin 默认会使用 UglifyJS。
uglify-js 的发布版本仅支持 ES5。 如果你想压缩ES6+代码,请使用开发分支。
UglifyJS 可用的选项有:
解析解释
压缩 压缩
混乱混乱
美化 美化
minify 最小化//在插件中使用HtmlWebpackPlugin
CLI 命令行工具
sourcemap 编译后的代码到源代码的映射,用于网页调试
AST 抽象语法树
name名称,包括变量名、函数名、属性名
顶级 顶级范围
无法访问 无法访问的代码
选项 选项
STDIN标准输入webpack默认压缩webpack默认压缩,指的是在命令行直接输入
STDOUT 标准输出
STDERR 标准错误输出
副作用 函数副作用,即函数不仅返回还形成其他函数,比如改变全局变量
列出一个配置:
//使用插件html-webpack-plugin打包合并html //使用插件extract-text-webpack-plugin打包独立的css //使用UglifyJsPlugin压缩代码 var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var webpack = require("webpack"); module.exports = { entry: { bundle : './src/js/main.js' }, output: { filename: "[name]-[hash].js", path: __dirname + '/dist' }, module: { rules: [ { test: /.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, { test: /.(png|jpg|jpeg|gif)$/, use: 'url-loader?limit=8192' } ] }, resolve:{ extensions:['.js','.css','.json'] //用于配置程序可以自行补全哪些文件后缀 }, plugins:[ new HtmlWebpackPlugin({ title: 'hello webpack', template:'src/component/index.html', inject:'body', minify:{ //压缩HTML文件 removeComments:true, //移除HTML中的注释 collapseWhitespace:true //删除空白符与换行符 } }), new ExtractTextPlugin("[name].[hash].css"), new webpack.optimize.UglifyJsPlugin({ compress: { //压缩代码 dead_code: true, //移除没被引用的代码 warnings: false, //当删除没有用处的代码时,显示警告 loops: true //当do、while 、 for循环的判断条件可以确定是,对其进行优化 }, except: ['$super', '$', 'exports', 'require'] //混淆,并排除关键字 }) ] };
这里需要注意的是,压缩时需要排除一些关键字,不能混淆,比如$或者require。 如果混淆了,就会影响代码的正常运行。
列出压缩通常具有的一些属性:
dead_code -- 删除未引用的代码循环 -- 当 do 、 while 、 for 循环的判断条件可以确定时,对其进行优化。 warnings – 当删除没有好处的代码时显示警告
以上就是本文的全部内容。 希望对您的学习有所帮助,也希望您多多支持喊话教程。