webpack module federation 是需 host 与 remote 严格对齐的运行时协作机制，核心在于角色分明、name 唯一、shared 配置精准、remoteentry 可访问且符合规范，三者对齐后组件可如本地模块直接 import 使用。
Webpack 的 Module Federation 不是“开个开关就能互通”的功能，而是一套需要 Host 和 Remote 双方严格对齐的运行时协作机制。它让独立构建、独立部署的前端应用，能在浏览器中按需加载彼此暴露的组件和共享依赖，但成败关键在于配置是否精准。
明确角色：Host 消费，Remote 提供
一个应用不能模糊地“既当 Host 又当 Remote”——必须清晰划分职责：
- Remote 应用通过 exposes 显式导出模块路径，例如：
./Button → ./src/components/Button.jsx - Host 应用通过 remotes 声明远程地址，格式为
remoteName@http://host:port/remoteEntry.js - 双方的 name 必须全局唯一，比如 Remote 设为
uiLib，Host 就不能也叫uiLib，否则运行时注册会冲突
共享依赖必须显式控制实例与时机
React、React DOM 等核心库若未正确共享，会直接导致 Invalid hook call 或上下文丢失：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
-
react 和 react-dom 必须成对配置：
singleton: true+eager: true，确保启动时就加载且全局唯一 -
requiredVersion 是硬性约束，不是范围匹配。设为
'^18.2.0'，但本地装的是18.1.0，Webpack 就会降级使用本地副本，造成双实例 - 工具类库如
lodash-es可设singleton: false，但要注意导出方式是否一致（避免某方用export * as Lodash覆盖命名空间）
确保 remoteEntry.js 可访问且符合规范
Host 加载失败，90% 是卡在这一步，而非代码逻辑问题：
- 访问
http://localhost:3002/remoteEntry.js必须返回 JS 文件（HTTP 200 +Content-Type: application/javascript），不能是 404 或 HTML 页面 - Remote 服务必须开启 CORS，否则浏览器直接拦截请求，控制台报
Cross-Origin Request Blocked - Host 中导入写法要与 exposes 路径完全对应，例如：
import Button from 'uiLib/Button'
不复杂但容易忽略
Module Federation 的本质是运行时模块注册与加载，不是编译期合并。只要 Host 和 Remote 的 name、shared 策略、remoteEntry 地址三者对齐，组件就能像本地模块一样被 import 使用，无需额外封装或适配层。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
