Webpack模块联邦需宿主与远程协同配置：宿主须正确声明remotes、共享依赖设singleton/eager、异步加载；远程须暴露模块、输出remoteEntry.js、shared镜像对齐；TS类型需手动声明，开发时远程服务必须可达且跨域允许。
Webpack 模块联邦（Module Federation）不是“加个插件就能跑”的黑盒功能，而是需要宿主（Host）和远程（Remote）两端协同配置的运行时集成机制。关键在于角色清晰、共享一致、加载可控——漏掉任一环节，轻则类型报错、组件白屏，重则 React 多实例冲突或热更新失效。
宿主应用：声明远程并安全加载
宿主是协调中心，负责拉取、初始化并渲染远程模块：
-
remotes 配置必须带完整 URL：格式为
"remoteApp@http://localhost:3001/remoteEntry.js"，名称（remoteApp）需与远程端name完全一致；本地开发建议用固定端口（如 3001），避免跨域拦截 -
共享依赖要显式对齐：React、React DOM 等必须设
singleton: true和eager: true，确保只加载一次且提前初始化，防止 hooks 报错 -
加载必须异步 + 懒加载：用
React.lazy(() => import('remoteApp/Button'))，配合<Suspense fallback="...">处理加载态；不要直接import，否则构建时会失败
远程应用：暴露模块并输出标准入口
远程是能力提供方，核心是让模块可被发现、可被解析、可被执行：
-
exposes 路径要映射真实文件：例如
"./Button": "./src/components/Button.tsx"，支持 TSX 直接导出，但路径不能含别名（如@/components），需用相对或绝对路径 -
filename 必须是 remoteEntry.js：这是宿主唯一识别的入口文件名，不可更改；同时
output.publicPath要设为远程服务地址（如"http://localhost:3001/"），否则资源加载 404 -
shared 配置需与宿主镜像：不仅字段一致，
eager: true也必须启用，否则远程组件内 React 初始化晚于宿主，触发 “Invalid hook call”
TypeScript 类型不自动传递，必须手动补全
Webpack 不生成远程模块的类型定义，IDE 无提示、tsc 不校验，属于高频踩坑点：
立即学习“Java免费学习笔记（深入）”；
-
声明文件路径建议统一：如
@types/remoteApp/Button.d.ts，便于团队维护 -
declare module 名称必须匹配 import 路径：若写
import Button from 'remoteApp/Button'，则声明必须是declare module 'remoteApp/Button' -
类型需覆盖导出形式：函数组件写
const Button: React.FC<{label: string}>；默认导出对象需用export default显式标注
开发联调与构建注意事项
模块联邦高度依赖运行时环境，本地调试和上线部署有明确约束：
-
远程服务必须可达：宿主 devServer 无法代理
http://localhost:3001/remoteEntry.js，需确保远程已启动且端口开放；跨域问题可在远程devServer.headers中加"Access-Control-Allow-Origin": "*" -
类型检查别阻塞 HMR：推荐用
fork-ts-checker-webpack-plugin将类型检查分离到子进程，避免保存后热更新卡住 - 生产环境 remoteEntry.js 必须静态可访问：部署时确保该文件在 CDN 或静态服务器根路径下可直连，路径不能被路由规则拦截
