如何用Webpack的Module Federation实现微前端？

答案：Webpack Module Federation 实现微前端的核心是通过 Host 应用动态加载 Remote 应用暴露的模块，并共享依赖避免重复加载。1. 角色包括 Host（主应用）、Remote（子应用）和 Shared Modules（如 React）。2. Remote 配置中使用 ModuleFederationPlugin 暴露组件，设置 name、exposes 和 shared。3. Host 配置 remotes 引入远程应用地址，并同步 shared 依赖。4. Host 可直接 import 远程模块，运行时自动加载 remoteEntry.js。需确保网络可达、配置一致，尤其注意 shared 版本和路径正确性。

使用 Webpack 的 Module Federation 实现微前端，核心在于让多个独立的前端应用在运行时共享代码和组件。它允许一个应用（宿主）动态加载另一个应用（远程）暴露的模块，实现页面级别的集成，而无需构建时合并代码。

1. 基本概念与角色划分

Module Federation 中有三种主要角色：

• Host（容器应用）：主应用，负责加载其他微前端应用。
• Remote（远程应用）：被加载的子应用，暴露自己的模块供 Host 使用。
• Shared Modules（共享依赖）：如 React、Vue、Lodash 等，避免重复加载。

通过配置，Remote 暴露入口，Host 动态引用，实现松耦合集成。

2. Remote 应用配置（子应用）

在子应用的 webpack 配置中使用 ModuleFederationPlugin 暴露模块：

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

说明：

小微助手

微信推出的一款专注于提升桌面效率的助手型AI工具

47

查看详情

• name 是远程应用唯一标识。
• exposes 定义哪些模块可被外部加载。
• shared 声明共享依赖，singleton: true 确保只加载一份实例。

3. Host 应用配置（主应用）

主应用引入远程模块，并声明自己可能被共享的依赖：

关键点：

• remotes 指定远程应用的名称和 entry 地址。
• URL 必须能访问到 remoteEntry.js 文件。
• shared 配置需与 Remote 保持一致，避免版本冲突。

4. 在 Host 中使用远程组件

配置完成后，Host 可像导入本地模块一样使用远程模块：

Webpack 会在运行时自动下载 remoteEntry.js 并解析所需模块。

基本上就这些。只要网络可达、配置匹配，就能实现跨应用模块调用。注意开发时子应用需独立启动并提供 remoteEntry.js，生产环境部署时也要确保资源路径正确。不复杂但容易忽略细节，比如 shared 版本对齐或远程地址拼写错误。

以上就是如何用Webpack的Module Federation实现微前端？的详细内容，更多请关注php中文网其它相关文章！