Webpack 是目前前端开发中最流行的打包工具之一，它可以将多个 JavaScript 模块打包成一个或多个 bundle，也可以将 CSS、图片等资源进行处理和打包。在开发多页面应用时，我们需要将每个页面所需的 JavaScript、CSS 等资源分别打包成不同的文件，这时候就需要对 Webpack 进行多页面应用的配置。
1. 多页面应用的概念
多页面应用（MPA，Multiple Page Application）是指一个网站包含多个页面，每个页面都是独立的 HTML 文件，每个页面都有自己的 JavaScript、CSS 等文件。相对于单页面应用（SPA，Single Page Application），多页面应用更适合对 SEO 友好的网站，因为每个页面都有独立的 URL 地址，可以被搜索引擎爬取。
2. 多页面应用的配置
2.1. 目录结构
在多页面应用中，我们需要将每个页面的 HTML、JavaScript、CSS 等文件分别放在不同的目录下，如下所示：
-- -------------------- ---- ------- ---- --- ------ - --- ---------- - --- -------- - --- --------- --- ------ - --- ---------- - --- -------- - --- --------- --- ---
2.2. HTML 模板
在每个页面的 HTML 文件中，我们需要引入对应的 JavaScript、CSS 等文件。为了避免每个页面都写一遍相同的 HTML 代码，我们可以使用 HTML 模板，即将通用的 HTML 代码放在一个模板文件中，每个页面的 HTML 文件都引入这个模板文件，并插入自己的内容。
我们可以使用 html-webpack-plugin 插件来实现 HTML 模板的功能。在 webpack.config.js 中配置如下：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------------
------ -----------------------
-- ---
--
------- -
----- ----------------------- --------
--------- -------------------
--
------- -
------ -
-- ---
--
--
-------- -
--- -------------------
--------- ----------------------
--------- -------------
------- ----------
---
--- -------------------
--------- ----------------------
--------- -------------
------- ----------
---
-- ---
--
--其中，template 指定 HTML 模板文件，filename 指定生成的 HTML 文件名，chunks 指定该 HTML 文件需要引入哪些 JavaScript 文件。
2.3. CSS 文件
在多页面应用中，每个页面都有自己的 CSS 文件，我们需要将它们分别打包成不同的文件。可以使用 mini-css-extract-plugin 插件将 CSS 文件提取出来，然后使用 optimize-css-assets-webpack-plugin 插件对 CSS 进行压缩。
在 webpack.config.js 中配置如下：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
-------------- - -
------ -
------ -----------------------
------ -----------------------
-- ---
--
------- -
----- ----------------------- --------
--------- -------------------
--
------- -
------ -
-
----- ---------
---- -
----------------------------
-------------
--
--
-- ---
--
--
-------- -
--- ----------------------
--------- -------------
---
--- --------------------------
-- ---
--
--其中，MiniCssExtractPlugin 用于将 CSS 文件提取出来，OptimizeCssAssetsPlugin 用于压缩 CSS 文件。
2.4. 公共代码提取
在多页面应用中，可能会有一些公共的 JavaScript 代码，我们希望将它们提取出来，避免重复加载。可以使用 splitChunks 插件来实现公共代码提取。
在 webpack.config.js 中配置如下：
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------------
------ -----------------------
-- ---
--
------- -
----- ----------------------- --------
--------- -------------------
--
------- -
------ -
-- ---
--
--
------------- -
------------ -
------- ------
----- ---------
--
--
-------- -
-- ---
--
--其中，chunks: 'all' 表示提取所有代码，name: 'common' 表示提取出来的公共代码文件名为 common.bundle.js。
3. 总结
通过上述配置，我们可以实现多页面应用的打包。在实际开发中，我们还可以使用 webpack-dev-server 来启动一个开发服务器，自动刷新页面，提高开发效率。多页面应用的配置相对于单页面应用来说更加复杂，但是可以提高 SEO 友好性，适合一些大型网站的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650fb10495b1f8cacd85eefe