CC 4.0 协议

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

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

Devtool

该选项用于控制调试信息生成策略,影响调试能力与构建性能。

需要精细控制时,直接使用 SourceMapDevToolPluginEvalSourceMapDevToolPlugin

  • 类型:
type Devtool = 'string' | false;
  • 默认值: eval

决策指南

步骤1:是否需要调试

  • 不需要 → 设置 devtool: false
    • 禁用所有调试信息
    • 零额外构建开销,极致构建速度
  • 需要 → 进入步骤2

步骤2:明确调试需求

  • 仅需定位模块 → 设置 devtool: 'eval'
    • 每个模块都使用 eval() 执行,并且都有 //# sourceURL
    • 极快的构建速度
  • 需要源码映射 → 进入步骤3

步骤3:配置 SourceMap

设置 devtool: 'source-map' 时,SourceMap 作为一个单独的文件生成。bundle 添加 //# sourceMapURL 注释,以便开发工具知道在哪里可以找到它。

它还支持与以下修饰符进行组合,以提升性能或控制 SourceMap 生成。

性能优化修饰符,提升构建速度,通常用于开发环境:

修饰符 效果 性能提升
eval 每个模块都使用 eval() 执行,并且将模块 SourceMap 转换为 DataUrl 后添加到 eval() 中,避免 chunk 级 SourceMap 合并计算 ⚡⚡
cheap 仅计算行映射,忽略列映射。仅映射到转译后的代码,忽略来自 loader 的 SourceMap ⚡⚡
module 处理来自 loader 的 SourceMap,以映射到源代码。仅计算行映射,忽略列映射

功能修饰符,按需控制 SourceMap 的生成,通常用于生产环境:

修饰符 效果
hidden SourceMap 作为一个单独的文件生成,但不会为 bundle 添加 //# sourceMappingURL=[url] 注释,保护源码隐私
inline SourceMap 以 base64 内联到 bundle 中,不生成单独的文件
nosources 创建的 SourceMap 不包含 sourcesContent(源代码内容)
debugids 创建的 SourceMap 增加 debugId 字段

验证 devtool 的配置时,我们期望的格式是 [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map[-debugids].

推荐配置

开发环境

以下选项非常适合开发环境:

eval - 每个模块都使用 eval() 执行,并且都有 //# sourceURL。优点是构建性能极快,缺点是,不会映射到源代码。

eval-source-map - 每个模块使用 eval() 执行,并且将模块 SourceMap 转换为 DataUrl 后添加到 eval() 中,避免 chunk 级 SourceMap 合并计算。

eval-cheap-source-map - 类似 eval-source-map,每个模块使用 eval() 执行。SourceMap 不计算列映射,只是映射行。忽略源自 loader 的 SourceMap,仅映射到转译后的代码。

eval-cheap-module-source-map - 类似 eval-cheap-source-map,并且,但会处理源自 loader 的 SourceMap,映射到源代码。然而,SourceMap 不计算列映射,只是映射行。

生产环境

这些选项通常用于生产环境中:

false - 不生成 SourceMap。

source-map - SourceMap 作为一个单独的文件生成。bundle 添加 //# sourceMapURL 注释,以便开发工具知道在哪里可以找到它。

WARNING

你应该配置你的服务器,不允许普通用户访问 SourceMap 文件!

hidden-source-map - 与 source-map 相同,但不会为 bundle 添加 //# sourceMapURL 注释。你可以将 SourceMap 用于错误报告工具,来映射源自客户端的错误堆栈,而不必向浏览器暴露你的 SourceMap。

nosources-source-map - 创建的 SourceMap 不包含 sourcesContent(源代码内容)。用来映射客户端上的错误堆栈,而不会暴露源代码,但仍然会暴露原始的文件名和结构。