微前端架构_J*aScript模块联邦_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

微前端架构_J*aScript模块联邦

2025-11-30

浏览次数：次

返回列表

模块联邦是Webpack 5实现微前端的核心技术，通过exposes和remotes配置在运行时动态共享组件与依赖，支持跨应用按需加载、代码复用和独立部署，适用于大型系统集成、技术栈共存与团队自治场景。

微前端架构_javascript模块联邦

微前端架构中，J*aScript 模块联邦（Module Federation）是 Webpack 5 引入的一项核心技术，它让不同前端应用在运行时动态共享代码成为可能。不同于传统的构建时依赖打包方式，模块联邦允许一个应用在不重新构建的情况下，直接加载另一个应用暴露的组件、函数或状态管理模块。这种方式特别适合大型组织中多个团队独立开发、部署子应用的场景。

什么是模块联邦？

模块联邦通过在 Webpack 配置中定义 exposes 和 remotes，实现跨应用的模块共享：

exposes：指定当前应用对外暴露的模块路径，比如某个 React 组件或工具函数。
remotes：声明要从其他应用加载的远程模块，运行时动态获取。
所有通信基于标准 ES Module，无需额外中间层。

例如，主应用配置 remotes 指向用户中心应用的 remoteEntry.js，就可以直接 import '@user-center/profile' 来使用其组件，就像引用本地模块一样。

如何配置模块联邦？

在 Webpack 5 的配置文件中使用 ModuleFederationPlugin：

主应用（容器）配置：

new ModuleFederationPlugin({
  name: 'hostApp',
  remotes: {
    userCenter: 'userCenter@http://localhost:3001/remoteEntry.js',
    order: 'order@http://localhost:3002/remoteEntry.js'
  },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})

子应用（远程）配置：

new ModuleFederationPlugin({
  name: 'userCenter',
  filename: 'remoteEntry.js',
  exposes: {
    './Profile': './src/components/Profile'
  },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})

配置完成后，主应用可通过 import('userCenter/Profile') 动态加载远程组件，并渲染到指定位置。