【Webpack4】CSS 配置之 postcss-loader

Posted 2023-03-09

参考技术A

postcss-loader 应该是 Webpack 配置中不可或缺的一个 CSS loader。它负责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS 等。

配置 postcss-loader 时，可以在 webpack.config.js 中配置具体选项，也可以新建一个 postcss.config.js ，专门定义 postcss-loader 的配置。

这篇文档基于依赖包版本：

推荐使用文件 postcss.config.js 的方式:

env 取值 process.env.NODE_ENV ，可用来判断是开发模式还是生产模式。

当然也可以在 webpack.config.js 中，只是写起来有点冗余，尤其是需要在多个规则中用到 postcss-loader 时：

压缩 CSS 其他方法可以参考 Webpack 文档中 这一段 。

用 style-loader 时：

用 MiniCssExtractPlugin 时， 注意 sourcemap 得配置成“ inline ”，不然调试时仍旧无法定位到 .less 源码，只能定位到编译后的 CSS 文件。