Webpack 5 新特性解析

一、引言

历经五年迭代，Webpack 5 于 2020 年 10 月正式 GA，随后在 5.x 的历次小版本中持续交付性能红利与开发体验升级。本文将聚焦五个关键领域：输出清理、顶层 await、体积优化、持久缓存与资源模块，帮助团队无痛迁移并充分理解新版本。

二、输出目录自动清理

在 Webpack 4 时代，开发者需引入 clean-webpack-plugin 以避免旧文件残留。Webpack 5 将这一需求下沉至核心：

js 复制代码

module.exports = {
  output: {
    clean: true
  }
}

启用后，每次构建前会递归清空 output.path 目录，确保产物纯净，无需额外插件与脚本。

三、顶层 await

ECMAScript 提案的 top-level-await 允许在模块顶层直接使用 await 语法，Webpack 5 通过 experiments.topLevelAwait 实验开关率先落地：

js 复制代码

// src/index.js
const resp = await fetch('https://api.example.com');
export default await resp.json();

配置片段：

js 复制代码

module.exports = {
  experiments: { topLevelAwait: true }
}

构建阶段，Webpack 会将包含顶层 await 的模块标记为异步边界，动态生成 Promise 包裹，保持运行语义不变，同时兼容 Tree Shaking 与 Scope Hoisting。

四、打包体积优化再进化

Webpack 5 在模块合并、作用域提升（Scope Hoisting）、Tree Shaking 三条路径上引入更激进的静态分析策略：

副作用标记（sideEffects）与导出使用追踪（usedExports）联动，精确剪除未引用代码；
ConcatenatedModule 算法优化，减少闭包与函数声明数量；
嵌套 import() 场景下，公共依赖自动提升至共享 Chunk，避免重复打包。
实测中型项目体积降幅 8%--15%，冷启动内存占用同步下降。

五、持久缓存

Webpack 4 时代需借助 cache-loader 或 hard-source-webpack-plugin 实现缓存。Webpack 5 默认启用文件系统级缓存：

js 复制代码

const path = require('path');
module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack')
  }
}

首次构建后，模块与 Chunk 的编译结果序列化至磁盘；二次构建仅重新编译变更模块，配合 incremental compilation，二次构建耗时缩短 60% 以上。CI 环境下，将缓存目录挂载至持久化存储，可显著降低流水线运行时间。

六、资源模块：告别 Loader 地狱

Webpack 4 通过 file-loader、url-loader、raw-loader 处理静态资源，配置冗长且版本碎片化。Webpack 5 原生引入 Asset Modules：

asset/resource：等价于 file-loader，输出独立文件；
asset/inline：等价于 url-loader ≤ 8KB 内联；
asset/source：等价于 raw-loader，返回源文件字符串；
asset：根据体积阈值自动选择 inline 或 resource。

示例：

js 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset',
        parser: { dataUrlCondition: { maxSize: 8 * 1024 } }
      }
    ]
  }
}

原生实现带来零依赖、更小的维护面与更一致的行为语义。

七、迁移路径与实践建议

渐进式升级：保留 Webpack 4 配置主干，逐项启用新特性验证回归。
缓存策略：CI 流水线挂载 node_modules/.cache/webpack，缩短二次构建。
资源模块：逐步移除 file-loader/url-loader，统一使用 Asset Modules。
性能基线：构建前后分别记录产物体积、构建耗时、内存峰值，量化收益。

结语

Webpack 5 以"开箱即用"为核心理念，将过去需要插件介入的能力下沉至核心，既保持了向后兼容，又提供了显著的性能红利。通过合理配置 clean、cache、asset 类型与顶层 await，开发者可在零额外依赖的前提下，获得更快的构建、更小的包体以及更清晰的工程结构。