在前端开发中，多页面应用（MPA）是一个常见的应用场景。相比于单页面应用（SPA），MPA 更适合于大型项目，因为每个页面都可以独立开发和维护。然而，MPA 的开发和打包也有一定的复杂性，需要使用一些工具来帮助我们实现。其中，webpack 是一个非常流行的前端打包工具，本文将介绍如何使用 webpack 实现 MPA 的打包。
什么是多页面应用
多页面应用是指一个网站包含多个页面，每个页面都有自己的 HTML、CSS 和 JavaScript 文件。用户在访问网站时，每个页面都会重新加载，产生一个新的 HTTP 请求。相比于 SPA，MPA 的优点在于：
- 更适合于 SEO，因为每个页面都有自己的 URL；
- 更容易维护，因为每个页面都可以独立开发和测试；
- 更容易扩展，因为每个页面都可以添加新的功能。
在 webpack 中，实现 MPA 的打包可以使用两种方式：使用多个 entry 或使用 HtmlWebpackPlugin 插件。
使用多个 entry
在 webpack 中，entry 是指打包的入口文件，可以是一个或多个。我们可以为每个页面创建一个 entry，然后使用 webpack 打包时，会将每个 entry 打包成一个独立的文件。
下面是一个示例，假设我们有两个页面：home 和 about。我们可以为每个页面创建一个 entry：
-- -------------------- ---- -------
-------------- - -
------ -
----- ----------------
------ ----------------
--
------- -
--------- ------------
----- ----------------------- -------
-
--在上面的配置文件中，我们定义了两个 entry：home 和 about。webpack 会将它们分别打包成 home.js 和 about.js。其中，[name] 会被替换成 entry 的名称。
我们还需要在 HTML 文件中引入对应的 JavaScript 文件。可以手动创建 HTML 文件，也可以使用 HtmlWebpackPlugin 插件生成。下面是一个手动创建的示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------
-------
------
-------------
------- -----------------------
-------
-------使用 HtmlWebpackPlugin 插件
手动创建 HTML 文件比较麻烦，而且容易出错。我们可以使用 HtmlWebpackPlugin 插件自动生成 HTML 文件。下面是一个示例：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- ----------------
------ ----------------
--
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- ------------
--------- ------------------
------- --------
---
--- -------------------
--------- -------------
--------- -------------------
------- ---------
--
-
--在上面的配置文件中，我们使用 HtmlWebpackPlugin 插件生成了两个 HTML 文件：home.html 和 about.html。其中，filename 是生成的文件名，template 是模板文件的路径，chunks 是需要引入的 JavaScript 文件。
使用 HtmlWebpackPlugin 插件可以方便地生成 HTML 文件，而且不容易出错。而且，我们还可以使用模板语言来生成 HTML 文件，比如使用 EJS：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ----- ----------
-------
------
------- ----- -------
------- -------- -- ----------------
-------
-------在上面的模板中，我们使用了 EJS 的语法，可以动态生成 HTML 标签。使用模板语言可以更方便地生成 HTML 文件，比如可以根据环境变量来生成不同的 HTML 文件。
总结
在本文中，我们介绍了如何使用 webpack 实现 MPA 的打包。可以使用多个 entry 或使用 HtmlWebpackPlugin 插件来实现。使用 HtmlWebpackPlugin 插件可以方便地生成 HTML 文件，而且可以使用模板语言来生成不同的 HTML 文件。在实际开发中，可以根据项目的需求来选择适合的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6607a454d10417a2226399f4