CC 4.0 协议声明

本节内容派生于以下链接指向的内容 ,并遵守 CC BY 4.0 许可证的规定。

以下内容如果没有特殊声明,可以认为都是基于原内容的修改和删减后的结果。

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-mapevalcheapmoduleinlinenosourceshidden 这几种风格,它们之间可以进行组合。

  • source-map 是最基础的行为,表示生成 Source Map,当开启 Source Map 时会对构建性能有部分开销。

  • eval 会通过 eval() 包裹模块生成的代码,因此 Rspack 可以在内部对模块的生成结果做缓存,所以当 evalsource-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,以便在调试时将产物的行列号映射回源码中的位置。