webpack5 css打包压缩

首先，你需要安装 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,
  },
};