在前端开发中，我们经常需要将一些静态页面打包成 html 文件，以便在不依赖服务器的情况下查看。而 npm 包 build-html 就是一款非常有用的工具，它可以将多个 html 文件打包成一个 html 文件，同时还支持压缩、添加注释等功能。本篇文章将介绍如何使用该工具进行开发。
安装 build-html
在使用该工具之前，我们需要先安装它。可以通过以下命令进行安装：
npm install build-html --save-dev
使用 build-html
配置
在使用 build-html 之前，我们需要先配置一些参数。在项目的根目录下新建一个 buildHtml.config.js 文件，内容如下：
module.exports = {
inputDir: './src',
outputDir: './build',
filename: 'index.html',
minify: true,
showFilenameComment: true,
showTimeComment: true,
}其中，inputDir 表示源文件的目录，outputDir 表示输出文件的目录，filename 表示输出文件的名称，minify 表示是否压缩输出文件，showFilenameComment 表示是否在输出文件中显示文件名的注释，showTimeComment 表示是否在输出文件中显示打包时间的注释。
执行打包
在完成配置之后，我们可以使用以下命令执行打包：
build-html
打包完成后，会在输出目录下生成一个 index.html 文件，如果配置了 showFilenameComment 和 showTimeComment，则输出文件中会带有对应的注释。
示例代码
在本示例代码中，我们将以一个静态页面为例，演示如何使用 build-html 进行打包。
文件结构
文件结构如下：
-- -------------------- ---- -------
--- -------------------
--- ---
--- ----------
--- ---
--- --- -------------
--- --- ---------
--- ------
--- --- ----------
--- --- --------------
--- ----------
--- --
--- -------HTML 文件
我们在 src 目录下新建三个 HTML 文件：index.html、about.html、404.html。index.html 文件作为入口文件，包含了一些公共的模板和布局。
-- -------------------- ---- -------
--------- -----
----- -------------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
-----------------
----- ---------------- ---------------------------
----- ---------------- -----------------------
-------
------
--------
-----
-- --------------------------
-- ----------------------------
------
---------
------
-----------------
-----------------------
---- ------------------------- ---------
---- ----------------------------- ---------
------- ----------------------------
-------
--------
- ---- ------
---------
-------
-------about.html 文件作为一个独立的页面，包含关于我们的信息和图片。
-- -------------------- ---- -------
--------- -----
----- -------------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
-------------------
----- ---------------- ---------------------------
----- ---------------- -----------------------
-------
------
--------
-----
-- --------------------------
-- ----------------------------
------
---------
------
-------------
-----------------------------
---- ----------------------------- ---------
-------
--------
- ---- ------
---------
-------
-------404.html 文件作为一个出错页面，显示错误信息和链接。
-- -------------------- ---- -------
--------- -----
----- -------------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------------
----- ---------------- ---------------------------
----- ---------------- -----------------------
-------
------
--------
-----
-- --------------------------
-- ----------------------------
------
---------
------
-------------
-----------------
-------- ---------------------------------
-------
--------
- ---- ------
---------
-------
-------配置文件
在根目录下新建 buildHtml.config.js 文件，并添加以下代码：
module.exports = {
inputDir: './src',
outputDir: './build',
filename: 'index.html',
minify: true,
showFilenameComment: true,
showTimeComment: true,
}执行打包
在终端中执行以下命令进行打包：
build-html
打包成功后，在 build 目录下会生成一个 index.html 文件，查看其源代码，可以看到文件中包含了 about.html、404.html 的内容。同时还包含了压缩代码和打包时间的注释。
总结
使用 build-html 可以使我们快速地打包静态 HTML 文件，并且支持压缩、添加注释等功能。这在前端开发中非常实用。在学习了本篇文章后，相信你已经掌握了如何使用该工具进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8dccdc64669dde54bb