当前位置：首页 > 文章列表 > 文章 > 前端 > 模块联邦实现微前端共享方案

模块联邦实现微前端共享方案

2026-03-06 09:30:41 0浏览收藏

模块联邦作为Webpack 5原生支持的微前端核心技术，彻底改变了传统前端应用间代码共享的方式——它让不同团队独立构建、部署的应用能在运行时动态暴露、按需加载彼此的组件与逻辑，既避免了重复打包和版本冲突，又通过shared配置实现React等核心依赖的单例复用与性能优化；无论是多团队协同开发、遗留系统渐进式迁移，还是插件化平台与多租户定制场景，模块联邦都以低侵入、高灵活性和强扩展性，为现代复杂前端架构提供了高效可靠的集成解决方案。

JavaScript模块联邦_微前端共享方案

微前端架构中，模块联邦（Module Federation）是 Webpack 5 提出的一种革命性方案，它让不同前端应用在运行时动态共享代码成为可能。不同于传统的依赖打包或组件库发布模式，模块联邦允许一个构建好的应用直接暴露模块，被另一个应用按需加载和使用，真正实现跨应用的代码复用和独立部署。

什么是模块联邦？

模块联邦是 Webpack 5 内置的一项功能，核心思想是“将应用变成可被引用的模块仓库”。每个微前端应用可以：

暴露（expose）自己的组件、工具函数或状态管理模块
远程（remote）加载其他应用暴露的模块
在不重新构建自身的情况下使用最新版本的远程模块

这种机制打破了传统打包时静态依赖的限制，实现了真正的运行时集成。

基本配置示例

假设我们有两个项目：一个是主机应用（host），另一个是远程组件库（remote）。以下是关键配置片段。

远程应用（Remote App）配置：

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

主机应用（Host App）配置：

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

配置完成后，主机应用就可以像导入本地模块一样使用远程组件：

import Button from 'remoteApp/Button';

function App() {
return

;
}