在前端开发中，webpack 是一个非常流行的构建工具，它可以将多个文件打包成一个 bundle.js 文件，以达到优化网页性能的目的。然而，当我们需要生成多个 HTML 页面的时候，webpack 默认只会生成一个 index.html 文件，并且这个文件只会包含一个 script 标签引入该页面的 JavaScript 文件，在这种情况下，我们需要使用 html-webpack-plugin-for-multihtml 这个 npm 包来帮助我们更好地生成多个 HTML 页面。
安装
html-webpack-plugin-for-multihtml 可以通过 npm 进行安装，只需要在终端中输入以下命令即可：
npm install html-webpack-plugin-for-multihtml --save-dev
使用
简单使用
在 webpack 的配置文件中，我们需要先引入 html-webpack-plugin-for-multihtml 这个包，然后在 plugins 数组中使用该插件，例如：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------------
-------------- - -
------ -
------ -----------------
------ -----------------
-------- ------------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
--- -------------------
--------- -----------------------------
--------- -------------
------- ---------
---
--- -------------------
--------- -----------------------------
--------- -------------
------- ---------
---
--- -------------------
--------- -------------------------------
--------- ---------------
------- -----------
--
-
-其中，entry 选项是指定打包的入口文件，output 选项是指定输出的目录和文件名，plugins 选项是指定生成 HTML 文件的配置项。HtmlWebpackPlugin 对象包含以下属性：
template: 指定 HTML 模板文件的路径。filename: 指定生成的 HTML 文件名。chunks: 指定需要引用的 JavaScript 文件。
使用模板引擎
在上面的例子中，我们是通过指定 template 属性来指定 HTML 模板文件的路径的。而如果我们需要在 HTML 页面中插入动态内容，这时候就可以使用模板引擎来实现。html-webpack-plugin-for-multihtml 支持常见的模板引擎，例如 Handlebars、EJS、Pug 等等。
以 Handlebars 为例，我们需要在 webpack 配置文件中先安装 handlebars 这个包：
npm install handlebars --save-dev
接着，我们需要在 HTML 模板文件中使用 Handlebars 语法书写，在 webpack 配置文件中配置 Handlebars：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------------
----- ---------- - ----------------------
-------------- - -
------ -
------ -----------------
------ -----------------
-------- ------------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
--- -------------------
--------- ----------------------------
--------- -------------
------- ----------
------------------- -
------ ------ -----
--
--------- --------------------------------------------------------------- ---------
---
--- -------------------
--------- ----------------------------
--------- -------------
------- ----------
------------------- -
------ ------ -----
--
--------- --------------------------------------------------------------- ---------
---
--- -------------------
--------- ------------------------------
--------- ---------------
------- ------------
------------------- -
------ -------- -----
--
--------- ----------------------------------------------------------------- ---------
--
-
-在以上例子中，我们首先引入了 handlebars 模块，并将其赋值给一个常量，然后在每个 HtmlWebpackPlugin 对象中指定模板引擎为 handlebars。在模板文件中，我们可以使用 {{}} 来渲染动态内容，在 HtmlWebpackPlugin 对象中的 templateParameters 属性中指定需要传递的参数。
使用 ExtractTextWebpackPlugin 提取 CSS
在前面的例子中，我们已经使用 html-webpack-plugin-for-multihtml 来生成多个 HTML 页面了，但是我们还没有处理 CSS 样式。一般情况下，我们会使用 ExtractTextWebpackPlugin 来提取 CSS 样式，然后分离出一个单独的 CSS 文件。
首先在 webpack 配置文件中安装 ExtractTextWebpackPlugin 插件：
npm install extract-text-webpack-plugin --save-dev
然后，修改 webpack 配置文件：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------------
----- ----------------- - ---------------------------------------
-------------- - -
------ -
------ -----------------
------ -----------------
-------- ------------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
--- --------------------------------------- -- -------
--- -------------------
--------- ----------------------------
--------- -------------
------- ----------
------------------- -
------ ------ -----
--
--------- --------------------------------------------------------------- ---------
---
--- -------------------
--------- ----------------------------
--------- -------------
------- ----------
------------------- -
------ ------ -----
--
--------- --------------------------------------------------------------- ---------
---
--- -------------------
--------- ------------------------------
--------- ---------------
------- ------------
------------------- -
------ -------- -----
--
--------- ----------------------------------------------------------------- ---------
--
--
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- ------------
--
-
-
-
-在以上代码中，我们首先引入了 ExtractTextWebpackPlugin 插件，并在 plugins 数组中添加了新的插件。然后，我们在 module.rules 中添加了一条新规则，使用 ExtractTextWebpackPlugin.extract() 方法来提取 CSS 样式文件，该方法接受一个对象作为参数，该对象包含两个属性：fallback 和 use，其中 fallback 属性表示从 JS 中提取 CSS 样式失败后的处理方式，use 属性表示在 JS 中提取到 CSS 样式后使用的 loader。
总结
html-webpack-plugin-for-multihtml 可以帮助我们在 webpack 打包时生成多个 HTML 文件，并且可以和常见的模板引擎和 ExtractTextWebpackPlugin 插件进行配合使用。学会使用该 npm 包对于前端开发工程师来说是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f581e8991b448e0b03