随着前端技术的不断发展，单页应用(Single Page Application)的流行程度越来越高。但是，在一些特定的场景下，多页应用(Multiple Page Application)仍然是不可替代的。举例来说，一些政府门户网站或企业网站需要提供数百个页面，这时候使用单页应用很难保证页面的性能表现。在这种情况下，我们可以使用 Webpack 实现多页应用。
多页应用和单页应用的区别
多页应用是指网站的页面之间的切换是通过 URL 跳转来实现的，而每个页面都是由服务器端生成的。与此相对，单页应用则是通过 JavaScript 操作 DOM 来动态修改视图，而且页面之间的切换是不需要重新加载整个页面的。另外，单页应用的页面切换过程通常是比较平滑的，因为我们可以渐进式地改变页面。
虽然单页应用的性能表现优异，但是对于一些大型的网站来说，单页应用很难保证每个页面的性能。相对而言，多页应用则能够提供更好的性能表现，因为每个页面都是由服务器端生成的，可以避免在客户端加载大量的 JavaScript 和 CSS 文件。
Webpack 是一个模块打包工具，可以将多个 JavaScript 和 CSS 文件打包成一个或多个文件。在多页应用中，我们需要为每个页面分别打包出一个或多个文件。为每个页面打包出一个或多个文件的好处在于，我们可以将页面所需的 JavaScript 和 CSS 文件单独加载，从而提高页面的加载速度。
下面我们通过一个示例来演示如何使用 Webpack 实现多页应用。
安装 Webpack
首先我们需要安装 Webpack：
npm install webpack webpack-cli --save-dev
创建项目结构
在这个示例中，我们将创建一个简单的多页应用，包含两个页面：首页(index.html)和关于页面(about.html)。
我们的项目结构如下所示：
-- -------------------- ---- -------
--- ------------
--- -----------------
--- ----
- --- --------
- --- ---------
- --- --------
- --- ---------
--- -----
- --- ----------
- --- ----------
- --- ---------------
- --- ----------------
- --- ---------------
- --- ----------------
--- -------
--- ----------
--- ----------其中，src/index.js 包含首页的 JavaScript 代码，src/index.css 包含首页的 CSS 代码，src/about.js 包含关于页面的 JavaScript 代码，src/about.css 包含关于页面的 CSS 代码。
dist/index.html 和 dist/about.html 分别是首页和关于页面的 HTML 文件。dist/bundle-index.js 和 dist/bundle-index.css 分别是首页的 JavaScript 和 CSS 文件，dist/bundle-about.js 和 dist/bundle-about.css 分别是关于页面的 JavaScript 和 CSS 文件。
public/index.html 和 public/about.html 分别是首页和关于页面的 HTML 模板文件。在 Webpack 打包时会使用这些模板文件来生成最终的 HTML 文件。
配置 Webpack
我们需要为每个页面配置一个 Webpack 入口和一个 Webpack 输出。下面是我们的 Webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------
------ -----------------
--
------- -
----- ----------------------- --------
--------- --------------------------
-------------- --------------------------
--
-------- -
--- -------------------
--------- ----------------------
--------- -------------
------- ----------
---
--- -------------------
--------- ----------------------
--------- -------------
------- ----------
---
--
--首先我们定义了两个入口文件：index 和 about。接下来，我们定义了输出目录和输出文件名。[name] 表示入口文件的名称，[contenthash] 表示文件内容的 hash 值。chunkFilename 则是用于打包时生成的文件名，建议也设置为 [name].[contenthash].js。
最后，我们通过 HtmlWebpackPlugin 插件来生成 HTML 文件。通过设置 template 和 filename 属性，我们可以指定 HTML 模板和最终文件名。chunks 属性表示在生成的 HTML 文件中应该引入哪些 JavaScript 文件。
编写 JavaScript 和 CSS 代码
接下来，我们需要编写 JavaScript 和 CSS 代码。这里我们只给出一个简单的示例：
// src/index.js
import './index.css';
console.log('Hello World!');// src/about.js
import './about.css';
console.log('About Page');-- -------------------- ---- ------- -- ------------- -- ---- - ----------------- -------- - -- - ------ ----- -
-- -------------------- ---- ------- -- ------------- -- ---- - ----------------- ----- ------ ----- - -- - ------ ----- -
编写 HTML 模板
接下来，我们需要编写 HTML 模板。HTML 模板中包含了页面的结构和样式，但是 JavaScript 和 CSS 的引入是通过 Webpack 自动生成的。
下面是一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ ------------
----- ---------------- ------------------------- --
-------
------
--------- ---------
------- ---------------------------------
-------
--------- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ ------------
----- ---------------- ------------------------- --
-------
------
--------- ---------
------- ---------------------------------
-------
-------打包代码
最后，我们需要运行 Webpack 将代码打包成多个文件。我们可以通过以下命令运行 Webpack：
npx webpack --config webpack.config.js
运行完成后，我们可以在 dist 目录下看到生成的文件。
总结
使用 Webpack 实现多页应用，能够有效提高页面性能和开发效率。在实际开发中，我们还可以结合其他优化方式，如图片压缩、CDN 加速等，来进一步提升页面的性能表现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae19a748841e9894a1357e