什么是 postcss-html-loader？
postcss-html-loader 是一个 webpack 的 loader，用于将 postcss 处理后的样式应用到 html 文件中。它可以自动将 css 样式嵌入 html 文件的 style 标签中，解决了样式文件与 html 文件独立管理的问题。同时，postcss-html-loader 可以通过配置 postcss 插件，对样式进行预处理、压缩等操作，增强开发体验和优化产出文件。
安装
在使用 postcss-html-loader 之前，需要先安装 postcss 和 postcss-loader。
npm install postcss postcss-loader --save-dev
然后，安装 postcss-html-loader。
npm install postcss-html-loader --save-dev
配置
在 webpack.config.js 中，添加以下代码片段：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
---- -
-
------- ----------------------
-------- -
-- ------- ---- --
-
-
-
-
-
-
-其中，test 属性指定要处理的文件类型，在本例中为 html 文件。postcss-html-loader 需要作为 use 数组中的一个 loader 使用。在 options 中可以对 postcss 插件进行配置，包括 autoprefixer、cssnano、postcss-preset-env 等。这些插件的详细使用方法可参考 postcss 官方文档。
示例
以使用 autoprefixer 插件为例，假设有以下 index.html 文件和 style.css 样式文件：
index.html
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------------------- ------------ ------- ------ ---------- ----------- ---- ---------------- -- - ---------- ------- -------
style.css
.box {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: lightblue;
}为了使用 autoprefixer 插件，我们需要在项目目录下新建 postcss.config.js 文件，并修改 webpack.config.js 中 postcss-html-loader 的配置：
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['last 2 versions', '>1%']
})
]
}webpack.config.js
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
---- -
-
------- ----------------------
-------- -
------ ----------
-------- -
--------------------------
----------------------------------
-------------------------------
------------- - ----- ---- - -- ------------------ ---- ------------ -------------
--
-
-
-
-
-
-
-
-这里我们新增了 postcss 插件 postcss-import 和 postcss-flexbugs-fixes，并且将 options 从一个空对象改为了包含 ident 和 plugins 两个属性的对象。其中，ident 属性指定了 postcss 的标识符，以防止不同的 loader 对 postcss 进行了重复处理。plugins 属性指定了要使用的 postcss 插件列表。
最后，在控制台执行 npm run build 命令，产出的 index.html 文件将会自动包含 style 标签，且样式已经被 autoprefixer 插件进行了处理。
结语
postcss-html-loader 是一个功能强大、易于配置的 webpack loader，可以有效地简化样式与 html 文件之间的维护工作，提高开发效率。在实际项目中，需灵活运用 postcss 插件，针对不同的开发场景对样式进行处理，以达到最佳优化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725481e8991b448e8673