webpack5 打包时压缩资源模块css

steven026

原理

通常开发需求下，webpack5一般直接通过CssMinimizerWebpackPlugin、MiniCssExtractPlugin插件对css文件进行抽离、压缩（最小化）、打包，但这2个插件均无法对资源模块css进行压缩，故需要在文件预处理阶段使用loader处理资源模块css。

而最新版本常用的2个css loader：style-loader、css-loader均无压缩功能，因此需要使用postcss-loader及额外第三方插件对资源模块css进行压缩。（这里选用CssMinimizerWebpackPlugin所依赖的插件cssnano）

方法

1.安装loader依赖

npm i -D cssnano postcss postcss-loader

2.设置webpack.config.js

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                [
                  'cssnano',
                  {}, //插件额外可选配置
                ],
              ],
            },
          },
        },
      ],
    },
  ],
},

完结撒花

辣鸡webpack 毁我青春

参考

https://www.webpackjs.com/loaders/postcss-loader/
https://github.com/webpack-contrib/css-loader/releases/tag/v1.0.0
（https://zhuanlan.zhihu.com/p/92468484
https://blog.csdn.net/u012436704/article/details/101384180）

王一之

可以参考这个用法，输出各个包的占用大小：https://github.com/scriptscat/sc ... webpack.prod.ts#L29

参考这个用法分割：https://github.com/scriptscat/sc ... pack.config.ts#L161

但是分割可能会导致其它问题