在前端开发中，我们常常需要将多个 JS 或 CSS 文件打包成一个文件，以减小页面加载时的请求数量和文件大小，提高网页加载速度。其中，常用的工具是 webpack 和 gulp。
但是，如果在某些情况下只是需要简单的将多个 HTML、CSS、JS 文件合并成一个 HTML 文件，并且不需要过多的配置，那么使用 npm 包 bundle-html-scripts 可能是一个更好的选择。
安装
// 使用 npm npm install bundle-html-scripts --save-dev // 使用 yarn yarn add bundle-html-scripts --dev
使用方法
- 在项目的根目录下创建一个 config.js 文件，并设置相应的配置项，示例如下：
module.exports = {
path: 'src/html', // HTML 文件所在目录
out: 'dist/html', // 打包后 HTML 文件所在目录
entry: 'index', // 打包入口 HTML 文件名，不包括拓展名
css: ['index.css'], // 需要合并的 CSS 文件名列表
js: ['index.js'], // 需要合并的 JS 文件名列表
ignore: ['ignore.html'] // 忽略的 HTML 文件名列表
}- 在 package.json 中添加脚本：
"scripts": {
"bundle-html": "bundle-html"
},- 运行 npm run bundle-html，即可开始打包。打包完成后，可以在 out 配置项指定的目录下找到输出的 HTML 文件。该文件会自动引入 CSS 和 JS 文件，并且这些文件都已经被合并和压缩。
示例
以一个简单的 Todo List 程序为例，其中包含三个 HTML 文件、两个 CSS 文件和两个 JS 文件。为了测试打包后的文件是否能正常工作，我们在每个 HTML 文件中都引入了相应的 CSS 和 JS 文件。
项目文件结构如下：
-- -------------------- ---- -------
-
--- ---------
--- ------------
--- ---
--- ---
--- --- --------
--- --- ---------
--- ----
--- --- --------
--- --- ----------
--- --- ---------
--- --
--- ------
--- --------为了简化示例代码，CSS 和 JS 文件中都只包含了一个输出语句。同时，定义了一个简单的 CSS 类名 todo，并在 JS 文件中给按钮添加了点击事件。
config.js 配置如下：
module.exports = {
path: 'src/html',
out: 'dist/html',
entry: 'index',
css: ['base.css', 'index.css'],
js: ['add.js', 'index.js'],
ignore: []
}index.html 内容如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------- ------------ ----- ---------------- ----------------------- ----- ---------------- ------------------------ ------- ------ -------- --------- ------- ------------ --- ------------- --- --------------- ------- ------- ---------------------------- ------- ------------------------------ -------
index.js 内容如下：
-- -------------------- ---- ------- ------------------------ ----- --------- - ------------------------------- ----- ---- - -------------------------------- ----------------------------------- -------- -- - ----- -------- - ----------------------------- ------------------------------- -------------------- - ---- ------ --------------------------- ---
打包前的文件结构如下：
-- -------------------- ---- -------
-
--- ---------
--- ------------
--- ---
--- ---
--- --- --------
--- --- ---------
--- ----
--- --- --------
--- --- ----------
--- --- ---------
--- --
--- ------
--- --------打包后的文件结构如下：
. ├── config.js ├── dist │ └── html │ └── index.html └── package.json
打包后的 index.html 文件内容如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------- ------------ ----- ---------------- ----------------- ------- ------ -------- --------- ------- ------------ --- ------------- --- --------------- ------- ------- ------------------------- -------
同时，在 out 配置项所指定的目录下，也生成了一个 bundle.js 文件，其内容为 base.css、index.css、add.js 和 index.js 的合并和压缩后的结果。
打包后，我们只需要将 index.html 文件和 bundle.js 文件上传到服务器上，即可实现原来的功能。同时，我们成功地将多个文件合并成了一个文件，减小了请求次数和文件大小，提高了加载速度。
结语
使用 bundle-html-scripts 可以快速、简便地将多个 HTML、CSS、JS 文件合并成一个 HTML 文件。虽然配置项相较于 webpack 和 gulp 可能比较简单，但充分利用其提供的压缩和合并功能，能将文件大小和请求数量降到最低，从而提高页面的加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ec181e8991b448dc821