Webpack 5 的模块联邦让多个独立构建的应用可以共享代码，但实际开发中经常遇到远程模块还没就绪、或者本地网络访问受限的情况。Feigned Universe 假装宇宙就是针对这种缺口提出的一个实验性特性，它允许开发者在编译阶段用虚拟模块代替真实的远程依赖，让构建过程不中断，同时保留完整的依赖关系和优化信息。这个特性目前还没有进入正式文档，但已经被一些大型微前端项目用在本地开发和持续集成环节。
一、从模块联邦的缺口说起：为什么需要假装宇宙
模块联邦解决了微前端架构下的代码共享难题，但它的前提是远程入口文件必须可访问。一旦某个远程服务在开发时没有启动、或者因为网络策略无法从本地访问，整个构建过程就会因为缺少远程模块而报错。传统的做法是启动所有依赖的微应用，或者手动修改构建配置跳过这些模块，但前者会增加开发者的负担，后者会破坏生产构建的完整性。
Feigned Universe 假装宇宙的思路是：在 Webpack 的解析阶段插入一层虚拟模块图。当解析器遇到一个配置好的远程模块标识时，不会直接去请求真实的远程入口，而是读取本地定义的接口描述和模拟实现。这样一来，依赖分析、代码分割、tree shaking 等优化仍然可以照常执行，构建产物的资源清单也会包含这些未来的远程模块，只是在运行时才会去真实地址加载。
这个机制和 mock 数据有点相似，但 mock 通常发生在业务代码层面，而 Feigned Universe 作用于模块系统层面。它不只是返回一个假的对象，而是完整模拟模块的导出结构、异步边界和共享依赖，让 Webpack 认为这些模块真实存在。因此它能更好地保持构建产物的一致性，避免因为临时注释掉远程依赖而导致 chunk 拆分策略发生变化。
二、核心机制：虚拟模块图与编译期占位
Feigned Universe 的内部实现可以拆成三个步骤。第一步是扫描配置文件中声明的远程模块标识，例如 app_header、app_sidebar 这样的名称，以及它们对应的本地模拟文件路径。第二步是生成虚拟模块记录，把这些记录注入到 Webpack 的模块图中，替换掉原本需要网络请求的远程入口。第三步是改写运行时的加载函数，在浏览器端根据环境变量决定是加载真实远程模块还是使用本地模拟结果。
虚拟模块图和普通的模块图在数据结构上完全一致，都包含模块 ID、依赖列表、导出信息以及 chunk 分组。这意味着后续的优化器、缓存系统和 tree shaking 逻辑不需要做任何特殊处理，它们看到的就是一个完整的依赖图。这也是 Feigned Universe 区别于简单 mock 工具的关键点：它不是在业务代码里替换函数，而是在构建系统的底层提供一种透明的替换机制。
下面是一个简化的虚拟模块定义示例，它描述了远程模块的导出结构以及本地模拟实现的位置：
// feigned.modules.js
module.exports = {
'app_header': {
remoteUrl: 'http://localhost:3002/remoteEntry.js',
localMock: './mocks/header.js',
namedExports: ['Title', 'Logo', 'UserMenu'],
},
'app_sidebar': {
remoteUrl: 'http://localhost:3003/remoteEntry.js',
localMock: './mocks/sidebar.js',
namedExports: ['NavList', 'CollapseButton'],
},
};构建时，Webpack 会读取这个文件，为 app_header 和 app_sidebar 创建虚拟模块。如果当前环境变量设置为 local，那么运行时加载函数会直接请求本地 mock 文件；如果设置为 production，则请求真实的远程入口。这样开发者就可以在本地无远程服务的情况下完成页面集成调试，而生产构建仍然指向真实地址。
三、配置示例：在微前端项目中启用 Feigned Universe
要在项目中使用 Feigned Universe，首先需要安装对应的实验性插件。虽然目前还没有发布到 npm 主仓库，但可以通过 Webpack 的实验性分支获取。配置方式与 Module Federation 插件类似，在 plugins 数组中添加 FeignedUniversePlugin 实例，并通过 remotes 字段指定需要模拟的远程模块。
以下是一个完整的 Webpack 配置示例，它同时启用了 Module Federation 和 Feigned Universe：
const { ModuleFederationPlugin } = require('webpack').container;
const FeignedUniversePlugin = require('webpack-feigned-universe');
module.exports = {
entry: './src/index.js',
mode: 'development',
plugins: [
new ModuleFederationPlugin({
name: 'host_app',
remotes: {
app_header: 'app_header@http://localhost:3002/remoteEntry.js',
app_sidebar: 'app_sidebar@http://localhost:3003/remoteEntry.js',
},
}),
new FeignedUniversePlugin({
remotes: ['app_header', 'app_sidebar'],
mockDirectory: path.resolve(__dirname, 'mocks'),
enableInProduction: false,
}),
],
};在这个配置中，FeignedUniversePlugin 会读取 mockDirectory 下与远程模块同名的文件，例如 mocks/app_header.js 和 mocks/app_sidebar.js。当 enableInProduction 为 false 时，生产构建会忽略虚拟模块，直接使用真实的远程入口；开发构建则会优先使用本地模拟文件。这种双模式设计既保证了开发体验，又不影响线上产物的真实性。
需要注意的是，本地模拟文件需要完整复刻远程模块的导出结构。如果远程模块的导出发生了变化，而本地 mock 没有同步更新，构建虽然可以通过，但运行时可能会出现 undefined 错误。建议在团队内部维护一份接口契约，或者使用 TypeScript 声明文件来约束 mock 模块的形状。
四、限制与最佳实践
Feigned Universe 并不是银弹，它目前还存在一些明显的限制。第一，虚拟模块图只影响构建阶段的依赖分析和优化，无法模拟远程模块的运行时行为。如果远程模块内部有复杂的异步加载、全局状态或跨模块通信，本地 mock 需要额外实现这些逻辑，否则集成测试可能会漏掉问题。第二，该特性目前还不支持动态远程地址，所有需要模拟的模块都必须在配置中静态声明，这对于运行时动态拼接 remoteUrl 的项目来说不太友好。
从实践角度来看，Feigned Universe 最适合用在两个场景：一是本地开发时不想启动全部微服务，只想快速验证宿主应用与远程模块的交互；二是在 CI 环境中提前构建完整的资源清单，用于性能分析和缓存策略预演。对于生产构建，建议关闭该特性，确保产物只依赖真实的远程入口。
另一个值得关注的点是缓存。由于虚拟模块图改变了模块 ID 和 chunk 哈希，如果开发环境和生产环境使用了不同的模式，缓存的 key 需要做隔离，否则可能出现构建产物错误命中缓存的问题。可以使用 Webpack 的 cache.buildDependencies 配置项，将 mock 文件路径和配置文件本身加入缓存依赖，这样当 mock 内容变化时缓存会自动失效。
总的来说，Feigned Universe 假装宇宙为模块联邦的开发流程提供了一个巧妙的补丁。它用编译期的虚拟模块图模拟了一个完整的依赖宇宙，让构建系统在远程模块缺席的情况下依然能够做出正确的优化决策。虽然它还不是官方稳定特性，但其思路对于理解 Webpack 的模块解析机制和微前端工程化都有很大的参考价值。
Webpack 5Feigned UniverseModule Federation修改时间：2026-08-23 13:23:53