Webpack 5升级内容（二：模块联邦）

重大变化：开发支持

Module Federation模块联邦（联合） 🚩🚩

Module Federation 使 JavaScript 应用得以从另一个 JavaScript 应用中动态地加载代码 —— 同时共享依赖。如果某应用所消费的 federated module联邦模块 没有 federated code联合代码 中所需的依赖，Webpack 将会从 联合构建源中下载缺少的依赖项。

1. 动机

   

   • Module Federation的动机是与多个团队一起开发一个或多个应用程序。

   • 应用程序分为较小的“部分”。 这些可能是前端组件，例如“ Header”或“ Sidebar”组件，也可能是逻辑组件，例如“ Data Fetching Logic”或其他业务逻辑。每个部分都可以由独立的团队开发。

   • 应用程序或其一部分共享其他部分或库。

2. 术语

   • host：在页面加载过程中（当 onLoad 事件被触发）最先被初始化的 webpack 构建；

   • remote：被 “host” 消费“部分”的另一个 webpack 构建；

   • Bidirectional（双向的） hosts：当一个 bundle 或者 webpack build 作为一个 host 或 remote 运行时，它要么消费其他应用，要么被其他应用消费——均发生在运行时(runtime)。

   • container：

     

     • 使用模块联邦，每个"部分"（前端组件、逻辑组件等）将是一个单独的build。 这些构建被编译为“容器Container”。

     • 容器Container可以被应用程序或其他容器引用。

     • 在这种关系中，容器是“remote”，容器的使用者是“host”。 “romote”可以将模块**暴露（exposes）**给“host”。 “host”可以使用此类模块。 它们被称为“远程模块（remote modules）”。

     • 通过使用单独的构建，我们可以获得整个系统的良好构建性能。

3. 简介/概况

   

   上面是模块联邦的概况。

   • 这里显示了模块联邦的两个方面：暴露模块（exposed modules）和共享模块（shared modules）。

   • 容器以异步方式暴露模块。需要先让容器加载/下载你要使用的模块，然后再从容器中使用它们。异步的暴露允许build将每个暴露的模块及其依赖放在单独的文件中。这样，只需要加载使用过的模块，但是容器仍然可以bundle modules。另外，通常，这里使用webpack的分块技术，这使我们可以保持较低的请求和总下载量，从而获得良好的Web性能。

   • 容器的使用者（host）需要能够处理异步加载的暴露模块（remote modules）。

   • 另一个方面，共享模块。容器和应用程序们都可以将共享模块与版本信息一起放入share scope共享范围。他们还能够使用共享范围中的共享模块以及版本要求检查。共享范围将对共享模块进行重复数据删除，该方式可为各方提供版本要求内的共享模块的最高可用版本。

   • 共享模块同样以异步方式进行提供和使用。因此，提供共享模块没有下载成本。仅下载使用/消耗的共享模块。

4. 图示例子讲解module federation

   • 前提：(single build单一构建)application