简介
html-static-before-plugin 是一个 webpack 插件，用来在打包时对 HTML 文件进行预处理，在 HTML 文件中插入指定的静态资源标签。这样可以方便地将静态资源文件引入到 HTML 文件中，无需手动编写 HTML 代码。
安装
npm install html-static-before-plugin --save-dev
使用方法
1. 创建配置文件
在项目根目录下创建一个名为 webpack.html.config.js 的文件，并在其中编写 webpack 配置。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---------------------- - -------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- ----------------------
--------- -------------
------- ------
---
--- ------------------------
--- -
- ----- ----------------- --
- ----- ------------------ ------ ---- --
--
---- -- ----- ---------------------- ---
---
--
-- ---
-其中，HtmlWebpackPlugin 是常规的 HTML 压缩插件，HtmlStaticBeforePlugin 是本文介绍的静态资源插入插件。
2. 在 HTML 中插入标签
插入标签的方式有两种：一种是通过参数 insert 和 position 进行配置，另一种是在 HTML 文件中手动插入标签。
根据参数插入标签
在 webpack 的配置文件中，将 inject 参数设置为 false，表示禁用自动插入标签。然后在 html-webpack-plugin 的配置中，可以通过 HtmlStaticBeforePlugin 的参数 insert 和 position 对标签进行插入。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---------------------- - -------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- ----------------------
--------- -------------
------- ------
-- --------------
------- -
----- -
- ---- ------- ----------- - ---- ------------- ----- ---------------------- - --
--
----- -
- ---- --------- ----------- - ---- ----------------- - --
- ---- --------- ----------- - ---- ----------------- -- ------ ---- --
--
--
--------- -
----- -------------
----- ------------
--
---
--- -------------------------
--
-- ---
-其中，insert 是将要插入的标签，position 是插入的位置，有以下几个值：
"afterbegin"：插入标签在父元素的起始标签之后，但在任何子元素之前插入。"beforeend"：插入标签在父元素的结束标签之前，但在任何子元素之后插入。
手动插入标签
在 HTML 页面中，可以手动插入标签。例如，在 public/index.html 中，我们可以像下面这样插入标签。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ----------- ----- --------------- ---------------------------- ----------------- ---- ------ --- ------- ------ ---- ---------------- ---- ------ --- ------- -------
在 <!-- 插入静态资源 --> 处插入静态资源标签即可。
3. 打包查看
运行 npm run build 进行打包，然后查看生成的 build/index.html 文件中是否已经插入了静态资源标签。
示例代码
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---------------------- - -------------------------------------
-------------- - -
------ -----------------
------- -
--------- --------------------------
----- ----------------------- ---------
------ -----
--
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------
--
-
----- ----------
---- ---------------- --------------
--
--
--
-------- -
--- -------------------
--------- ----------------------
--------- -------------
------- ------
-- --------------
------- -
----- -
- ---- ------- ----------- - ---- ------------- ----- ---------------------- - --
--
----- -
- ---- --------- ----------- - ---- ----------------- - --
- ---- --------- ----------- - ---- ----------------- -- ------ ---- --
--
--
--------- -
----- -------------
----- ------------
--
---
--- ------------------------
--- -
- ----- ----------------- --
- ----- ------------------ ------ ---- --
--
---- -- ----- ---------------------- ---
---
--
---- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ----------- ----- --------------- ---------------------------- ----------------- ---- ------ --- ------- ------ ---- ---------------- ---- ------ --- ------- -------------------------------------------- ------- -------
总结
HtmlStaticBeforePlugin 是一个便于前端开发的 webpack 插件，可以自动将静态资源标签插入 HTML 文件中，避免了手动编写复杂的 HTML 代码。通过简单的配置和操作，可以快速将插件集成到项目中，提高开发效率，降低出错率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/html-static-before-the-plugin