Webpack-第 9 篇：Webpack 5 的模块联邦（Module Federation）

Webpack-第 9 篇：Webpack 5 的模块联邦（Module Federation）

一、模块联邦概念与原理

（一）概念

模块联邦（Module Federation）是 Webpack 5 引入的一项强大特性，它允许在不同的 Webpack 构建之间共享代码模块，打破了传统的单仓库构建模式。借助模块联邦，多个独立开发和部署的前端应用（微前端）可以动态地加载彼此的模块，实现代码的复用和共享，从而构建出更加灵活、可扩展的前端架构。

（二）原理

模块联邦的核心原理基于远程模块的动态加载。每个应用可以作为一个主机（Host）应用，也可以作为一个远程（Remote）应用。远程应用会将自己的某些模块暴露出来，生成一个远程入口文件（通常命名为 remoteEntry.js），该文件包含了远程应用暴露模块的元信息和加载逻辑。主机应用则可以通过配置远程应用的地址，在运行时动态加载这些远程模块。

具体来说，当主机应用需要使用远程模块时，会先加载远程应用的 remoteEntry.js 文件，然后根据元信息动态加载所需的模块。这种方式使得各个应用之间的耦合度降低，每个应用可以独立开发、测试和部署。

二、构建微前端架构实践

（一）创建远程应用

1. 初始化项目