在前端开发中，Webpack 是一款非常流行的模块打包工具。它可以将多个模块打包成一个或多个 bundles，同时支持多种模块类型，如 JavaScript、CSS、图片等。同时，Webpack 还支持多个 entry 入口，使得Web 应用程序更加灵活且易于维护。本文将探讨如何在Webpack 中配置多个 entry 入口。
什么是 entry
在 Webpack 中，entry 是一个指定要打包的应用程序的入口文件。Webpack 会从入口文件开始打包，并遍历依赖树，将依赖的模块打包到一个或多个输出 bundle 中。
单个 entry 入口
在单个 entry 入口的场景下，我们只需要在 webpack.config.js 中指定一个入口文件即可，例如：
-------------- - - ------ ----------------- --- -
多个 entry 入口
在某些情况下，我们需要将应用程序分为多个部分，每个部分都有一个单独的 entry。Webpack 支持多个 entry 入口，使得我们可以将应用程序分割成多个逻辑部分，并分别打包输出。
例如，我们可以在 webpack.config.js 中配置如下多个 entry 入口：
-------------- - -
------ -
---- ---------------
------ -----------------
---
--
---
-在上例中，我们配置了两个 entry 入口：app 和 admin，他们都指向不同的入口文件（app.js 和 admin.js）。Webpack 将会创建两个 bundle，每个 bundle 包含其对应的 entry 入口及其所有依赖项。
配置多个 entry 入口的坑
在配置多个 entry 入口时，需要注意以下点：
1. 生成多个 bundle
每个 entry 入口都会生成一个 bundle 文件，这会增加文件数量和大小。我们需要确保每个 bundle 文件都只包含必要的内容，并考虑采用一些优化技术（如代码分割）来最小化打包后的文件大小。
2. 处理公共模块
各个 entry 入口可能会共享一些模块，我们需要确保这些模块不会被重复打包。Webpack 提供了几种方案：
- 使用 CommonsChunkPlugin 插件将公共模块打包成一个单独的文件。
- 使用 SplitChunksPlugin 插件将代码分割成更小的块，以便更好地实现缓存。
3. 管理 chunk 文件名
在多个 entry 入口的情况下，我们需要管理输出文件的名称。Webpack 可以通过占位符来管理 chunk 的名称，并支持多个入口的 chunk 文件名不能重复。
例如，我们可以在 webpack.config.js 中这样来配置 chunkFileName：
-------------- - -
------ -
---- ---------------
------ -----------------
---
--
------- -
--------- ------------
-------------- --------------------------
---
--
---
-在上例中，我们使用了占位符 [name] 来表示入口文件的名称，占位符 [chunkhash:8] 来表示每个 chunk 文件的 hash 值。Webpack 会在打包时根据入口文件以及代码中的 require/import 语句自动生成文件名，避免文件名重复。
示例代码
假设我们的应用程序有两个部分：app 和 admin，app 部分依赖了 jQuery 库，admin 部分依赖了 Vue.js 库。我们可以这样配置多个 entry 入口：
-------------- - -
------ -
---- ---------------
------ -----------------
--
------- -
--------- ------------
-------------- --------------------------
----- ----------------------- -------
--
------------- -
------------ -
------------ -
------- -
----- -------------------------
----- ----------
------- -----
-
-
-
--
---
-在上例中，我们通过 SplitChunksPlugin 插件将公共的第三方库打包成一个 vendors.js 的文件，并使用占位符管理输出文件名。
app.js 入口文件：
------ - ---- --------- ---------------- -------- ------------------------
admin.js 入口文件：
------ --- ---- ------ ------------------ -------- -----------------
最终输出的 bundle 文件为：
----- -------- ---------- ------------
总结
本文介绍了如何在Webpack 中配置多个 entry 入口，同时也提醒了在配置多个 entry 入口时需要注意的一些坑。多个 entry 入口的配置可以帮助我们更好地管理应用程序，并优化打包后的文件大小和性能。最后，我们也展示了相应配置的实例代码，希望读者可以借此来学习和实践。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b1b96aadd4f0e0ffaecfdf