什么是 html-webpack-multi-entries-dependencies-plugin
html-webpack-multi-entries-dependencies-plugin 是一个 webpack 插件，支持在 html-webpack-plugin 的基础上提供多入口文件的静态资源依赖自动引入功能，让多页面项目管理更加便捷。
安装 html-webpack-multi-entries-dependencies-plugin
使用 npm 命令安装 html-webpack-multi-entries-dependencies-plugin：
npm i -D html-webpack-multi-entries-dependencies-plugin
使用 html-webpack-multi-entries-dependencies-plugin
配置 webpack
在 webpack 配置文件中引入 html-webpack-multi-entries-dependencies-plugin，并对其进行配置。以 webpack4 为例：
-- -------------------- ---- -------
----- ----------------------------------------- - ----------------------------------------------------------
----- ----------------- - -------------------------------
-------------- - -
-- ---
------ -
------ -----------------
------ -----------------
--
-------- -
--- -------------------
--------- -------------------
------- ----------
--------- -------------
---
--- -------------------
--------- -------------------
------- ----------
--------- -------------
---
--- -------------------------------------------
------ -
-
----- ---------------
------- ---------
--
-
----- ---------------
------- ---------
--
-
---
--
-- ---
-如上代码所示，我们定义了两个页面 pageA 和 pageB，并使用 HtmlWebpackPlugin 生成它们的 HTML 文件，再通过 HtmlWebpackMultiEntriesDependenciesPlugin 插件对它们的静态资源进行自动引入。
其中，HtmlWebpackPlugin 的 chunks 属性指定了入口文件（entry）对应的 chunk，filename 属性指定生成的 HTML 文件名。
HtmlWebpackMultiEntriesDependenciesPlugin 的 files 属性指定了待处理的 HTML 文件列表和对应的 chunk，支持正则表达式匹配文件名。
页面文件
除了上述 webpack 配置之外，还需要在页面文件中手动引入入口文件，如下：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
----------- ---------
-------
------
------- --------------------------
-------
--------- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
----------- ---------
-------
------
------- --------------------------
-------
-------示例代码
以简单的两个页面为例，假设它们都引用了 jQuery：
// src/pageA.js
import $ from 'jquery';
console.log('pageA', $);// src/pageB.js
import $ from 'jquery';
console.log('pageB', $);使用 html-webpack-multi-entries-dependencies-plugin 后，它们的 HTML 文件将自动引入 jQuery：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
----------- ---------
-------
------
------- --------------------------
------- ----------------------------------
-------
--------- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
----------- ---------
-------
------
------- --------------------------
------- ----------------------------------
-------
-------总结
html-webpack-multi-entries-dependencies-plugin 是一个实用的 webpack 插件，可以极大地简化多页面项目的静态资源管理工作。在使用时，需要注意的是，在页面文件中需要手动引入入口文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7d238a385564ab6a8e