Discovering Universe 并不是 Webpack 5 官方文档里的独立条目，它更多是社区对这次版本升级所带来能力的一种形象说法。过去 Webpack 只能把本地代码打包成几个 bundle，应用之间共享逻辑通常要借助 npm 包或者全局变量，一旦进入微前端场景，构建边界就成了硬约束。Webpack 5 推出的模块联邦（Module Federation）直接改变了这一局面，它允许一个应用在运行时加载另一个应用的模块，每个构建产物都像宇宙中的星系，彼此独立又能通过远程入口发现对方。这种体验上的突破，被开发者称为 Discovering Universe，也就是“发现宇宙”。
模块联邦：打开微前端的宇宙之门
模块联邦是 Webpack 5 最受关注的新特性，它解决的是多个独立构建之间共享代码的问题。在传统模式下，如果两个前端应用想共用同一个组件，要么把组件发布成 npm 包，要么通过 window 全局变量暴露，前者需要额外的发布流程，后者在依赖版本和加载时机上非常脆弱。模块联邦允许一个构建在运行时暴露某个模块，另一个构建可以动态加载并使用它，不需要重新编译，也不要求两者在同一个仓库中。
实现模块联邦的核心是 ModuleFederationPlugin。一个应用作为远程端（remote），通过 exposes 字段声明对外提供的模块；另一个应用作为宿主端（host），通过 remotes 字段声明要加载的远程地址。远程入口文件通常命名为 remoteEntry.js，在运行时由宿主通过 script 标签动态加载。下面是一个最简单的远程端配置：
// webpack.config.js (remote)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'app_remote',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/Button'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
]
};
宿主端配置则需要通过 remotes 指定远程名称和入口 URL，这样在业务代码中就可以像使用普通模块一样导入远程模块。配置看起来并不复杂：
// webpack.config.js (host)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'app_host',
remotes: {
app_remote: 'app_remote@http://localhost:3001/remoteEntry.js'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
]
};
在宿主代码中，可以使用动态 import 加载远程模块，同时结合 React.lazy 和 Suspense 处理加载状态，这样远程组件的错误边界也能得到控制。模块联邦的 shared 字段尤其重要，它确保 react 和 react-dom 只会实例化一次，避免宿主和远程端出现两个 React 实例导致 hooks 报错。一个典型的用法如下：
import React from 'react';
const RemoteButton = React.lazy(() => import('app_remote/Button'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<RemoteButton />
</React.Suspense>
);
}
模块联邦的优点是显而易见的：它让微前端架构摆脱了 iframe 和中心化网关的束缚，构建产物可以独立部署，团队之间不需要共享代码仓库就能复用组件。但它也有不足，比如远程模块的加载失败需要开发者手动处理，共享依赖的版本协商也会增加复杂度。不过对于大多数中大型项目来说，这种“发现宇宙”式的模块复用能力已经足以改变架构思路。
持久缓存：把构建速度拉上新的轨道
Webpack 4 时代，缓存主要依赖于 cache-loader 或者 hard-source-webpack-plugin，这些方案要么需要额外的 loader 配置，要么在大型项目中稳定性不够。Webpack 5 内置了文件系统级别的持久缓存，通过 cache.type 设置为 filesystem，构建结果和模块依赖关系会被序列化到磁盘，下次构建时可以直接从缓存中恢复，跳过大量的编译和哈希计算工作。
持久缓存的配置非常简单，只需要在 webpack.config.js 中增加 cache 字段。为了让配置变更时缓存自动失效，通常还需要声明 buildDependencies，把配置文件本身加入依赖，这样修改 webpack 配置后缓存会重新生成，而不是继续使用旧缓存。标准的配置如下：
module.exports = {
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename]
}
}
};
实际效果方面，持久缓存对多入口、大型依赖树的构建提速非常明显，二次构建往往能比首次构建快 50% 到 80%。不过要注意，文件系统缓存并不是银弹，如果项目中有大量动态生成的 require 上下文或者使用了一些不兼容的 loader，可能会出现缓存未命中甚至错误。因此升级到 Webpack 5 后，建议先在开发环境开启一段时间，观察构建输出是否有异常，再逐步推广到 CI 和生产构建。
资源模块与其他改进：宇宙中值得关注的星体
Webpack 5 引入了资源模块（Asset Modules），用来替代之前处理静态资源常用的 raw-loader、url-loader 和 file-loader。过去需要为图片、字体、SVG 分别配置多个 loader，现在只需要在 module.rules 中使用 type 字段指定 asset/resource、asset/inline 或 asset 即可。例如：
module.exports = {
module: {
rules: [
{
test: /\.png$/,
type: 'asset/resource'
},
{
test: /\.svg$/,
type: 'asset/inline'
}
]
}
};
除了资源模块，Webpack 5 还带来了更好的 Tree Shaking 能力，支持对模块中的嵌套导出进行更细粒度的删除；同时增加了对 Top Level Await 的实验性支持，让一些异步初始化逻辑写起来更加直观。错误提示也比 Webpack 4 更加友好，特别是在模块解析失败时，会明确指出可能的路径错误或大小写问题。
总体来看，Webpack 5 的这些新特性共同构建了一个更高效、更灵活的模块宇宙。模块联邦打破了应用边界，持久缓存让构建像星际航行一样稳定可靠，资源模块和 Tree Shaking 优化则让产物更轻更干净。对于正在升级构建工具的团队来说，理解并应用这些特性，确实能感受到一次从“地球”到“宇宙”的开发体验跃迁。