搜索 Webpack 5 相关资料时，你可能会看到一个说法叫 Ideational Rights 观念权利，听起来很唬人，但翻遍 Webpack 官方文档和版本发布日志都找不到这个词。它并不是 Webpack 5 的正式特性，更像是早期中文社区在翻译或转载时张冠李戴产生的误传。真正构成 Webpack 5 主体升级的是持久化缓存、模块联邦、资源模块等一系列实打实的功能改进，这篇文章就把这些真特性逐个讲透。
持久化缓存：二次构建速度的质变
Webpack 4 时代，每次冷启动都要从零开始解析模块、编译代码，大型项目的构建动辄几分钟，开发体验非常糟糕。虽然可以用 cache-loader 或DllPlugin 做缓存，但这些方案配置繁琐，缓存失效策略也不够智能。Webpack 5 把缓存能力直接内置到核心，通过文件系统缓存将编译结果持久化到磁盘，下次构建时只对变化的模块做增量编译，构建速度往往能提升到原来的几倍甚至十几倍。
开启方式非常简单，在配置中加上 cache 字段即可：
module.exports = {
// buildDependencies 用来指定缓存依赖，
// 当这些文件变化时缓存会自动失效，保证正确性
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename]
}
}
};有一个细节需要注意：如果把配置文件本身加入 buildDependencies，那么任何配置改动都会导致整个缓存重建。这在频繁调试配置时反而是负担，可以根据团队实际情况权衡。另外建议把 node_modules/.cache 目录加入版本控制的忽略列表，避免把体积庞大的缓存文件提交到仓库。
模块联邦：微前端落地的新武器
模块联邦（Module Federation）可以说是 Webpack 5 最耀眼的新能力。它允许多个独立构建、独立部署的应用在运行时互相共享模块，宿主应用可以像引用本地模块一样引用远程应用暴露的组件、函数甚至整个页面。这对微前端架构来说是关键性的基础设施，不再需要借助 externals 加 CDN 脚本这种脆弱的方式共享依赖。
下面是一个提供方（远程应用）的最小配置示例：
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
// 对外暴露一个组件，外部可通过 remoteApp/Button 访问
'./Button': './src/components/Button.js'
},
shared: {
// 与宿主共享 react，避免两份 React 实例导致报错
react: { singleton: true }
}
})
]
};宿主应用则通过 remotes 字段声明远程地址，之后在代码里直接 import 即可。shared 配置中的 singleton 选项尤其重要，像 React 这类对单实例有强依赖的库，必须声明为单例，否则运行时会出现 Hooks 报错。模块联邦的代价是调试链路变长，跨团队协作时要约定好共享依赖的版本范围，否则容易出现运行时版本冲突。
资源模块与破坏性变更：升级前必须清楚的事
Webpack 5 引入 asset modules，用 asset/resource、asset/inline、asset/source 四种内置类型统一取代了 file-loader、url-loader、raw-loader 的功能，资源处理不再需要额外安装 loader：
module.exports = {
module: {
rules: [
{
test: /\.png$/,
// 4KB 以下转 base64 内联，超过则输出独立文件
type: 'asset',
parser: {
dataUrlCondition: { maxSize: 4 * 1024 }
}
}
]
}
};另一个必须重视的变更是：Webpack 5 不再自动为前端代码注入 Node.js 核心模块的 polyfill。如果你的代码里直接引用了 process、Buffer 或 path，构建时会直接报错。解决办法是手动安装对应 polyfill 并通过 resolve.fallback 显式声明，或者改造代码移除对 Node 环境的隐式依赖。很多老项目升级后卡在这一步，提前排查依赖里哪些包引用了 Node 内置模块，能让迁移过程顺畅很多。
此外，Webpack 5 还带来更好的长期缓存算法（真实内容 hash）、更小的产物体积、Tree Shaking 能力增强（支持嵌套的无用导出剔除）以及 Top Level Await 特性。整体来看，如果你的项目构建速度已经成为痛点，或者正在规划微前端架构，升级到 Webpack 5 是值得投入的，只是别忘了先处理 polyfill 和废弃配置项这两大类迁移成本。