typescript 中用 webpack 实现多子项目协同构建的核心是模块联邦，它支持各子项目独立编译、运行时按需加载并保持类型安全；需配置 host/remote 角色、exposes/sharing、ts 解析与声明文件，并通过公共类型包或路径映射统一类型。
TypeScript 中用 Webpack 实现多个子项目协同构建，核心是模块联邦（Module Federation）——Webpack 5 原生支持的微前端协作机制。它不依赖构建时合并代码，而是让各子项目独立编译、运行时按需加载，同时保持 TypeScript 类型安全。
启用模块联邦基础配置
每个子项目需明确自身角色：宿主（Host）或远程（Remote）。以 Remote 项目为例：
- 在 webpack.config.js 中引入
ModuleFederationPlugin - 通过
exposes暴露可被其他项目引用的模块，如"./Button": "./src/components/Button.tsx" - 用
shared声明跨项目复用的依赖（如react、react-dom），避免重复打包 - 确保
resolve.extensions包含['.ts', '.tsx', '.js']，使 Webpack 正确解析 TS 文件
宿主项目动态导入并类型校验
Host 项目通过动态 import() 加载 Remote 模块，Webpack 会自动处理远程入口（如 http://localhost:3001/remoteEntry.js）：
- 导入语句写法：
import("remoteApp/Button").then(({ Button }) => {...}) - 为保障类型安全，需手动创建
types/remote-app.d.ts声明文件，导出组件接口和类型 - TS 编译器会据此检查 props 类型、返回值等，错误在编码阶段即可捕获
统一类型与构建一致性
多子项目间类型共享不能靠复制粘贴，推荐以下方式：
- 抽离公共类型到独立 npm 包（如
@myorg/types），各项目作为依赖安装 - 或使用 TypeScript 的
path mapping+baseUrl，配合 Webpack 的resolve.alias指向统一types/目录 - 所有子项目的
tsconfig.json应启用"composite": true和"incremental": true，支持跨项目增量编译
开发与调试协同优化
本地联调时，各子项目可独立启动，但需注意端口与 CORS 配置：
- Remote 项目 devServer 设
port: 3001，Host 设port: 3000，并在 Host 的devServer.proxy中代理 Remote 资源（或直接禁用 CORS） - 启用
hot: true和import.meta.hotAPI，实现 Remote 组件变更后 Host 页面局部刷新 - 搭配
fork-ts-checker-webpack-plugin分离类型检查，避免一个子项目类型报错阻塞整个构建流
