前言
在 Web 开发中，由于网站的复杂性增加，往往需要使用多个入口文件来实现不同的功能。此时，为了方便管理和部署，使用 webpack 进行打包是一个不错的选择。但是，在打包多个入口文件时，常常会遇到一些问题，本文将详细介绍如何解决这些问题。
问题一：如何配置多个入口？
假设我们有两个入口文件 index.js 和 home.js，如何配置 webpack 来打包这两个文件？
一个简单的解决方法是在 webpack.config.js 中添加两个入口：
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
----- ----------------
--
------- -
--------- ------------
----- ----------------------- ----------
--
--这里使用了一个对象来指定多个入口，其中每个属性的键名就是入口的名称，键值就是入口的路径。
在这里，我们将两个入口文件分别输出到 ./dist/index.js 和 ./dist/home.js。
问题二：如何处理多个入口的公共代码？
在上述方式中，对于两个入口文件，如果它们之间有一些公共的代码，那么这些公共代码就会被打包到每个入口文件中，导致代码冗余。
为了避免这种情况，可以使用 SplitChunksPlugin 插件来将公共代码抽离出来。在 webpack.config.js 中添加如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -
------------ -
------- -
----- ---------
------- ------
---------- --
--
--
--
--
--这里的 splitChunks 选项用来配置在打包多个文件时抽离公共代码的行为。具体来说，我们在 cacheGroups 中指定了一个名为 common 的模块组，然后设定了在至少被两个模块同时引用时才会被打包成一个单独的文件。这个文件的名称为 common。
在代码中引用公共代码的地方，需要通过如下方式引入：
import { commonFunc } from './common.js';
commonFunc();这里的 common.js 是指存放公共代码的文件，而我们需要从这个文件中导出一个名为 commonFunc 的函数，然后再将其引用到其他文件中。
问题三：如何处理多个页面？
在绝大多数情况下，网站都包含多个页面。如果每个页面都对应一个入口文件，那么会造成打包出的代码包过大、性能下降等问题。为了避免这种情况，我们可以使用 HtmlWebpackPlugin 插件，该插件可以自动生成针对每个页面的 HTML 文件，并自动将打包好的脚本注入到生成的 HTML 文件中。
在 webpack.config.js 中添加如下配置：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
------ -----
--------- -------------------
--------- -------------
------- ---------- ---------
---
--- -------------------
------ -------
--------- ------------------
--------- ------------
------- ---------- --------
---
--
--这里的 HtmlWebpackPlugin 插件被用来配置生成 HTML 文件所需的各类参数。比如 title 选项指定了在生成 HTML 文件中的 <title> 标签的内容，template 选项指定了用于生成 HTML 文件的模板，filename 选项指定了生成的 HTML 文件的名称。
其中比较关键的是 chunks 选项，它表示在生成的 HTML 文件中需要被注入的脚本文件。在这里，我们指定了注入 common.js 和 index.js（或 home.js）两个脚本文件。这样，在每个页面中我们就只需要通过如下方式引入脚本文件即可：
<script src="common.js"></script> <script src="index.js"></script>
总结
在本文中，我们介绍了 webpack 打包多个入口文件时可能遇到的一些问题，并给出了一些解决方案。希望这篇文章对你对学习和掌握 webpack 的使用有所帮助。
完整的 webpack.config.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------
----- ----------------
--
------- -
--------- ------------
----- ----------------------- ----------
--
------------- -
------------ -
------------ -
------- -
----- ---------
------- ------
---------- --
--
--
--
--
-------- -
--- -------------------
------ -----
--------- -------------------
--------- -------------
------- ---------- ---------
---
--- -------------------
------ -------
--------- ------------------
--------- ------------
------- ---------- --------
---
--
--参考链接：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64606e58968c7c53b021d6cf