当我们构建前端应用时，打包工具 webpack 是不可或缺的。webpack 不仅可以将多个文件打包成一个文件，而且还可以支持按需加载（code splitting）和按照模块的依赖关系异步加载模块（chunk）。
在 webpack 中，每个 entry（入口）都会生成一个 chunk。通常情况下，一个 entry 对应一个 chunk，但是在某些场景下，我们希望将多个 entry 合并成一个 chunk，这时候就需要使用 webpack 提供的多 entry 功能。
多 entry
webpack 支持同时配置多个 entry，例如：
-------------- - -
------ -
---- ---------------
------- ---------- ---------
--
-- ---
-上面的配置表示，我们有两个 entry：app 和 vendor。其中 app 是一个普通的 entry，而 vendor 是一个数组形式的 entry，我们称之为库（library entry）。vendor entry 会被处理成一个单独的 chunk。
在打包完成后，我们可以通过打印 stats 查看生成的 chunk：
可以看到，有两个 named chunk，app chunk 包含 app.js 和 lodash，而 vendor chunk 只包含了 jquery。
动态 library
上面的示例中，我们在配置文件中手动将库的依赖关系写死了。然而，在实际开发中，库的依赖关系是随时发生变化的，我们需要一种动态的方式来处理这种变化。
为了解决这个问题，我们可以使用 dependency-cruiser 这样的工具来分析项目中的依赖关系。例如，在我们的项目中，我们使用了 jquery 和 lodash 两个库，而 lodash 又依赖了 jquery：
--- ------------ -- -------------- --- ------------
基于这个信息，我们可以编写一个简单的脚本来生成 library entry：
----- -- - -------------
----- ---- - ---------------
----- - ----- - - -----------------------------
----- ------ - -------------------- ------
----- --------- - ----------------- ---------
----- ---- - ------------- -
-------- -----------------
----------- -------
--------------------- -----
--
----- ---- - --
--- ------ --- -- ------------------ -
-- ------------------------------------ -
----- ---- - ------------------------ ------------------------------ ---
---------- - ------------
-
-
-----------------
-------------------- -------------------
--------------- - ---------------------- ----- ------
-这个脚本会遍历项目中的依赖关系，只保留子目录为 vendor 的依赖，并将它们组装成一个对象。例如，当我们运行这个脚本后，会生成以下的配置：
-------------- - -
--------- -
--------
--
-------------- -
-------------
--
--------- -
--------
--
------------ -
-----------
-
-我们可以在 webpack 配置文件中引入这个配置，这样每次打包时就会自动生成对应的 library entry 了：
----- ---- - -------------------------
-------------- - -
------ -
---- ---------------
-------
--
-- ---
-总结
使用 webpack 处理具有多个 entry 的应用程序，能够更灵活地处理应用程序的代码分割和顺序加载。在前端开发中，动态分离代码是必不可少的功能，而 webpack 的多 entry 功能正好可以满足这一需求。通过本文的介绍，读者不仅能够了解到如何使用 webpack 的多 entry，还能掌握如何使用工具自动处理多 entry 的依赖关系，更好的解耦代码。
完整示例代码：https://github.com/ruanyf/webpack-multi-entry
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6645abc7d3423812e43b013f