本文介绍如何利用 Webpack 内置的 UglifyJsPlugin 对 JavaScript 和 CSS 进行压缩与混淆。通过 webpack -p 命令或插件配置，可实现代码最小化。文中列举了 parse、compress 等关键选项，并提供了排除关键字（如 $、require）及优化死代码、循环的配置示例，帮助开发者优化构建产物。
Webpack 打包压缩 JS 与 CSS
Webpack 打包压缩 JS 与 CSS
Webpack 本身已集成 UglifyJS 插件（即 webpack.optimize.UglifyJsPlugin），用于实现 JavaScript 和 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：函数副作用，即函数除返回值外还产生其他影响，例如修改全局变量。
以下是一份具体的配置示例：
UglifyJS 配置示例
//使用插件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：用于移除未被引用的代码。
- loops：当 do、while、for 循环的判断条件确定时，对其进行优化。
- warnings：当删除无用代码时，显示相关警告信息。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。