本篇文章参考以下博文
文章目录
前言
针对现在常用的 webpack 压缩方法进行一下总结，方便自己后续使用和查看。
JavaScript压缩
terser-webpack-plugin
这个方法是 webpack4 官方推荐的方法。采用多进程的方式进行压缩。
npm install terser-webpack-plugin --save-dev
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: 5,
warnings: false,
parse: {
},
compress: {
},
mangle: true,
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_fnames: false,
safari10: true
}
})
]
}
CSS 压缩
Optimize css Assets webpack Plugin
这部分压缩首先需要把 css 抽离出单独文件，需要用到 mini-css-extract-plugin 插件，去掉 style-loader ，具体配置如下：
//loader配置
{
test: /\.css$/,
use:[
MiniCssExtractPlugin.loader,//loader取代style.loader,作用，提取js中的css文件
'css-loader',
{
loader:'postcss-loader',
options: {
publicPath: '../',
},
}
],
}
//插件配置
new MiniCssExtractPlugin({
filename: 'src/main.css', //输出的文件名字
}),
对于css文件，必须要做的兼容处理，这里用到的是 postcss postcss-loader postcss-preset-env
npm postcss postcss-loader postcss-preset-env
webpack.config.js 配置如下：
{
test: /\.css$/,
use:[
MiniCssExtractPlugin.loader,//loader取代style.loader,作用，提取js中的css文件
'css-loader',
//帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
{
loader:'postcss-loader',
options:{
postcssOptions: {
plugins: [
[ require('postcss-preset-env')() ],
]
}
}
}
],
}
package.json 配置如下：
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"nop op_mini all"
]
}
最后添加 css 压缩插件。
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
//...
plugins: [
new MiniCssExtractPlugin({
filename: 'src/main.css', //输出的文件名字
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: {
safe: true, discardComments: {
removeAll: true } },
canPrint: true
})
]
};
图片压缩
image webpack loader
首先需要两个加载器插件：这两个插件作用是把 css 中的图片提取到指定目录。
npm install url-loader --save-dev
npm install file-loader --save-dev
module:{
rules:[
{
test:/\.(png|jpg|jpeg|gif)$/,
use:[
{
loader:'url-loader',
options:{
name:'[name][hash:5].[ext]',//设置抽离打包图片的名称--[ext]用来获取图片的后缀
limit:100000,//限制图片大小 <= 100kb 进行base64编码（小于100kb打包进js文件）
outputPath:'image'//设置输出文件夹名称，这个文件夹会与主入口文件在同一路径下
}
}
]
}
]
}
然后对抽离的图片进行压缩。
npm install image-webpack-loader --save-dev
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use:[
{
loader: 'url-loader',
options:{
name:'[name][hash:5].[ext]',//设置抽离打包图片的名称--[ext]用来获取图片的后缀
limit:100000,//限制图片大小 <= 100kb 进行base64编码（小于100kb打包进js文件）
outputPath:'image'//设置输出文件夹名称，这个文件夹会与主入口文件在同一路径下
},
{
loader: 'image-webpack-loader',// 压缩图片
options: {
bypassOnDebug: true,
}
}
]
}