多Git仓库场景下Webpack Module Federation使用示例及配置问询

多Git仓库实现方案 #

现有单仓示例的核心只是为了方便本地调试和统一管理，模块联邦的运行时逻辑本身和代码仓库架构完全无关，你不需要特意找对应多仓的现成示例，按以下逻辑调整即可：

• 每一个作为远端（remote）的代码仓单独维护自己的webpack配置，独立配置ModuleFederationPlugin的name、exposes、filename等核心字段，单独执行构建产出可被远程加载的资源包，将产物部署到对应的静态资源服务。
• 作为宿主（host）的代码仓不需要和remote仓放在同一代码库，只需要在自己的ModuleFederationPlugin配置的remotes字段中，填写对应remote仓的产物访问地址即可。
• 本地开发阶段只需要同时启动多个仓的本地开发服务，将remotes地址替换为对应本地服务的地址即可调试，生产环境再替换为线上部署地址。

remotes配置相关疑问解答 #

构建时可以确定remotes地址的场景下，直接填写URL不属于过度配置，反而是最常规的实现方式：
模块联邦本身就是运行时加载的设计，哪怕构建阶段就可以确定remote的地址，运行时依然需要从对应地址拉取remote的入口资源，直接填写静态URL是实现成本最低、维护逻辑最简单的方案。
如果不想硬编码地址，也可以通过构建环境变量注入的方式，在webpack配置中通过process.env类的变量读取对应地址，构建时自动替换为对应环境的配置即可，和直接填写URL本质上没有差异。 #

内容的提问来源于stack exchange，提问作者Marco Faustinelli