UD5工具箱
操作步骤
步骤一：了解微前端架构概览
打开工具页面后，首先观察页面顶部的微前端架构可视化区域。这里展示了三个核心组件：Main Host App（主应用，端口 3000）、Header Remote（头部远程模块，端口 3001）和 Footer Remote（底部远程模块，端口 3002）。Host 应用是整个微前端架构的入口，负责加载和协调各个 Remote 模块。Remote 应用则提供独立的 UI 组件或业务逻辑，通过模块联邦暴露给 Host 使用。花几分钟时间理解这三个组件之间的关系，为后续的配置操作打好基础。
步骤二：配置应用角色与参数
进入应用配置面板，首先选择你要模拟的应用角色。如果你选择 Host 角色，则需要配置要连接的 Remote 应用地址；如果你选择 Remote 角色，则需要配置要暴露给 Host 的模块。接着设置端口号，确保不同应用使用不同的端口以避免冲突。最后选择要共享的依赖项（如 React、React DOM 等），这些共享依赖将通过 Shared Scope 机制实现单例模式。每一步配置都会在右侧的 Webpack 配置生成区域实时更新。
步骤三：查看生成的 Webpack 配置
在配置面板下方，工具会根据你的选择实时生成 Webpack ModuleFederationPlugin 的完整配置代码。仔细阅读生成的配置，关注以下几个关键字段：name 定义了应用的唯一标识，filename 指定了远程入口文件的名称（通常为 remoteEntry.js），exposes 列出了暴露给其他应用的模块，remotes 定义了需要连接的远程应用，shared 指定了共享依赖及其版本配置。理解这些字段的含义，是掌握模块联邦配置的关键。你可以直接复制这段配置到自己项目的 webpack.config.js 中使用。
步骤四：观察模块加载流程
点击模块加载流程演示区域的「开始演示」按钮，工具将自动演示模块联邦的三步加载过程。第一步 Host 请求：Host 应用检测到需要使用 Remote 模块，向 Remote 应用发起加载请求；第二步下载 Chunk：Remote 应用响应请求，Host 下载所需的 JavaScript Chunk 文件（即远程模块的代码片段）；第三步解析渲染：Host 应用解析下载的 Chunk，执行其中的代码，并将模块渲染到对应的页面位置。观察整个流程，理解模块在运行时是如何从 Remote 应用动态加载到 Host 应用中的。
步骤五：分析运行日志
在运行日志区域，你可以看到模块联邦运行过程中产生的所有事件记录。日志按时间顺序排列，每条记录包含了事件类型、涉及的模块名称、时间戳等信息。重点关注以下几类日志：Shared Scope 初始化日志，显示共享依赖的版本协商过程；模块加载日志，记录了每个模块的请求和加载状态；错误日志，展示了可能出现的版本冲突或加载失败的情况。通过分析运行日志，你可以更深入地理解模块联邦的内部工作机制。
步骤六：查阅常见问题解答
在学习过程中，如果遇到不理解的概念或遇到配置问题，可以查看页面底部的常见问题解答区域。这里收录了关于模块联邦的核心问题，包括基本概念解释、Host 与 Remote 的区别、Shared Scope 的工作原理、与传统微前端方案的对比、remoteEntry.js 的作用以及版本冲突的处理策略等。建议通读一遍所有问题和答案，建立对模块联邦的全面认知。如果有未覆盖的问题，可以查阅 Webpack 官方文档获取更多信息。
步骤七：动手实践配置
在充分理解了模块联邦的基本概念和配置方法后，尝试修改配置面板中的各项参数，观察它们对 Webpack 配置和运行行为的影响。例如，尝试将一个 Remote 模块从 Shared 依赖改为非 Shared 依赖，观察运行日志中是否出现了重复加载的情况；尝试修改暴露的模块路径，观察 Host 应用是否能正确加载。通过反复的动手实践，你将逐渐掌握模块联邦的配置技巧和最佳实践，为在实际项目中应用 Module Federation 做好充分准备。