Webpack 如何处理 Html 文件打包
前言：
Webpack 是一个优秀的模块化打包工具，可以对 JavaScript、CSS 等各种资源进行打包处理，但是对于 Html 的处理还需要额外的插件才能实现。本文将详细介绍使用 Webpack 处理 Html 的方式，并带有示例代码，希望能帮助前端开发者更好地理解和使用。
一、安装依赖
使用 Webpack 处理 Html 需要安装额外的插件，包括 html-webpack-plugin 和 html-loader 两个插件。其中，html-webpack-plugin 用于生成 Html 文件，并自动引入打包后的资源文件；html-loader 用于解析 Html 文件中的图片、字体等资源文件。
可以使用 npm 安装这两个插件：
--- ------- ------------------- ----------- ----------
二、配置 HtmlWebpackPlugin 插件
- 配置 HtmlWebpackPlugin 插件
在 webpack.config.js 文件中，首先需要引入 HtmlWebpackPlugin 插件：
----- ----------------- - -------------------------------
然后在 plugins 中配置：
-------- -
--- -------------------
--------- ------------------
--
-其中，template 表示需要处理的 Html 文件路径。这里以初始的 index.html 文件作为模板，后续会自动生成到 dist 目录下。
- 配置 HtmlWebpackPlugin 插件选项
HtmlWebpackPlugin 接受一些可配置的选项，例如：
| 选项 | 默认值 | 描述 |
|---|---|---|
| filename | 'index.html' | 输出文件名 |
| title | 'Webpack App' | 生成的 Html 文件的标题 |
| hash | false | 是否为打包生成的 js、css 文件添加 hash 值 |
| minify | false | 是否压缩生成的 Html 文件 |
| templateParameters | {} | 在生成的 Html 文件中注入指定的变量 |
| chunks | 'all' | 指定的需要插入的 chunk，可以是字符串、数组或者函数，默认插入全部 |
示例代码：
-------- -
--- -------------------
--------- ------------- -- --------
--------- ------------------- -- ------
------ -------- ----- -- --- ---- ---
----- ----- -- ----- ----
------- - -- ----
------------------- -----
--------------- -----
---------------------- ----
--
------------------- - -- - ---- --------
--------- ----------
--
------- ------- -- --- --- -----
--
-三、配置 html-loader 解析器
- 解析 img 标签的 src 属性
在 Html 文件中，img 标签中的 src 属性指向的是一张图片路径，这个路径需要 webpack 进行打包。这时候，我们需要使用 html-loader 解析器对 img 标签中的 src 属性进行处理，使得 webpack 可以将这个资源进行处理。
在模块的 rules 中配置：
------- -
------ -
-
----- ------------
---- -
------- --------------
-------- -
----------- - -- -- --- --- --- --
----- -
-
---- ------
---------- ------
----- -----
-
-
-
-
-
-
-
-这个配置告诉 webpack，当遇到 .html 后缀的文件时，使用 html-loader 进行处理。并且使用 options 配置来解析 img 标签中的 src 属性，将 src 属性变为 webpack 处理过的资源文件路径。
- 解析 link 和 script 标签的 href 和 src 属性
类似于 img 标签，link 和 script 标签也包含 href 和 src 属性，这些属性也需要使用 html-loader 进行处理。这时候，我们需要使用下面的规则：
------- -
------ -
-
----- ------------
---- -
-
------- --------------
-------- -
----------- - -- -- --- --- --- --
----- -
-
---- ------
---------- ------
----- -----
-
-
-
-
--
-
------- --------------
-------- -
----------- - -- -- ---- - ------ --- ---- - --- --
----- -
-
---- -------
---------- -------
----- -----
--
-
---- ---------
---------- ------
----- -----
-
-
-
-
-
-
-
-
-这里使用了两个 html-loader，第一个用于处理 img 标签的 src 属性，第二个用于处理 link 和 script 标签的 href 和 src 属性。
四、打包、运行和效果展示
经过以上的配置，即可使用 webpack 对 Html 文件进行打包。在 package.json 中配置打包命令：
-
---------- -
-------- -------- ------ -----------
-
-执行打包命令：
--- --- -----
即可在 dist 目录下生成处理后的 Html 文件。
示例代码：
--------- -----
----- ----------
------
----- ----------------
---------- ------------------------------- ----------
----- ---------------- ------------------
-------
------
---------- -------------
-----
---- ----------------------- -------
------
------- ----------------------
-------
-------以上就是这篇文章的总结，通过学习上述技术点可以快速的了解和使用我们需要的 HtmlWebpackPlugin 插件与 HTML-loader 处理器，极大的提升了前端开发工作的效率和灵活性。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6651e4a8d3423812e463abfc