首先,你需要安装 css-minimizer-webpack-plugin:
npm install mini-css-extract-plugin --save-dev
npm install css-minimizer-webpack-plugin --save-dev
接着在 webpack.config.js配置中加入该插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
optimization: {
minimizer: [
// 在 webpack@5 中,你可以使用 `...` 语法来扩展现有的 minimizer(即 `terser-webpack-plugin`),将下一行取消注释
// `...`,
new CssMinimizerPlugin(),
],
},
plugins: [new MiniCssExtractPlugin()],
};
只能在生产环境开启 CSS 优化
如果还想在开发环境下启用 CSS 优化
module.exports = {
optimization: {
// [...]
minimize: true,
},
};
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)