Webpack 5 的发布可以说是一次系统性的重构，官方把它内部的大量模块进行了重新梳理，让整个构建体系更加统一和规整。对于开发者来说，最直观的感受就是构建速度变快了、配置变简单了、一些以前必须借助第三方插件才能实现的能力现在原生支持了。这篇文章就从持久化缓存、模块联邦、资源处理这几个最核心的变化入手，详细聊聊 Webpack 5 到底强在哪里，以及如何在项目中用起来。
一、基于文件系统的持久化缓存
缓存是 Webpack 5 带来的最大性能提升点。在 Webpack 4 时代，如果想利用缓存，只能开启 cache: true，它使用内存缓存，只在 watch 模式下的增量构建中有效，一旦进程退出缓存就全部丢失。而 Webpack 5 引入了文件系统缓存，可以把编译结果序列化后写入磁盘，下次启动构建时直接读取缓存，跳过大部分解析和转换工作。
配置方式非常简单，只需要在配置文件中加几行：
// webpack.config.js
module.exports = {
cache: {
type: 'filesystem', // 使用文件系统缓存
buildDependencies: {
// 当配置文件变化时，缓存自动失效
config: [__filename]
},
cacheDirectory: path.resolve(__dirname, '.cache_webpack'),
version: '1.0'
}
};
其中 buildDependencies 很关键，它声明了缓存依赖的文件，一旦这些文件内容发生变化，缓存就会整体失效重新构建，避免出现构建结果和预期不一致的问题。建议把 babel 配置、tsconfig 等影响编译结果的文件都加进去。
实际体验下来，首次构建因为要写入缓存会略慢一点，但二次冷启动构建通常能快 70% 到 90%，项目越大收益越明显。对于一个中型项目，原本两分钟的构建可能十几秒就能完成。需要注意的是，缓存的序列化对象和 Webpack 版本、配置强相关，团队协作时建议把缓存目录加进 .gitignore，每个人的缓存各自维护。
二、模块联邦：微前端的运行时共享方案
模块联邦（Module Federation）是 Webpack 5 最令人兴奋的新能力。它解决的核心问题是：多个独立构建、独立部署的应用之间，如何在运行时共享代码模块。以前要实现这种效果，通常要把公共模块抽成 npm 包发版，或者用 externals 加 CDN 的方式，维护成本都很高。
模块联邦的基本思路是：一个应用既可以把某些模块暴露出去作为远程提供者，也可以在运行时异步加载其他应用暴露的模块。下面是一个简单的例子：
// 应用 A：作为模块提供方
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'appA',
filename: 'remoteEntry.js',
exposes: {
// 把 ./src/Button.js 暴露为公开模块 ./Button
'./Button': './src/Button.js'
},
shared: {
// 共享依赖，避免 React 被重复打包
react: { singleton: true },
'react-dom': { singleton: true }
}
})
]
};
// 应用 B：作为消费方
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'appB',
remotes: {
// 运行时从应用 A 加载远程模块
appA: 'appA@http://localhost:3000/remoteEntry.js'
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true }
}
})
]
};
在应用 B 的业务代码里，可以直接异步引入远程模块：
// 动态引入应用 A 暴露的 Button 组件
const RemoteButton = React.lazy(() => import('appA/Button'));
function App() {
return (
<React.Suspense fallback={"加载中"}>
<RemoteButton />
</React.Suspense>
);
}
shared 配置里的 singleton: true 值得特别说明。它保证共享依赖在整个运行环境中只有一份实例，这对 React 这类有全局状态和 Hooks 机制的库至关重要，如果出现两份 React 副本，Hooks 调用会直接报错。
模块联邦的典型应用场景就是微前端。主应用不关心子应用用什么版本的技术栈，只要约定好 remoteEntry 的地址和暴露的模块名，就能在运行时动态拼装页面。相比 qiankun 这类基于沙箱的方案，模块联邦更轻量，粒度可以细到单个组件级别。当然它也有代价：调试链路变长，版本管理需要团队有明确的规范，比如共享依赖的版本协商策略要提前约定好。
三、Asset Modules：资源处理的原生化
Webpack 4 处理图片、字体这类静态资源，需要装一堆 loader：file-loader、url-loader、raw-loader。Webpack 5 把这些能力内置了，统一称为 Asset Modules，通过 type 字段来声明资源处理方式，配置清爽了不少。
module.exports = {
module: {
rules: [
{
test: /\.png$/,
type: 'asset', // 自动模式：小文件转 base64，大文件生成单独文件
parser: {
dataUrlCondition: {
maxSize: 8 * 1024 // 8KB 以下内联
}
}
},
{
test: /\.svg$/,
type: 'asset/source' // 相当于 raw-loader，导出源码字符串
},
{
test: /\.woff2$/,
type: 'asset/resource' // 相当于 file-loader，生成独立文件
}
]
}
};
四种资源类型各有用途：asset/resource 对应原来的 file-loader，输出文件并返回 URL；asset/inline 对应 url-loader，以 data URI 形式内联；asset/source 对应 raw-loader，导出文件内容字符串；asset 是自动模式，按文件大小在前面两者之间自动选择。
迁移时需要注意的是，如果你还在使用老的 loader，Webpack 5 会给出弃用警告。建议一次性切换到 Asset Modules，减少依赖数量，构建配置也更可维护。
四、Tree Shaking 与代码生成的改进
Webpack 5 在 Tree Shaking 上做了不少深层次的增强。最实用的是支持了嵌套的 export 分析和模块内部的副作用消除。比如一个模块导出了一个复杂对象，其中只有部分属性被使用，Webpack 5 能把未使用的属性从产物中剔除。此外，CommonJS 的部分模式也能被分析了，像 exports.foo = xxx 这种写法现在可以被识别和摇掉。
代码生成层面还有几个值得关注的点。首先是 Long-term caching 的改进，chunk id 和 module id 默认改为确定性算法（deterministic），不再使用数字自增 id，这保证了文件内容不变时 hash 稳定，浏览器缓存命中率更高。其次是 realContentHash，它基于文件实际内容而非内部结构生成 hash，只要产物内容没变，hash 就不会变：
module.exports = {
output: {
filename: '[name].[contenthash:8].js',
hashFunction: 'xxhash64' // 更快的 hash 算法
}
};
另外 Webpack 5 移除了 Node.js polyfill 的自动注入。以前浏览器端代码里用了 process 或 path，Webpack 4 会自动塞入 polyfill，导致产物体积膨胀；Webpack 5 改为报错提示，让开发者自己决定是否引入。这个变化在迁移时最容易踩坑，如果构建时报 module not found 之类的错误，多半就是这个原因，可以按需安装对应的 polyfill 并在 resolve.fallback 中配置。
五、迁移建议与总结
从 Webpack 4 迁移到 Webpack 5，官方提供了详细的迁移指南，核心步骤包括：升级 Node.js 版本到 10.13 以上（建议直接用更新的 LTS 版本）、清理废弃的配置项（比如 cache: true 改为对象形式）、处理 polyfill 报错、更新不兼容的插件。多数主流插件和 loader 目前都已适配 Webpack 5，如果项目用了 vue-cli 或 create-react-app 的老版本，升级脚手架通常是最省事的路径。
总体来看，Webpack 5 的这一系列变化是有明确主线思想的：让构建更确定性、让能力更原生化、让应用之间的边界更灵活。持久化缓存解决的是开发体验问题，Asset Modules 解决的是配置负担问题，模块联邦解决的则是架构层面的问题。如果你的项目还在 Webpack 4 上，这次升级的收益完全值得投入迁移成本，尤其是大项目和有微前端需求的团队，模块联邦几乎是为这类场景量身定做的能力。