webpack打包压缩js和css的⽅法⽰例
打包压缩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");
entry: {
bundle : './src/js/main.js'
},
output: {
filename: "[name]-[hash].js",
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.css$/,
sort函数 js
use: act({
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，如果混淆的话就会影响到代码的正常运⾏。
列⼏个压缩时常有的属性：
1. dead_code -- 移除没被引⽤的代码
2. loops -- 当 do 、 while 、 for 循环的判断条件可以确定是，对其进⾏优化。
3. warnings -- 当删除没有⽤处的代码时，显⽰警告
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。