打包压缩 js 与 CSS
由于 webpack 本身集成了 UglifyJS 插件 (webpack.optimize.UglifyJsPlugin) 来完成对 JS 与 CSS 的压缩混淆, 无需引用额外的插件,
其命令 webpack -p 即表示调用 UglifyJS 来压缩代码, 还有不少 webpack 插件如 html-webpack-plugin 也会默认使用 UglifyJS
uglify-js 的发行版本只支持 ES5, 如果你要压缩 ES6 + 代码请使用兼容开发分支
UglifyJS 可用的选项有:
parse 解释
compress 压缩
mangle 混淆
beautify 美化
minify 最小化 // 在插件 HtmlWebpackPlugin 中使用
CLI 命令行工具
sourcemap 编译后代码对源码的映射, 用于网页调试
AST 抽象语法树
name 名字, 包括变量名函数名属性名
toplevel 顶层作用域
unreachable 不可达代码
option 选项
STDIN 标准输入, 指在命令行中直接输入
STDOUT 标准输出
STDERR 标准错误输出
side effects 函数副作用, 即函数除了返回外还产生别的作用, 比如改了全局变量
列一份配置:
- // 使用插件 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 // 当 dowhile for 循环的判断条件可以确定是, 对其进行优化
- },
- except: ['$super', '$', 'exports', 'require'] // 混淆, 并排除关键字
- })
- ]
- };
这里需要注意的是压缩的时候需要排除一些关键字, 不能混淆, 比如 $ 或者 require, 如果混淆的话就会影响到代码的正常运行
列几个压缩时常有的属性:
dead_code -- 移除没被引用的代码
loops -- 当 dowhile for 循环的判断条件可以确定是, 对其进行优化
warnings -- 当删除没有用处的代码时, 显示警告
来源: https://www.cnblogs.com/chaixiaozhi/p/8604719.html