微前端架构_JavaScript模块联邦-js教程-PHP中文网

微前端架构_JavaScript模块联邦

幻影之瞳

发布： 2025-11-30 13:47:03

原创

647人浏览过

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

微前端架构_javascript模块联邦

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

什么是模块联邦？

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

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

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

如何配置模块联邦？

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

立即学习“Java免费学习笔记（深入）”；

果酱小店开源电商系统源码

果酱小店开源电商系统源码是一个模块化的 B2C 社交电商系统，基于当下最热门的开源技术进行构建，后端基于 PHP 框架 Laravel，前端基于微信小程序，vue.js，实现完全的前后端分离。

查看详情

主应用（容器）配置：

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') 动态加载远程组件，并渲染到指定位置。