简体中文

CC 4.0 协议声明

本节内容派生于以下链接指向的内容，并遵守 CC BY 4.0 许可证的规定。
https://webpack.js.org/configuration/devtool/
以下内容如果没有特殊声明，可以认为都是基于原内容的修改和删减后的结果。

Devtool

调试：该选项用于控制 Source Map 的生成行为。

类型：

export type Devtool =
  | false
  | 'eval'
  | 'cheap-source-map'
  | 'cheap-module-source-map'
  | 'source-map'
  | 'inline-cheap-source-map'
  | 'inline-cheap-module-source-map'
  | 'inline-source-map'
  | 'inline-nosources-cheap-source-map'
  | 'inline-nosources-cheap-module-source-map'
  | 'inline-nosources-source-map'
  | 'nosources-cheap-source-map'
  | 'nosources-cheap-module-source-map'
  | 'nosources-source-map'
  | 'hidden-nosources-cheap-source-map'
  | 'hidden-nosources-cheap-module-source-map'
  | 'hidden-nosources-source-map'
  | 'hidden-cheap-source-map'
  | 'hidden-cheap-module-source-map'
  | 'hidden-source-map'
  | 'eval-cheap-source-map'
  | 'eval-cheap-module-source-map'
  | 'eval-source-map'
  | 'eval-nosources-cheap-source-map'
  | 'eval-nosources-cheap-module-source-map'
  | 'eval-nosources-source-map';

默认值： eval

Source Map 生成主要有 source-map、eval、cheap、module、inline、nosources 和 hidden 这几种风格，它们之间可以进行组合。

source-map 是最基础的行为，表示生成 Source Map，当开启 Source Map 时会对构建性能有部分开销。
eval 会通过 eval() 包裹模块生成的代码，因此 Rspack 可以在内部对模块的生成结果做缓存，所以当 eval 和 source-map 组合使用时会优化重新构建时的 Source Map 生成速度。
cheap 表示 Source Map 只会生成行的映射，忽略列的映射关系，以加快 Source Map 的生成速度。
module 用来控制 loader 是否需要返回 Source Map，所以不开 module 时，Source Map 只能映射会 loader 处理之后的代码，同时因为 loader 不需要处理 Source Map，所以 Source Map 生成速度也会有所提升。
inline 表示生成的 Source Map 是否通过 data url 内联到文件末尾。
nosources 用来控制生成的 Source Map 中是否包含源码内容，以减小生成的 Source Map 体积。
hidden 用来控制生成的文件尾部是否包含 # sourceMappingURL=... 注释。浏览器的开发者工具和 VS Code 等会通过这段注释的路径或 data url 来寻找 Source Map，以便在调试时将产物的行列号映射回源码中的位置。

Devtool#

Devtool