前言：
WebPack 是一个非常强大的打包工具，可以支持多种模块化规范，支持各种资源的打包，但是在实际的开发中，我们经常会遇到需要构建多个页面的情况，这时候，我们需要用到 WebPack 的多入口打包功能。
本文将介绍如何使用 WebPack 实现多页面应用的构建，并提供示例代码，希望能够对大家有所帮助。
一、多页面应用的构建
多页面应用（Multiple Page Application，简称 MPA）是指一个网站包含多个页面的应用，每个页面都有自己的 HTML 文件和对应的 JS、CSS 文件。相较于单页面应用（Single Page Application，简称 SPA），多页面应用的页面切换不需要进行 Ajax 加载，可以在服务器端进行 SEO 优化。
在 WebPack 中，实现多页面应用的构建，需要用到多入口打包的功能。多入口打包是指 WebPack 可以同时处理多个入口文件，将它们打包成多个输出文件，每个输出文件对应一个入口文件。在多页面应用中，每个页面都对应一个入口文件，因此需要使用多入口打包的功能。
二、WebPack 如何支持多入口打包
WebPack 支持多入口打包的方式有两种：手动配置和自动获取。手动配置是指在 WebPack 配置文件中手动配置多个入口文件，自动获取是指 WebPack 根据目录结构自动获取入口文件。
1、手动配置多个入口文件
手动配置多个入口文件，需要在 WebPack 配置文件中添加 entry 属性，entry 属性可以是一个字符串、一个数组或一个对象。当 entry 属性是一个对象时，可以将多个入口文件配置在一个对象中，每个属性对应一个入口文件。例如：
module.exports = {
entry: {
index: './src/index.js',
about: './src/about.js'
},
...
}上面的代码中，entry 属性是一个对象，包含了两个属性 index 和 about，分别对应 src 目录下的 index.js 和 about.js 文件。这样 WebPack 就会将这两个入口文件打包成两个输出文件。
2、自动获取入口文件
自动获取入口文件，是指 WebPack 根据目录结构自动获取入口文件。这种方式需要使用到 WebPack 的 glob 函数，glob 函数可以根据通配符获取匹配的文件路径。例如，我们可以使用 glob 函数获取 src 目录下以 .js 结尾的文件路径：
const glob = require('glob');
const files = glob.sync('./src/**/*.js');上面的代码中，使用 glob.sync 函数获取了 src 目录下所有以 .js 结尾的文件路径，保存在 files 数组中。
获取到入口文件路径后，需要将它们转换成 entry 属性的格式，这可以使用 reduce 函数实现：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- -- - ----- ---- - ------------------------------ --------- - ----- ------ ---- -- ---- -------------- - - ------ -------- --- -
上面的代码中，使用 reduce 函数将文件路径转换成 entry 属性的格式，其中 name 变量是通过正则表达式从文件路径中获取的文件名。
三、多页面应用的示例代码
以下是一个简单的多页面应用示例代码：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ----- - ---------------------------
----- ------- - ------------------ ----- -- -
----- ---- - ------------------------------
--------- - -----
------ ----
-- ----
-------------- - -
------ --------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
-------------------------------- -- -
------ --- -------------------
--------- ---------------
--------- ----------------------
------- ------
---
--
-
---- -------------------- ---- ------- ---- ----------------- --- --------- ----- ------ ------ ----- ---------------- ---------- ------------------------------- ---------- ------- ------ ---- --------------- ------- -------- ------------------------------------------------------------------------- ------------- ------- -------
在上面的示例代码中，我们使用了 glob 函数获取了 src 目录下所有以 .js 结尾的文件路径，并使用 reduce 函数将它们转换成了 entry 属性的格式。
在 plugins 属性中，我们使用了 Object.keys(entries) 获取了所有入口文件的名称，然后使用 map 函数生成了 HtmlWebpackPlugin 的实例，每个 HtmlWebpackPlugin 对应一个入口文件。HtmlWebpackPlugin 是一个 WebPack 插件，可以根据模板生成 HTML 文件，并将入口文件自动注入到 HTML 文件中。
在 template.html 文件中，我们使用了 htmlWebpackPlugin 变量获取了生成的 HTML 文件的相关信息，包括文件名、入口文件名等。
四、总结
在 WebPack 中实现多页面应用的构建，需要用到多入口打包的功能。WebPack 支持手动配置多个入口文件和自动获取入口文件两种方式，可以根据实际情况选择合适的方式。
在实现多页面应用的构建时，我们还需要使用 HtmlWebpackPlugin 插件生成 HTML 文件，并将入口文件自动注入到 HTML 文件中。这样就可以轻松地实现多页面应用的构建。
希望本文能够对大家理解 WebPack 多入口打包和多页面应用的构建有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66177871d10417a222758fa8