前言
在前端开发中，我们经常要使用 Webpack 进行打包，将多个模块打包成一个或多个文件。而在某些情况下，我们还需要将 CSS 文件打包到 HTML 文件中，以便于在没有服务器的情况下直接打开网页。在这种情况下，就需要使用到 html-webpack-import-css-plugin 这个 npm 包。
html-webpack-import-css-plugin 是一个 Webpack 插件，用于将 CSS 文件打包到 HTML 文件中。它会在 HTML 文件中自动添加 link 标签，引用打包后的 CSS 文件。这样，我们就不用手动编辑 HTML 文件了，大大提高了生产效率。
下面，我们将介绍如何使用 html-webpack-import-css-plugin 来将 CSS 文件打包到 HTML 文件中。
安装
要使用 html-webpack-import-css-plugin，首先需要安装它。在命令行中运行以下命令即可：
npm install html-webpack-import-css-plugin --save-dev
配置
安装完成后，需要在 Webpack 配置文件中进行相应的配置。在 module.exports 中添加 plugins 配置项，如下所示：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- -------------------------- - ------------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
-- ---
---
--- -----------------------------
--
--在这里，我们使用了另外一个 Webpack 插件 HtmlWebpackPlugin，用于生成 HTML 文件。在 plugins 中，我们先添加了 HtmlWebpackPlugin，再添加了 HtmlWebpackImportCssPlugin。
用法
配置完成后，我们就可以使用 html-webpack-import-css-plugin 来将 CSS 文件打包到 HTML 文件中了。在 HTML 文件中，我们可以使用类似以下的方式来引用 CSS 文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- -----------
-- --- ---- --- -- ----------------------------------- - --
----- --------- --------------------------------------- --- -----------------
-- - --
-------
------
----------- ------------
-------
-------在这里，我们使用了 HtmlWebpackPlugin 的一个特性 options.cssFiles，它可以在插件中获取到打包后的 CSS 文件路径。我们可以遍历这个对象，使用 link 标签引用 CSS 文件。
示例
下面我们来看一个完整的示例。假设我们有一个项目，目录结构如下所示：
-- -------------------- ---- ------- ------ -------------- ----- - ----- - - ----------- - ---------- ------------ ------------------- --------------
其中，index.html 是我们要打包的 HTML 文件，它引用了一个 CSS 文件 src/css/style.css。index.js 是我们要打包的 JS 文件。
我们的目标是将 CSS 文件打包到 HTML 文件中，生成一个新的 HTML 文件。
首先，我们需要配置 Webpack。在 webpack.config.js 文件中添加以下内容：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- -------------------------- - ------------------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- --------- - -------
--
-------- -
--- -------------------
--------- ---------------
--------- --------------
---
--- -----------------------------
--
--在这里，我们使用 mode: 'production' 将 Webpack 设置为生产模式。entry 和 output 表示入口和输出文件。plugins 中先添加了 HtmlWebpackPlugin，再添加了 HtmlWebpackImportCssPlugin。
然后，我们需要在 index.html 中引用打包后的 CSS 文件。在 index.html 中添加以下内容：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- -----------
-- --- ---- --- -- ----------------------------------- - --
----- --------- --------------------------------------- --- -----------------
-- - --
-------
------
----------- ------------
-------
-------在最后一步中，我们执行以下命令来打包项目：
npx webpack
打包完成后，我们可以在 dist 目录下找到生成的 HTML 文件。打开它，可以看到打包后的 CSS 文件已经被引用了。
结论
html-webpack-import-css-plugin 是一个非常实用的 Webpack 插件，可以将 CSS 文件打包到 HTML 文件中，提高生产效率。通过本文的介绍和示例，相信大家已经了解了如何使用 html-webpack-import-css-plugin，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8b238a385564ab6e40