Webpack 是一个强大的打包工具，也是前端开发中不可或缺的工具之一。然而，在实际开发中，我们往往需要打包多个页面，这时就需要对 Webpack 进行优化，以提高打包速度和性能。
多页面打包
多页面打包是指将多个 HTML 页面打包到一个或多个 JavaScript 文件中，并且每个 HTML 页面对应一个 JavaScript 文件。这种方式可以减少资源请求的数量，同时也有利于 SEO。
单页面打包 vs 多页面打包
在单页面应用（SPA）中，所有的页面都由一个入口文件（entry）来控制，直接将所有的 HTML 和 JavaScript 文件打包在一起即可。但在多页面应用中，每个页面都需要单独打包，这就需要使用多个入口文件。对于单页面应用来说，使用 Webpack 进行打包可以有效地优化性能；对于多页面应用，如果只使用单个入口文件，则会导致资源冗余和加载速度慢。
多页面打包的优点
多页面打包相对于单页面打包的优点主要体现在以下几个方面：
- 减少资源请求的数量，提高页面加载速度。
- 每个 HTML 文件都有单独的 JavaScript 文件，可以更好地利用缓存。
- 每个 HTML 文件可以单独设置其所需的插件或库，提高可维护性和复用性。
- 每个页面都有独立的 SEO 设置，可以提高网站的搜索引擎排名。
多页面打包的缺点
多页面打包相对于单页面打包的缺点主要体现在以下几个方面：
- 需要处理多个入口文件，增加了开发难度。
- 打包后的文件数量增加，增加了服务器的压力和带宽的消耗。
多页面打包的实现
实现多页面打包需要进行以下几个步骤：
1. 创建多个 HTML 文件
首先需要在项目中创建多个 HTML 文件，每个 HTML 文件代表一个页面。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------------
-------
------
---- ---------------
------- -------------------------
-------
-------2. 配置多个入口文件
打包多个页面需要配置多个入口文件。可以通过配置多个 entry 属性来实现。其中，每个 entry 的 key 代表入口文件的名称，value 代表入口文件的路径。
-- -------------------- ---- -------
-------------- - -
------ -
----- ----------------
------ -----------------
-------- -------------------
--
------- -
--------- ------------
----- ----------------------- --------
--
-------- -----
--3. 配置多个 HTML 插件
为了将打包后的 HTML 页面和对应的 JavaScript 文件关联起来，需要配置多个 HTML 插件。可以使用 html-webpack-plugin 插件来实现。可以通过传入多个 HtmlWebpackPlugin 实例的方式来实现。
-- -------------------- ---- -------
-------- -
--- -------------------
--------- ------------------
--------- ------------
------- ---------
---
--- -------------------
--------- -------------------
--------- -------------
------- ----------
---
--- -------------------
--------- ---------------------
--------- ---------------
------- ------------
---
-其中，template 属性代表 HTML 模板文件的路径，filename 属性代表打包后的 HTML 文件的名称，chunks 属性代表该 HTML 文件所需的 JavaScript 文件。
4. 优化公共代码块
多页面打包可能会导致代码冗余，由于多个页面之间可能存在相同的代码，所以可以优化公共代码块，提高代码复用率和加载速度。
可以使用 optimization.splitChunks 配置来实现公共代码块的提取。其中，chunks 属性设置为 'all' 表示将所有模块都包含在公共代码中，minSize 和 minChunks 属性是配置被拆分的代码块的大小和出现的频率限制。
-- -------------------- ---- -------
------------- -
------------ -
------- ------
------------ -
-------- -
----- -------------------------
----- ----------
--------- ----
------- ------
--
--
--
--完整的配置文件
最终的配置文件如下所示。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- ----------------
------ -----------------
-------- -------------------
--
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -------------------
--------- ------------------
--------- ------------
------- ---------
---
--- -------------------
--------- -------------------
--------- -------------
------- ----------
---
--- -------------------
--------- ---------------------
--------- ---------------
------- ------------
---
--
------------- -
------------ -
------- ------
------------ -
-------- -
----- -------------------------
----- ----------
--------- ----
------- ------
--
--
--
--
--总结
多页面打包是 Webpack 优化的重要方向之一，可以通过优化公共代码块，减少资源请求的数量，提高页面加载速度。通过以上的实现步骤，可以实现多页面打包，并有效地提高开发效率和性能。
示例代码
可以在 GitHub 上查看本文所涉及的示例代码：https://github.com/lmgy/multipage-webpack-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647bef78968c7c53b072fc32