在微前端架构里，多个独立开发部署的子应用往往需要共用同一套基础库和业务组件。JavaScript的模块联邦（Module Federation）作为Webpack5的核心特性，可以让不同构建输出在浏览器运行时直接共享模块，从而避免重复打包和版本冲突。
什么是模块联邦
模块联邦是一种让多个独立构建的JavaScript应用之间能够动态加载并共享代码的机制。每个应用可以作为一个宿主（host）或者远端（remote），通过暴露（exposes）和引用（remotes）配置，在运行时从其他应用的入口文件获取模块。
基础配置方式
在Webpack5中，我们使用ModuleFederationPlugin来完成配置。下面以两个应用为例，展示如何暴露和引用模块。
远端应用配置
远端应用把自己内部的组件暴露出去，并声明共享的依赖。
// webpack.config.js 远端应用
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button.js'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
]
};
宿主应用配置
宿主应用声明要引用的远端应用地址，并同样共享依赖。
// webpack.config.js 宿主应用
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@https://ipipp.com/remoteEntry.js'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
]
};
在代码中动态使用共享模块
配置完成后，宿主应用可以像引入本地模块一样使用远端暴露的组件。
// hostApp 中的业务代码
import React from 'react';
const RemoteButton = React.lazy(() => import('remoteApp/Button'));
export default function App() {
return (
<div>
<React.Suspense fallback={<div>加载中</div>}>
<RemoteButton />
</React.Suspense>
</div>
);
}
共享依赖的注意事项
- 使用
singleton: true可以避免同一个库被加载多份实例，防止React等框架出现上下文不一致。 - shared字段支持设置版本区间，当两端版本不兼容时，模块联邦会按规则降级或报错。
- 远端入口必须可公开访问，开发阶段可以使用本地服务或者127.0.0.1进行联调。
小结
通过模块联邦，微前端中的各个应用不再需要把react、组件库等重复打进包里，而是在运行时按需拉取。这样既减少了构建体积，也统一了依赖版本，是当下较为主流的微前端资源共享方案。
Module_Federation微前端JavaScript修改时间：2026-07-27 13:06:20