如果把你手头的前端工程看作一个小宇宙，那么每一个 JS 模块就是一颗星球，import 语句就是连接星球的轨道，而 Webpack 就是那个负责把混沌物质组织成秩序世界的造物主。Webpack 5 的发布可以看作这位造物主的一次大版本进化，它不再满足于简单地把模块打包到一起，而是开始构建一个更接近“人造宇宙”的运行时体系：应用之间可以互相borrow代码、构建结果可以跨越时间复用、无用代码会被更彻底地湮灭。这篇文章就围绕这套“宇宙观”，逐个拆解 Webpack 5 中最值得关注的几项能力。
模块联邦：让多个应用共享同一个运行时宇宙
模块联邦是 Webpack 5 中最具想象力的特性，它解决的是跨应用代码共享这个老大难问题。在它出现之前，我们如果想让两个独立部署的 SPA 共享一份组件库或工具函数，通常只有几种选择：发布 npm 包然后各自构建、用微前端框架做运行时加载，或者干脆复制粘贴。这些方案要么构建成本高，要么运行时开销大。模块联邦的思路则完全不同：一个应用可以把自身某些模块暴露出去，另一个应用在运行时按需远程加载这些模块，并且双方可以共享同一份依赖实例，避免 React 这类库被加载两次导致报错。
来看一个最小可用的配置示例。宿主应用这样写：
// webpack.config.js（宿主应用）
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ...常规配置省略
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
// 远程应用的模块来自另一个独立部署的站点
remoteApp: 'remoteApp@http://cdn.ipipp.com/remote/remoteEntry.js'
},
shared: {
// 双方共享 react，只加载一份
react: { singleton: true },
'react-dom': { singleton: true }
}
})
]
};远程应用则通过 exposes 把内部模块暴露出去，宿主在业务代码里直接 import('remoteApp/Button') 就能像使用本地模块一样使用远程组件。这套机制的本质是在运行时建立了一条跨应用的模块寻址协议，remoteEntry.js 充当“星门”的角色，声明了远程宇宙里有哪些可访问的模块。需要注意的是，shared 配置里的 singleton 选项非常关键，状态类框架如 React 必须设置单例，否则会出现两个不同实例导致的 hooks 报错。
持久化缓存：让二次构建跨越时间复用
Webpack 5 移除了原本的 cache-loader 方案，直接内置了基于文件系统的持久化缓存，这是对大型项目构建速度的一次质变。它的原理是：把每个模块的编译结果、依赖图信息、resolve 结果等序列化后写到磁盘上的 .cache 目录，下次构建时先校验文件内容的哈希值，没有变化的模块直接跳过编译整个流程，从磁盘恢复缓存即可。对于模块数量上万的中大型项目，二次构建时间往往能从几分钟压缩到十几秒。
配置方式非常简单，在 webpack.config.js 中加上：
module.exports = {
cache: {
type: 'filesystem',
buildDependencies: {
// 配置文件本身变化时让缓存失效
config: [__filename]
},
// 缓存版本号，重大变更时手动升版
version: '2024-production-v1'
}
};这里有两个容易被忽视的细节。第一，buildDependencies 里务必把 webpack 配置文件本身加进去，否则你修改了 loader 配置后，旧的缓存仍然会被复用，产出的结果和预期不一致，这类问题排查起来非常折磨人。第二，如果团队使用 CI 构建，要考虑缓存目录的持久化策略，比如把 node_modules/.cache 目录挂在构建机的固定卷上，或者利用 CI 提供的缓存机制上传下载，否则每次冷启动反而多了写缓存的额外开销。另外配合 output 里的 contenthash，内容不变哈希不变，还能让浏览器的长效缓存真正发挥作用，用户第二次访问几乎零流量下载。
更彻底的 Tree Shaking 与嵌套无用代码湮灭
Webpack 5 对 Tree Shaking 做了深度增强，最直观的一点是支持了嵌套导出的无用代码消除，同时新增了对 CommonJS 的部分分析能力和顶级 await、模块级 this 等语法支持。举个例子，你的工具库里有一个聚合导出文件：
// utils/index.js
export * from './format';
export * from './date';
export * from './validate';
// 业务代码里只用了 format
import { money } from '@/utils';
console.log(money(1234.5));
// Webpack 5 会把 date 和 validate 整条分支摇掉在 Webpack 4 里，这种嵌套的 re-export 场景经常导致整棵导出树无法被摇掉，而 Webpack 5 能够沿着依赖图追溯到叶子模块，把没用到的分支连同副作用一起清除。要让这套机制发挥最大威力，库作者需要在 package.json 中正确声明 sideEffects 字段，明确告诉构建器哪些文件是有副作用的（比如引入了全局样式、修改了原型链）。sideEffects 设为 false 意味着所有未被引用的模块都可以安全删除，但如果某个文件里偷偷执行了 polyfill 注入，就会引发线上故障，所以这个字段一定要基于真实情况填写，不能为了包体好看而一刀切。
除了摇树能力的增强，Webpack 5 还带来了真正的资产模块支持，图片、字体等资源不再需要 file-loader 和 url-loader，直接用 type: 'asset' 内置处理，并且可以按大小阈值自动决定内联为 base64 还是输出独立文件。配合 asset/inline、asset/resource 等细粒度类型，资源管理这条链路也终于被统一进了主宇宙的规则体系里。
升级迁移中需要注意的坑
Webpack 5 停止了对部分老旧特性的支持，迁移前需要做一轮排查。首先，Node.js 版本要求 10.13 以上，低版本直接无法启动。其次，所有 loader 和插件都建议升级到适配 Webpack 5 的版本，一些依赖 webpack 内部 API 的老插件在运行时会直接抛错。另外，polyfill 自动注入被移除是最常见的升级翻车点：Webpack 4 时代，代码里用了 process、Buffer 这些 Node 全局对象时，打包器会悄悄帮你注入 polyfill，而 Webpack 5 出于包体积考虑不再默认注入，如果你引用的第三方库依赖了这些全局变量，要么手动引入对应的 polyfill，要么在 resolve.fallback 里显式配置，否则浏览器端会直接报 process is not defined。
总体来看，Webpack 5 的这一轮升级思路非常清晰：让构建产物像宇宙一样既开放又能自治。模块联邦打通了应用之间的边界，持久化缓存打通了时间维度上的复用，增强的 Tree Shaking 则持续清理着宇宙中的暗物质。如果你还在 Webpack 4 上观望，建议先在一个边缘项目上试水迁移，把缓存和联邦这两块红利吃到手，构建体验的提升会立竿见影。