前言
Webpack 是一款非常流行的打包工具，能够将各种各样的资源打包成一个或多个 bundle，并且还支持热更新，实现了前端性能优化的同时，也极大地提升了开发效率。但是，官方文档对于多页应用的构建并没有介绍得很详细，本文旨在分享如何使用 Webpack 构建多页应用。
什么是多页应用
多页应用（MPA，Multiple Page Application）是指一个网站由多个页面组成，并且每个页面之间通过链接跳转实现页面切换。相对 SPA（Single Page Application），MPA 更符合传统的 web 架构，对 SEO 非常友好。
Webpack 构建多页应用
Webpack 的单页应用构建方式是非常常见的，但是如何构建多页应用呢？
1. 多入口
多页应用的核心是多个 HTML 页面，因此需要多个入口文件。在我们的项目中，可以在 entry 配置中为每个页面提供一个入口文件：
module.exports = {
entry: {
index: './src/index.js',
about: './src/about.js',
contact: './src/contact.js'
}
};以上配置会为三个页面创建 index.js、about.js 和 contact.js 三个入口文件。
2. 多输出
接下来，需要为每个页面生成一个 HTML 文件。为此，可以使用 html-webpack-plugin 插件，它支持根据模板生成 HTML 文件，并且可以自动引入对应的 JS 和 CSS 文件。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------
------ -----------------
-------- ------------------
--
-------- -
--- -------------------
--------- ----------------------
--------- -------------
------- ---------
---
--- -------------------
--------- ----------------------
--------- -------------
------- ---------
---
--- -------------------
--------- ------------------------
--------- ---------------
------- -----------
--
-
--注意，通过 chunks 属性可以指定每个 HTML 文件需要引入哪些 JS 文件。
3. 处理 CSS
在多页应用中，每个页面可能会使用不同的 CSS 文件，我们可以在 entry 配置中设置多个 CSS 入口文件，并且在 plugins 配置中使用 mini-css-extract-plugin 插件将 CSS 提取到指定的文件中。
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
------ -
------ -
--- -----------------
---- -----------------
--
------ -
--- -----------------
---- -----------------
--
-------- -
--- -------------------
---- -------------------
-
--
-------- -
--- -------------------
--------- ----------------------
--------- -------------
------- ---------
---
--- -------------------
--------- ----------------------
--------- -------------
------- ---------
---
--- -------------------
--------- ------------------------
--------- ---------------
------- -----------
---
--- ----------------------
--------- --------------------------
--
--
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
-
--4. 处理图片
在多页应用中，每个页面可能也会使用不同的图片，需要对图片进行处理。可以使用 file-loader 或 url-loader 将图片复制到输出目录，并且生成对应的 URL 或 data URI。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- ----------------------
---- -
-
------- -------------
-------- -
------ -----
----- ----------------------
----------- --------
-
-
-
-
-
-
--这里使用 url-loader 将小于 8KB 的图片转换成 data URI，大于 8KB 的图片则通过 file-loader 复制到输出目录。
总结
本文介绍了 Webpack 构建多页应用的几个关键点，包括多入口、多输出、处理 CSS 和处理图片。希望本文能够帮助读者更好地理解和应用 Webpack。完整的示例代码可以在 GitHub 上查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b3a27968c7c53b0d94c4d