UD5工具箱
什么是模块联邦（Module Federation）？
模块联邦是 Webpack 5 引入的一项核心功能，它允许独立构建的 JavaScript 应用在运行时动态共享代码模块。与传统的 npm 包共享方式不同，模块联邦不需要将代码发布到 npm 仓库，也不需要在构建时将共享代码打包到应用中。它通过运行时的动态加载机制，实现了跨应用的模块共享。这使得多个团队可以独立开发和部署各自的前端应用，同时在运行时共享组件、工具函数和状态管理模块。模块联邦是目前微前端架构中最先进、最灵活的代码共享方案。
Host 应用和 Remote 应用有什么区别？
Host 应用（宿主应用）是微前端架构的入口和协调者，它负责加载和渲染各个 Remote 应用提供的模块。在本工具中，Main Host App（端口 3000）就是 Host 应用。Remote 应用（远程应用）是提供共享模块的独立应用，它们通过 exposes 配置将自身的模块暴露出来供 Host 使用。例如，Header Remote（端口 3001）和 Footer Remote（端口 3002）都是 Remote 应用。一个应用既可以是 Host，也可以同时是 Remote，这种灵活性使得模块联邦能够适应各种复杂的架构需求。
Shared Scope 是什么？它如何实现 Singleton 模式？
Shared Scope（共享作用域）是模块联邦中管理共享依赖的核心机制。当多个应用声明了相同的共享依赖（如 React 18.2.0）时，Shared Scope 会在运行时进行版本协商：如果各应用使用的版本兼容，则全局只加载一份依赖实例（Singleton 模式）；如果版本不兼容，则各自加载独立的实例。Singleton 模式确保了像 React 这样的库在整个应用中只有一个实例，避免了 Hook 状态不同步等严重问题。在本工具的可视化界面中，你可以直观地看到 Shared Scope 的工作过程。
模块联邦与传统的微前端方案（如 qiankun、single-spa）有什么区别？
传统的微前端方案（如 qiankun 和 single-spa）主要通过 iframe 或 JavaScript 沙箱来实现应用隔离和加载，这种方式存在性能开销大、通信复杂、样式隔离困难等问题。模块联邦是 Webpack 5 原生支持的方案，它在构建层面实现了模块的运行时共享，具有以下优势：无需 iframe，性能更好；共享依赖通过 Shared Scope 实现，避免重复加载；与 Webpack 生态深度集成，配置更灵活；支持真正的模块级共享，而非应用级嵌套。模块联邦可以与传统微前端方案结合使用，也可以独立使用。
remoteEntry.js 文件的作用是什么？
remoteEntry.js 是 Remote 应用在构建后生成的入口文件，它是 Host 应用连接 Remote 应用的桥梁。这个文件包含了 Remote 应用暴露的所有模块的映射关系、共享依赖的版本信息以及加载所需的基础代码。当 Host 应用需要使用 Remote 模块时，首先会加载 remoteEntry.js 文件，获取模块信息，然后根据需要按需下载具体的 Chunk 文件。remoteEntry.js 的文件名可以通过 ModuleFederationPlugin 的 filename 配置项自定义，默认名称为 remoteEntry.js。
如何处理模块联邦中的版本冲突问题？
版本冲突是模块联邦中需要特别关注的问题。当 Host 和 Remote 使用同一依赖的不同版本时，Shared Scope 会根据版本兼容性进行协商。如果版本满足 semver 兼容规则（如 React 18.1.0 和 React 18.2.0），则使用更高版本的实例；如果不兼容（如 React 17 和 React 18），则各自加载独立的实例。在配置 shared 时，可以通过设置 requiredVersion、singleton、strict 等参数来控制版本协商行为。建议团队统一核心依赖的版本范围，并在 CI 流程中加入版本检查，从源头减少版本冲突的发生。
模块联邦是否只能用于 Webpack 5 项目？
模块联邦最初是作为 Webpack 5 的内置功能推出的，但随着技术的发展，其他构建工具也开始支持类似的功能。Vite 社区有 vite-plugin-federation 插件，Rspack 作为 Webpack 的 Rust 替代品也原生支持 Module Federation。此外，Module Federation 2.0（又称 Module Federation Enhanced）进一步扩展了功能，支持运行时类型提示、声明式远程类型等高级特性。不过，Webpack 5 仍然是模块联邦最成熟、生态最完善的支持平台，建议新项目优先选择 Webpack 5 或 Rspack 来使用模块联邦。
本工具生成的 Webpack 配置可以直接用于生产环境吗？
本工具生成的 Webpack ModuleFederationPlugin 配置代码遵循标准的配置格式，可以作为生产环境配置的基础。但需要注意，生产环境的配置还需要考虑以下事项：安全性方面，需要确保 Remote 应用的来源可信，避免加载恶意模块；性能方面，需要合理配置共享依赖的版本范围和缓存策略；稳定性方面，需要添加错误处理和降级方案，确保 Remote 应用不可用时 Host 应用仍能正常运行。建议将本工具生成的配置作为起点，根据实际项目需求进行调整和优化后再部署到生产环境。