webpack5 css打包压缩

webpack5 css打包压缩,第1张

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1297860.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存