在前端开发中，使用 webpack 打包工具进行代码的打包和构建是非常常见的。而对于一些需要生成 HTML 文件的项目来说，则需要借助一些插件来实现。其中一个常用的插件就是 html-renderer-webpack-plugin。
简介
html-renderer-webpack-plugin 可以在 webpack 打包时，根据配置信息生成 HTML 文件，并在 HTML 文件中引入打包后的 JS 和 CSS 文件。
该插件是在 html-webpack-plugin 的基础之上进行升级，提供了更加灵活的配置和功能。
安装
首先，需要在项目中安装 html-renderer-webpack-plugin：
npm install html-renderer-webpack-plugin --save-dev
配置
在 webpack 的配置文件中，需要添加相应的插件配置：
-- -------------------- ---- -------
----- ------------------------- - ----------------------------------------
-------------- - -
-- --- ------
-------- -
--- -----------------------------------
-- --- ----
-
-其中，options 是一个配置对象，可以设置生成 HTML 文件的相关参数，如下：
-- -------------------- ---- -------
----- ------- - -
--------- ------------------- -- -- ---- ------
--------- ------------- -- ----- ---- ---
------ --- ----- -- -- ---- ----
----- - -- -- ---- ---- ---- --
--------- -------------------- -----------------
--
----- - -- - ---- ------
---- ---------------------
--
------- ----- -- ---- ---- --
------- ------- -- -- - --- -----
------- --------- -- ------- -- --
---------- - -- ------------
------- ---------
--
--其中，template、filename、title、meta、inject 和 minify 这些参数的含义和使用方法基本与 html-webpack-plugin 的一致，这里不再赘述。
除此之外，html-renderer-webpack-plugin 还提供了一些自定义的功能：
传递变量
通过 vars 参数可以向 HTML 文件传递变量。该参数值为一个对象，其中每个属性的 key 为变量名，value 为变量值。
例如：
const options = {
// ... 省略其他配置
vars: {
name: 'Tom',
age: 18,
},
};在模板文件中可以使用模板引擎（如 EJS）来渲染这些变量：
<html>
<body>
<p>My name is <%= name %>, I am <%= age %> years old.</p>
</body>
</html>最终生成的 HTML 文件为：
<html>
<body>
<p>My name is Tom, I am 18 years old.</p>
</body>
</html>指定不需要打包的外部依赖
通过 externals 参数可以指定不需要打包的外部依赖，这些依赖会被打包后以 script 标签的形式引入。
例如：
const options = {
// ... 省略其他配置
externals: {
jquery: 'jQuery',
},
};在模板文件中可以直接使用这些依赖：
<html>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>引入自定义的 JS 和 CSS 文件
通过 chunks 参数可以指定需要引入的 JS 文件，通过 addStyle 和 addScript 参数可以引入自定义的 CSS 和 JS 文件。
例如：
const options = {
// ... 省略其他配置
chunks: ['main'],
addStyle: ['./src/index.css'], // 引入自定义的 CSS 文件
addScript: ['./src/plugins/cookie.js'], // 引入自定义的 JS 文件
};在模板文件中可以使用 link 和 script 标签来引入这些文件：
-- -------------------- ---- -------
------
------
----- ---------------- -----------------
-------
------
-- ---
------- -------------------------
-------
-------注意：addStyle 和 addScript 的值为数组，可以指定多个文件。
示例代码
以下是一个示例配置文件：
-- -------------------- ---- -------
----- ------------------------- - ----------------------------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- ---------------------------
--------- -------------------
--------- -------------
------ --- -----
----- -
--------- -------------------- -----------------
--
----- -
---- ---------------------
----- ------
---- ---
--
------- -----
------- -------
------- ---------
---------- -
------- ---------
--
--------- --------------------
---------- ----------------------------
---
--
--其中，模板文件 index.html 如下：
-- -------------------- ---- -------
------
------
---------- ----- ----------
----- ----------------
-- --- ---- --- -- ----- - --
----- --------- --- --- ------------ --------- ----
-- - --
----- ---------------- ----------------------------------------------------------------------------
----- ---------------- -----------------
-------
------
----- ---- -- --- ---- --- - -- --- --- -- ----- --------
------- -------------- -----------
------- -------------------------
------- ----------------------------------------------------------------------------
------- -------------------------
--------
------------------------ -- -
------------- ---------
--
---------
-------
-------最终生成的 HTML 文件如下：
-- -------------------- ---- -------
------
------
--------- -----------
----- ----------------
----- --------------- ---------------------------- -----------------
----- ---------------- ----------------------------------------------------------------------------
----- ---------------- -----------------
-------
------
----- ---- -- ---- - -- -- ----- --------
------- -------------- -----------
------- -------------------------
------- ----------------------------------------------------------------------------
------- -------------------------
--------
------------------------ -- -
------------- ---------
--
---------
-------
-------总结
html-renderer-webpack-plugin 的使用方法和 html-webpack-plugin 类似，但是提供了更加灵活的配置和功能，能够满足一些复杂的需求。
在实际项目中，可以根据具体的需求进行配置，快速生成符合要求的 HTML 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/101469