Webpack 是一个常用的前端打包工具，在前端开发中拥有广泛的应用。然而，在实际的开发中，很多时候我们需要打包多页应用，这会对我们的打包方式提出不同的要求。本文将介绍如何使用 Webpack 打包多页应用。
什么是多页应用
在单页应用中，整个网站只有一个 HTML 文件，所有页面的内容都由 JavaScript 在运行时动态渲染。相应地，Web 应用的加载和渲染都在浏览器中完成，没有页面跳转和刷新，用户体验较为流畅。
相反，多页应用则是指整个网站有多个 HTML 文件，并通过这些文件来完成页面的渲染和导航。用户每次访问不同的页面时，服务器都会重新生成并传输整个页面，这就导致了相对较长的加载时间和相对较差的用户体验。
在多页应用中，每个 HTML 文件都可以视为一个页面，每个页面都可以有它自己的 JavaScript、CSS、图片等资源。
多页应用的打包实现
Webpack 打包多页应用的实现，最简单的方式是使用原生的 Webpack 配置中的 HTMLWebPackPlugin 插件。HTMLWebPackPlugin 插件允许我们在编译过程中生成一个 HTML 页面，并将打包后的 bundle 引入到该 HTML 页面中。
首先，我们需要在 Webpack 配置中添加多个入口（entry）：
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
------ -----------------
------ -----------------
-- ---
--
------- -
----- ----------------------- --------
--------- ------------
--
-- ---
--上面的代码定义了三个入口文件：
page1.js: 作为第一个页面的入口文件page2.js: 作为第二个页面的入口文件page3.js: 作为第三个页面的入口文件
接着，我们需要在 Webpack 配置文件中添加多个 HTMLWebPackPlugin 插件，以便为每个页面生成对应的 HTML 文件：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------
------ -----------------
------ -----------------
-- ---
--
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- ----------
---
--- -------------------
--------- -------------------
--------- -------------
------- ----------
---
--- -------------------
--------- -------------------
--------- -------------
------- ----------
---
-- ---
--
-- ---
--上面的配置中，我们为每个页面指定了对应的 HTML 文件。我们可以通过添加 template 和 filename 属性指定 HTML 文件的路径，chunks 属性可以指定引入的 js 文件包含哪些入口的 js 文件。
最后，运行 npm start 或 npm run build 命令即可为所有页面生成相应的 HTML 和对应的 js 文件。
示例代码
以下是一个简单的多页应用打包示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------
------ -----------------
------ -----------------
--
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- ----------
---
--- -------------------
--------- -------------------
--------- -------------
------- ----------
---
--- -------------------
--------- -------------------
--------- -------------
------- ----------
---
--
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
-
----- ----------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ---------
--
--
--
--
--
--
--在 src 目录中，我们有三个入口文件 page1.js、page2.js 和 page3.js，以及三个 HTML 模板文件 page1.html、page2.html 和 page3.html。
其中，page1.js 和 page2.js 均引入了 CSS 文件，而 page2.js 和 page3.js 均引入了图片资源。
通过 npm start 命令即可在 dist 目录中生成 page1.html、page2.html 和 page3.html 三个 HTML 文件，以及三个对应的 js 文件 page1.js、page2.js 和 page3.js、一张图片 image.jpeg 和一张 GIF 图片 image.gif，并完成多页应用的打包。
总结
使用 Webpack 打包多页应用，需要在 Webpack 配置文件中添加多个入口和对应的 HTMLWebPackPlugin 插件，以便为每个页面生成对应的 HTML 文件和引入对应的 js 文件。在实际的开发中，开发者可以通过此方式来为多页应用进行打包，以便提供更好的用户体验和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455c97c968c7c53b092b925