Webpack 5 已经发布了一段时间，但很多团队在升级和使用它的新能力时仍然处于浅尝辄止的状态。事实上，这一代版本带来的不只是常规的性能优化，其中 Module Federation 这项能力被社区形容为牵引前端架构走向新宇宙的关键特性，它从根本上改变了多个应用之间共享代码的方式。本文将围绕模块联邦、持久化缓存等核心特性展开，帮助你真正理解 Webpack 5 的价值所在。
Module Federation：让应用之间真正实现运行时共享
在传统的前端工程体系中，如果多个项目需要复用某个组件库或者工具函数，通常的做法是发布 npm 包，然后各项目分别安装、构建。这种方式的问题在于每个项目都要重复打包同一份代码，版本升级时还需要各项目同步发版，协作成本非常高。Module Federation 的出现就是为了解决这个问题，它允许一个应用在运行时动态加载另一个应用暴露出来的模块，而且这些应用可以是完全独立构建、独立部署的。
理解模块联邦需要先弄清楚两个核心概念：host 和 remote。host 是消费方，负责在运行时去获取远程模块；remote 是提供方，通过 exposes 配置把内部的某些模块暴露出去。一个应用可以同时既是 host 又是 remote，这样就形成了网状的应用联邦结构。下面是一个基础的配置示例：
// remote 应用的 webpack 配置，暴露一个按钮组件
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button.vue'
},
shared: {
vue: { singleton: true }
}
})
]
};上面的配置中，remoteApp 把内部的 Button 组件暴露出去，访问路径是 remoteApp/Button。shared 配置则声明了共享依赖，singleton 设为 true 表示整个页面只会保留一份 vue 实例，这一点在微前端场景下尤为重要，否则多个应用各自携带一份框架代码，不仅体积翻倍，还可能因为实例不统一导致状态管理混乱。
host 侧的配置与之对应，通过 remotes 字段声明远程地址即可。值得注意的是，远程地址可以是写死的 URL，也可以通过 Promise 动态返回，这就为按环境切换、灰度发布等运维手段留出了空间。加载远程模块时使用的是异步语法，配合 import() 动态导入，错误边界和降级逻辑也可以在业务层自行控制。
持久化缓存：构建速度的质的飞跃
Webpack 5 的另一项重大改进是基于文件系统缓存的持久化构建能力。在 Webpack 4 时代，每次构建几乎都是从头开始，大型项目的二次构建动辄需要几分钟。Webpack 5 引入了 cache.type 为 filesystem 的配置项，第一次构建时会把模块处理结果写入磁盘缓存，后续构建时如果文件内容和相关依赖没有变化，就直接复用缓存，跳过大量的解析和转换工作。
// webpack 5 持久化缓存配置
module.exports = {
cache: {
type: 'filesystem',
buildDependencies: {
// 配置文件本身变化时使缓存失效
config: [__filename]
},
cacheDirectory: path.resolve(__dirname, '.webpack_cache')
}
};这里有一个容易被忽视的细节：buildDependencies 的作用是声明哪些文件属于构建本身的依赖。当 webpack 配置文件、babel 配置等内容发生变化时，缓存会自动失效重新编译，避免出现改了配置但产物没更新的诡异问题。实际项目中建议把所有影响编译行为的配置文件都加进去，这是很多团队踩过坑之后总结出的经验。
从实测数据来看，冷构建耗时越长的项目，持久化缓存带来的收益越明显。一个中等规模的 Vue 项目，冷构建需要四十秒以上，开启缓存后热构建往往能压缩到几秒。对于持续集成环境，可以把缓存目录上传到流水线缓存中复用，进一步缩短发布时间。需要注意的是缓存目录会占用不小的磁盘空间，团队应根据实际情况设置清理策略。
其他值得关注的改进与升级注意事项
除了上述两大特性，Webpack 5 在细节上还有不少改进。Tree Shaking 变得更加智能，支持嵌套的无用属性剔除和模块内部的副作用分析，产物体积进一步下降；长期不维护的 Node.js polyfill 不再默认注入，改为按需引入，开发者需要什么就自己装什么，虽然初期会多一些报错，但换来了更干净的产物和更明确的依赖关系。此外还有 Asset Modules，用内置的 asset/resource、asset/inline 等类型取代了 file-loader 和 url-loader，配置更简洁。
升级过程中有几个高频问题需要提前评估。首先是插件生态的兼容性，一些老旧的 loader 和插件没有跟进 Webpack 5 的 API 变化，升级前应当排查 package.json 中的依赖清单；其次，代码中如果直接依赖了 process、Buffer 等全局变量，在没有自行引入 polyfill 的情况下会在浏览器端直接报错；最后，如果项目还在使用 webpack-dev-server 的旧版本，需要同步升级到 4.x 以上，配置项中的 contentBase 改成了 static，迁移时要一并调整。
总体来看，Webpack 5 的模块联邦为微前端提供了一种比 iframe 和 npm 包分发都更优雅的方案，持久化缓存则实实在在降低了大型工程的构建成本。如果你的项目正面临多团队协作下的代码复用难题，或者构建速度已经成为研发效率的瓶颈，那么认真评估并落地 Webpack 5 会是一个值得投入的方向。
Webpack 5Module Federation持久化缓存修改时间：2026-09-07 14:04:38