前端开发的过程中，我们经常需要开发多页应用程序。与单页应用程序相比，多页应用程序需要更多的页面和组件。在开发过程中，如何自动打包多页应用程序成为了一个重要的问题。Webpack 是前端自动化工具中的一个最主流的工具，它支持自动打包多页应用程序，并提高了前端开发效率。
本文主要介绍 Webpack 如何自动打包多页应用程序，包括如何设置多个入口文件，如何使用 HtmlWebpackPlugin 自动生成 HTML 文件，以及如何使用 ProvidePlugin 加载全局变量。
什么是多页应用程序？
多页应用程序是指由多个页面组成的应用程序。每个页面都与特定的 URL 相关联，并且可以通过链接或导航跳转到不同的页面。多页应用程序通常需要更多的页面和组件，也更加复杂。
相对而言，单页应用程序只有一个页面，所有页面的内容都在同一个页面中动态加载。单页应用程序的实现依赖于 JavaScript，通常使用 React、Vue 或 Angular 等前端框架实现。
多页应用程序的打包
对于多页应用程序，每个页面通常需要对应一个 JavaScript 入口文件。在打包过程中，Webpack 首先读取各个入口文件，然后将这些 JavaScript 文件合并成可执行的代码，并使用 HtmlWebpackPlugin 自动生成 HTML 文件。
为了更好地理解Webpack 如何打包多页应用程序，下面将详细介绍多入口文件的设置、HtmlWebpackPlugin 的使用和ProvidePlugin 的使用。
多入口文件的设置
在打包多页应用程序中，我们需要设置多个入口文件。在 Webpack 的 config 文件中，我们可以使用 entry 属性设置多个入口文件:
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
------ -----------------
------ -----------------
--
------- -
--------- ------------------------
----- ----------------------- --------
--
-- -------
--在上面的配置文件中，entry 属性中列出了所有的入口文件。在这里，我们定义了三个入口文件：page1.js、page2.js、page3.js。Webpack 会读取这些入口文件中的内容，并生成可执行的代码。
HtmlWebpackPlugin 的使用
在多页应用程序中，每个页面都需要对应一个 HTML 文件。手动编写 HTML 文件很繁琐，而且容易出错。为了方便自动生成 HTML 文件，我们可以使用 HtmlWebpackPlugin 插件。
通过 HtmlWebpackPlugin 插件，我们可以自动生成多个 HTML 文件，并将引用的 JavaScript 和 CSS 文件自动加入到 HTML 文件中。在 Webpack 的 config 文件中，我们需要先安装 HtmlWebpackPlugin 插件，然后配置 plugins 属性，如下所示：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------
------ -----------------
------ -----------------
--
------- -
--------- ------------------------
----- ----------------------- --------
--
-------- -
--- -------------------
--------- -------------------
------- ----------
--------- -------------
---
--- -------------------
--------- -------------------
------- ----------
--------- -------------
---
--- -------------------
--------- -------------------
------- ----------
--------- -------------
---
--
-- -------
--在上面的配置文件中，我们指定了 HTML 文件的生成规则。在 HtmlWebpackPlugin 插件的配置中，template 属性指定了 HTML 文件的模板文件，chunks 属性指定了当前页面需要引入的 JavaScript 文件，filename 属性指定了生成的 HTML 文件名。
ProvidePlugin 的使用
在多页应用程序中，有些模块可能会被多个页面使用，为了避免在每个页面中都重复引入这些模块，我们可以使用 ProvidePlugin 插件来自动加载全局变量。
在 Webpack 的 config 文件中，我们可以使用 ProvidePlugin 插件来加载全局变量：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -
------ -----------------
------ -----------------
------ -----------------
--
------- -
--------- ------------------------
----- ----------------------- --------
--
-------- -
--- -----------------------
-- ---------
------- ---------
---------------- ---------
---
--
-- -------
--在上面的配置文件中，我们使用 ProvidePlugin 插件自动加载全局变量 $、jQuery 和 window.jQuery。在其他的页面中，如果需要使用这些变量，我们可以直接使用 $、jQuery 和 window.jQuery。
结论
Webpack 可以轻松地实现自动打包多页应用程序。我们只需要设置多个入口文件、使用 HtmlWebpackPlugin 自动生成 HTML 文件、使用 ProvidePlugin 加载全局变量即可。通过合理地配置，我们可以提高前端开发的效率，同时也可以更好地管理代码。
示例代码
示例代码可在 Github 获取：https://github.com/Zhongcai-Junyang/webpack-multipage-demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee344677d675cfffd40523