Webpack Module Federation 导入模块实例重复非单例如何解决

该现象不属于Module Federation框架Bug，是模块导入路径不统一、共享规则未正确配置导致的预期行为。
你排查到的双份__webpack_module_cache__问题，核心原因是：主应用使用相对路径./src/api导入模块时，Webpack会将其识别为本地普通模块，走主应用业务chunk的独立缓存；插件通过host远程别名导入同一模块时，会走MF远程模块解析链路，两个解析路径对应完全独立的缓存key，因此会生成两份互不干扰的模块实例，直接导致全局状态不通、instanceof判断失效的问题。

1. 修正主应用MF配置 #

主应用需要将自身声明为可消费的远程应用，同时为暴露的API模块开启单例模式，参考配置如下：

new ModuleFederationPlugin({
  name: "host",
  // 关键配置：将自身注册为远程模块，指向自身输出的remoteEntry文件
  remotes: {
    host: "host@/remoteEntry.js" // 路径匹配实际部署的remoteEntry访问地址即可
  },
  exposes: {
    ".": "./src/api"
  },
  shared: {
    // 为暴露的API模块强制开启单例模式
    "./src/api": {
      singleton: true,
      requiredVersion: false,
      eager: true // 主应用启动即需使用该模块时开启，避免异步加载时序问题
    }
    // 若需共享react、react-dom等第三方依赖，按相同规则在此处声明单例即可
  }
})

配置完成后，主应用内部所有对该API模块的导入，必须全部替换为和插件侧一致的远程别名写法，禁止再使用相对路径导入：

// 替换前：import {FooBar} from "./src/api";
// 替换后：
import {FooBar} from "host";

只要主应用内存在一处相对路径导入该模块，Webpack就会为该路径单独编译一份模块代码，直接破坏单例逻辑。

2. 修正插件侧MF配置 #

插件侧需要同步声明主应用暴露的模块为单例依赖，参考配置如下：

new ModuleFederationPlugin({
  name: "plugin",
  remotes: {
    host: "host@[主应用实际访问地址]/remoteEntry.js" // 填写主应用可公开访问的remoteEntry地址
  },
  shared: {
    // 声明主应用导出的API模块为单例
    "host/.": {
      singleton: true,
      requiredVersion: false
    }
  }
})

配置生效后，主应用和所有插件导入的API模块会共用MF的共享模块缓存池：

• 模块内维护的全局状态可跨应用/插件正常读写
• 跨上下文创建的类实例，instanceof运算符判断会正常返回true

内容的提问来源于stack exchange，提问作者jpikl