Webpack 是一个强大的前端打包工具，它可以将多个 JavaScript 文件打包成一个或多个 bundle 文件，以及打包其他资源（如 CSS、图片等）。在实际开发中，我们通常会有多个入口文件，例如多个页面或多个组件，而 Webpack 可以通过配置实现多入口打包。
配置多入口
在 Webpack 的配置文件中，我们可以通过 entry 属性来指定入口文件。如果只有一个入口文件，可以直接写入文件路径，例如：
-------------- - - ------ ----------------- ----- -
如果有多个入口文件，可以写成对象形式，例如：
-------------- - -
------ -
------ -----------------
------ ----------------
--
-----
-上面的配置定义了两个入口文件，分别是 index.js 和 about.js，它们会被打包成两个 bundle 文件。这里的 index 和 about 是 bundle 文件的名称，可以根据实际情况自行定义。
多页面应用打包
在多页面应用中，每个页面都有自己的 HTML 文件和对应的 JavaScript 文件。为了实现多入口打包，我们可以使用 HtmlWebpackPlugin 插件，它可以在打包时自动生成 HTML 文件，并将打包后的 JavaScript 文件自动引入。我们可以在 plugins 属性中添加该插件的实例：
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------
------ ----------------
--
-------- -
--- -------------------
------ ------ ------
--------- -------------
------- ---------
---
--- -------------------
------ ------ ------
--------- -------------
------- ---------
--
--
-----
-上面的配置定义了两个 HTML 文件，分别是 index.html 和 about.html，它们会自动引入对应的 JavaScript 文件。chunks 属性指定了该 HTML 文件需要引入哪些 bundle 文件，这里指定了 index 和 about 两个文件。
提取公共代码
在多入口打包中，有可能会存在多个入口文件共用的代码，例如公共的库文件或工具函数。为了避免重复打包这些代码，可以使用 CommonsChunkPlugin 插件将公共代码提取出来，生成一个独立的 bundle 文件。我们可以在 plugins 属性中添加该插件的实例：
----- ------- - -------------------
-------------- - -
------ -
------ -----------------
------ ----------------
--
-------- -
--- -------------------
------ ------ ------
--------- -------------
------- ---------
---
--- -------------------
------ ------ ------
--------- -------------
------- ---------
---
--- -------------------------------------
----- --------
--
--
-----
-上面的配置定义了一个公共的 bundle 文件，它的名称为 common。在生成 HTML 文件时，不需要再引入公共代码，因为它已经被提取到了 common.js 文件中。
总结
通过上面的介绍，我们可以看到 Webpack 如何实现多入口打包，并且通过 HtmlWebpackPlugin 和 CommonsChunkPlugin 插件可以实现多页面应用的打包和公共代码的提取。在实际开发中，我们可以根据需要灵活配置，以便更高效地管理和打包代码。下面是完整的示例代码：
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ------- - -------------------
-------------- - -
------ -
------ -----------------
------ ----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
--
-
----- ---------
---- ---------------- -------------
--
-
----- -----------------------
---- ---------------
-
-
--
-------- -
--- -------------------
------ ------ ------
--------- -------------
------- ---------
---
--- -------------------
------ ------ ------
--------- -------------
------- ---------
---
--- -------------------------------------
----- --------
--
-
--来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f1e65f2b3ccec22fa63202