随着 Web 应用的复杂性不断增加，多页应用（MPA）已经成为了许多项目的首选模式。不同于单页应用（SPA），MPA 需要将页面划分为多个不同的 HTML 文件，并且需要在每个页面中引入不同的 JS 和 CSS 文件。这就会导致打包和调试难度增加，需要手动配置大量的 webpack 配置文件。而本文将介绍如何使用 webpack 实现 MPA 的自动化打包。
webpack 简介
webpack 是一个前端模块化打包工具，可以将所有的前端资源（JS、CSS、图片等）打包成一个或多个文件，并且支持代码拆分、按需加载等高级特性。由于 webpack 灵活且功能强大，已经成为了现代前端开发中不可或缺的工具之一。
MPA 的自动化打包
要实现 MPA 的自动化打包，我们需要解决以下几个问题：
- 打包入口：如何将多个页面的入口文件配置到 webpack 中
- 输出文件：如何将不同的页面打包到不同的文件，同时生成对应的 HTML 文件
- 公共代码抽取：如何将多个页面都会用到的公共代码抽取到一个单独的文件中
接下来，我们将分别讲解如何解决这些问题。
打包入口
为了实现多个页面的打包，我们需要通过配置入口来告诉 webpack 每个页面的入口文件是什么。我们假设项目中存在两个页面，分别是 index.html 和 about.html，它们的入口文件分别是 index.js 和 about.js，那么我们需要在 webpack 的配置文件中加入以下配置：
module.exports = {
entry: {
index: './src/index.js',
about: './src/about.js'
}
}上面的配置中，我们将 index.js 和 about.js 分别配置为了 index 和 about 两个入口。
输出文件
为了将不同的页面打包到不同的文件中，我们需要使用多个 HtmlWebpackPlugin 实例来生成不同的 HTML 文件。同时，我们需要使用 [name] 占位符来告诉 webpack 输出文件的具体名称。
-- -------------------- ---- -------
----- ----------------- - ------------------------------
-------------- - -
------ -
------ -----------------
------ ----------------
--
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- ---------
---
--- -------------------
--------- -------------------
--------- -------------
------- ---------
--
-
-上面的代码中，我们使用了两个 HtmlWebpackPlugin 实例来生成 index.html 和 about.html。需要注意的是，每个实例都指定了对应的 chunks，这样才能将正确的 JS 文件引入到 HTML 中。此外，我们也可以使用 [hash] 占位符来生成唯一的文件名，避免缓存问题。
公共代码抽取
由于多个页面可能会用到相同的代码，我们需要将这些公共的代码抽取到一个单独的文件中，从而减小文件的体积，提高加载速度。这个功能可以通过配置 webpack 的 optimization 参数来实现。
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
------ ----------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
------------- -
------------ -
------------ -
-------- -
------- ----------
---------- --
------------------- --
-------- -
-
-
-
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- --------- ----------
---
--- -------------------
--------- -------------------
--------- -------------
------- --------- ----------
--
-
-上面的代码中，我们配置了 optimization.splitChunks 参数，其中 cacheGroups.commons 代表将公共代码抽取到一个名为 commons 的文件中。参数中的各项含义如下：
- chunks 表示将哪些块（如 initial、async）进行抽取
- minChunks 表示最少被几个入口Chunk引用才能被抽取
- maxInitialRequests 表示最多有几个可能的异步请求能够被导入，即如果当前要生成的块包含超过 5 个模块，这些模块就不会被抽取成新的块了
- minSize 表示抽取出来的公共模块最少需要多大，单位是字节
完整的配置文件如下：
-- -------------------- ---- -------
----- ---- - ---------------
----- ----------------- - ------------------------------
-------------- - -
------ -
------ -----------------
------ ----------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
------------- -
------------ -
------------ -
-------- -
------- ----------
---------- --
------------------- --
-------- -
-
-
-
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- --------- ----------
---
--- -------------------
--------- -------------------
--------- -------------
------- --------- ----------
--
-
-总结
本文介绍了如何使用 webpack 实现 MPA 的自动化打包，包括打包入口、输出文件和公共代码抽取。在实际开发中，我们可以根据自己的需求进行相应的配置，从而提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6f012f6b2d6eab324596d