论坛 › 其它 › webpack5 打包时压缩资源模块css

steven026 发表于 2023-7-6 13:21:01

webpack5 打包时压缩资源模块css

# 原理
通常开发需求下，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
```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）

王一之 发表于 2023-7-6 14:45:47

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

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

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

查看完整版本: webpack5 打包时压缩资源模块css