Webpack Module Federation中需严格区分宿主与远程的shared配置：宿主须以对象形式声明singleton和requiredVersion，远程需完全一致匹配；私有模块可通过exposes+shared注册或动态import实现共享。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在Webpack Module Federation中正确配置共享模块，避免React重复实例、样式错乱或运行时Module not found错误，必须严格区分宿主与远程应用的shared配置逻辑，且shared对象不能仅声明库名。
宿主应用（Host）中声明共享依赖
在主应用的webpack.config.js中，找到ModuleFederationPlugin配置项，在shared字段内按需声明第三方库。
写法必须是对象形式，不能只写字符串：例如shared: ["react", "react-dom"]是无效的，会导致singleton失效。
正确写法是为每个库显式指定singleton: true和requiredVersion：
立即学习“前端免费学习笔记（深入）”；
shared: { react: { singleton: true, requiredVersion: "^18.2.0" }, "react-dom": { singleton: true, requiredVersion: "^18.2.0" }, lodash: { singleton: false, eager: true } }
【requiredVersion必须与宿主应用node_modules中实际安装的版本兼容】。若宿主装的是react@18.3.1，但写成requiredVersion: "^17.0.0"，远程应用加载时会因版本不匹配而降级加载另一份React，破坏单例。
远程应用（Remote）中复用宿主共享库
远程应用无需重复打包shared库，只需在自己的shared配置中声明相同库名，并设singleton: true即可自动桥接宿主提供的实例。
远程配置中的shared字段必须与宿主完全一致——包括键名大小写、嵌套结构、requiredVersion值。
例如宿主shared中写了"react-dom"（带短横线），远程就不能简写为reactdom或reactDom，否则Webpack无法匹配，将独立打包两份react-dom。
这一步不做校验，出错时仅表现为控制台警告“Multiple instances of React”或组件状态丢失，排查成本极高。
动态共享私有工具模块
方法一：通过exposes暴露内部工具函数，再在shared中将其注册为“伪依赖”
在远程应用webpack.config.js中：
① 先在exposes中定义路径：exposes: { "./utils": "./src/utils/index.ts" }
② 再在shared中添加同名条目：shared: { "./utils": { singleton: true, import: "./src/utils/index.ts", shareKey: "./utils", shareScope: "default" } }
方法二：在宿主中直接import()远程工具模块，绕过shared机制
在宿主代码中使用动态导入：const { formatDate } = await import("remote-app/utils");
该方式不依赖shared配置，适用于一次性调用、无状态工具函数，但无法享受tree-shaking和类型推导优势。
