抽离与压缩css
mini-css-extract-plugin
引入:let MiniCssExtractPlugin = require('mini-css-extract-plugin') 注意:loader的执行顺序是从后往前
使用步骤
1、使用MiniCssExtractPlugin.loader 替换 ‘style-loader’【处理css的第一个loader】
js
modules: {
relus: [
{
test: 'css',
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] // 第一个不再使用‘style-loader’
}
]
}
2、使用MiniCssExtractPlugin去抽离css【并且设置好filename的文件名哈希】
js
plugins: [
new MiniCssExtractPlugin({
filename: 'css/main.[contenthash:8].css'
})
]
3、在optimization中的minimizer中配置插件OptimizeCssAssetsPlugin来压缩css
js
optimization: {
minimizer: [new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessorOptions: {
safe: true,
autoprefixer: { disable: true }, // 这里是个大坑,稍后会提到
mergeLonghand: false,
discardComments: {
removeAll: true // 移除注释
}
},
canPrint: true
}),
// 当mode为production时会默认压缩混淆js代码,但是可以使用terser-webpack-plugin更优化
// new TerserJSPlugin({
// cache: true, // 是否缓存
// paraller: true, // 是否并行打包
// sourceMap: true
// })
],
}