UD5工具箱
模块联邦（Module Federation）
模块联邦是 Webpack 5 引入的一项革命性功能，允许独立构建的 JavaScript 应用在运行时动态共享和加载彼此的模块，而无需重新构建或重新部署。它解决了微前端架构中最核心的代码共享问题，使得团队可以独立开发、独立部署，同时在运行时实现模块的跨应用共享。本工具的所有功能都是围绕模块联邦这一核心概念展开的。
Host 应用（宿主应用）
Host 应用是微前端架构中的入口应用，负责加载和协调各个 Remote 模块。在本工具中，Main Host App 运行在端口 3000，是整个系统的主控方。Host 应用通过 Module Federation 配置中的 remotes 字段声明需要连接的 Remote 应用，并在运行时动态加载它们提供的模块。理解 Host 的角色是掌握模块联邦的第一步。
Remote 应用（远程应用）
Remote 应用是提供共享模块的独立应用。在本工具中，Header Remote（端口 3001）和 Footer Remote（端口 3002）都是 Remote 应用。它们通过 exposes 配置将自身的模块暴露出来，供 Host 应用或其他 Remote 应用在运行时加载使用。Remote 应用可以独立开发和部署，不影响其他应用的正常运行。
Shared Scope（共享作用域）
Shared Scope 是模块联邦中实现依赖共享的核心机制。它维护了一个全局的共享依赖注册表，记录了所有已加载的共享模块及其版本信息。当多个应用共享同一个依赖（如 React 18）时，Shared Scope 会确保全局只加载一份实例，避免重复加载和版本冲突。这是实现 Singleton 模式的技术基础。
Singleton 模式（单例模式）
在模块联邦的上下文中，Singleton 模式指的是共享依赖在全局范围内只存在一个实例。例如，如果 Host 和 Remote 都共享 React，那么在整个应用中只会加载一份 React 代码。这不仅节省了网络带宽和内存资源，更重要的是确保了状态的一致性。如果 React 被加载了两份，会导致 Hook 状态不同步等严重问题。通过 Shared Scope 的版本协商机制，模块联邦能够安全地实现 Singleton 模式。
remoteEntry.js（远程入口文件）
remoteEntry.js 是 Remote 应用构建后生成的入口文件，它包含了模块联邦运行所需的所有元信息，包括该 Remote 应用暴露了哪些模块、使用了哪些共享依赖以及版本信息等。Host 应用通过加载这个文件来获取 Remote 应用的模块信息，进而按需加载具体的模块 Chunk。remoteEntry.js 是 Host 与 Remote 之间通信的桥梁。
Chunk（代码块）
Chunk 是 Webpack 构建后生成的 JavaScript 代码片段。在模块联邦中，每个暴露的模块会被打包成独立的 Chunk，Host 应用在需要时按需下载对应的 Chunk。这种按需加载的机制确保了应用只加载当前需要的代码，避免了不必要的资源浪费，提升了应用的加载性能。
ModuleFederationPlugin（模块联邦插件）
ModuleFederationPlugin 是 Webpack 5 内置的插件，用于配置模块联邦的行为。它提供了 name、filename、exposes、remotes、shared 等配置项，开发者通过这些参数定义模块的暴露、引用和共享规则。本工具的核心功能之一就是根据用户的可视化配置实时生成 ModuleFederationPlugin 的配置代码。
微前端（Micro Frontend）
微前端是一种前端架构模式，将大型前端应用拆分为多个小型、独立开发和部署的应用单元。每个微前端应用可以由不同的团队使用不同的技术栈独立开发，最终在运行时组合成一个完整的用户界面。模块联邦是实现微前端架构的最先进方案之一，它通过运行时模块共享解决了传统微前端方案中的诸多痛点。
exposes（暴露模块）
exposes 是 ModuleFederationPlugin 配置中的一个关键字段，用于定义 Remote 应用要暴露给其他应用的模块列表。通过 exposes，Remote 应用可以选择性地将自身的组件、函数或数据暴露出去，供 Host 应用在运行时加载和使用。合理的 exposes 配置是实现模块共享的前提条件。