Webpack 5 新特性有哪些？深入解析持久化缓存与模块联邦带来的构建变革

Webpack 5 是 Webpack 历史上一次重量级的大版本更新，官方团队花了近两年时间打磨，砍掉了大量遗留的怪异行为，同时引入了一套全新的能力体系。标题里说的预先注定宇宙，可以理解为 Webpack 5 对构建结果的确定性追求，同样的输入必然产出同样的输出，缓存可以放心复用，模块可以在不同应用间预知彼此的存在。这篇文章从实际工程角度出发，梳理 Webpack 5 值得关注的新特性，并给出落地建议。

持久化缓存：让二次构建进入秒级时代

Webpack 4 时代，加速构建的主流手段是借助 hard-source-webpack-plugin 这类第三方插件做模块级缓存。这个插件虽然好用，但稳定性一直被诟病，缓存失效判断不准确时会出现玄学的构建错误，很多团队不得不定期清缓存重来。Webpack 5 把缓存能力收编为官方内置功能，通过 cache: { type: 'filesystem' } 一行配置即可开启文件系统缓存，再也不需要依赖社区插件。

它的原理是把每个模块的解析结果、依赖关系、生成代码等中间产物序列化后写入 node_modules/.cache/webpack 目录。下次构建时，Webpack 会基于文件内容哈希、配置快照、依赖版本等信息判断哪些缓存条目可以复用，只重新处理真正变化的部分。对于中大型项目，冷启动构建可能需要一两分钟，而命中缓存后的增量构建往往只需几秒钟，效果非常直观。

module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      // 配置文件本身变化时让缓存失效
      config: [__filename]
    },
    version: 'prod-v1' // 手动指定缓存版本，升级依赖后可修改强制刷新
  }
};

使用时有几个细节需要注意。一是 buildDependencies 一定要把 webpack 配置文件本身包含进去，否则修改配置后可能仍会命中旧缓存，产出不符合预期的结果。二是升级 node_modules 中的依赖后，建议通过修改 cache.version 或者安装脚本来清理缓存，避免旧模块残留。三是在 CI 环境中，如果执行器是有状态的，可以把缓存目录挂载出来复用，能显著缩短流水线时间。

Module Federation：微前端的官方答案

模块联邦是 Webpack 5 最具想象力的特性。它解决的核心问题是：多个独立构建、独立部署的应用之间，如何在运行时共享代码？过去要实现这一点，往往得依赖 externals 加 CDN 全局变量，或者引入 single-spa 之类的微前端框架做一层额外管理，方案都比较重。模块联邦把这个能力下沉到了打包器层面。

它的思路是允许一个应用把自己内部的某些模块标记为可远程加载的 expose，同时声明自己运行时需要从哪些远程地址获取哪些模块 remotes。宿主应用和远程应用之间还可以通过 shared 字段声明共享依赖，比如双方都用 React，运行时只会加载一份，且会自动协商到双方兼容的最高版本。这样跨应用的代码共享既避免了重复打包，又保证了单例依赖不会出问题。

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        // 声明远程应用：运行时从这个地址加载 remoteEntry
        widgets: 'widgets@http://cdn.ipipp.com/widgets/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, eager: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

远程应用一端则通过 exposes 把指定模块暴露出去，比如把某个业务组件目录暴露为 ./UserCard，宿主应用就能像引用本地模块一样 import('widgets/UserCard') 动态加载它。实践中有两点经验值得分享：一是 shared 配置里单例依赖要谨慎设置 eager，它会强制同步加载共享包，影响首屏；二是远程地址解析失败要有降级方案，联邦加载是运行时行为，网络抖动会直接反映到用户界面上，建议配合 ErrorBoundary 做兜底。

更干净的 Tree Shaking 与长期缓存改进

Webpack 5 对 Tree Shaking 做了深度增强，最显著的变化是支持嵌套导出的摇树优化。举例来说，某个工具库导出一个对象，对象内部又挂载了多个方法，Webpack 4 只能整体保留或整体剔除，而 Webpack 5 能分析到属性级别，把没用到的嵌套方法也剔除掉。配合 sideEffects: false 的 package.json 声明，很多过去必须按需引入的组件库现在可以直接全量引入而不用担心体积。

长期缓存方面，Webpack 5 用确定性算法替代了原来基于 ID 顺序的模块标识。过去在文件列表中间新增一个文件，会导致后续所有模块的 ID 偏移，进而引起大范围的 chunk hash 变化，用户缓存大面积失效。新版本默认根据模块路径和内容生成稳定 ID，新增或删除文件只影响直接相关的产物，其余文件的 hash 保持不变，这对发布后的缓存命中率是一个实打实的提升。

module.exports = {
  optimization: {
    moduleIds: 'deterministic',
    chunkIds: 'deterministic',
    // 生产环境推荐开启，压缩后的变量名也保持确定性
    minimize: true
  }
};

资源模块与迁移注意事项

Webpack 5 移除了对 file-loader、url-loader、raw-loader 的需求，取而代之的是原生资源模块类型：asset/resource 对应文件输出，asset/inline 对应 base64 内联，asset 则可以按体积阈值自动在两者之间切换，asset/source 直接导出文件内容字符串。配置方式统一收敛到 module.rules 的 type 字段，语义更清晰，也不再需要额外安装 loader。

升级过程中有几个容易踩的点。首先，Webpack 5 最低要求 Node.js 10.13 以上，且部分废弃 API 被彻底移除，老旧插件如果调用了这些 API 会直接报错，需要先排查依赖兼容性。其次，polyfill 行为变化很大，Webpack 5 不再自动为 node 核心模块注入 polyfill，浏览器端代码如果引用了 process、path 之类的模块，需要手动安装并配置 resolve.fallback。最后，启动时如果控制台出现 EnvironmentPlugin 或 DefinePlugin 相关的告警，多半是配置里引用了未定义的环境变量，按提示补齐即可。

总体来看，Webpack 5 的各项新特性都指向同一个方向：让构建更快、产物更稳定、应用间的边界更灵活。如果你的项目还在 Webpack 4 上，持久化缓存带来的构建提速和确定性缓存算法带来的发布收益，足以支撑一次升级的成本。建议先在分支上开启缓存与确定性 ID 配置验证效果，再逐步尝试模块联邦这类架构层面的能力，稳妥推进。

Webpack 5持久化缓存Module Federation修改时间：2026-09-06 19:50:39