本节内容派生于以下链接指向的内容 ,并遵守 CC BY 4.0 许可证的规定。
以下内容如果没有特殊声明,可以认为都是基于原内容的修改和删减后的结果。
该选项用于控制调试信息生成策略,影响调试能力与构建性能。
需要精细控制时,直接使用 SourceMapDevToolPlugin 或 EvalSourceMapDevToolPlugin。
eval
devtool: false
devtool: 'eval'
eval()
执行,并且都有 //# sourceURL
设置 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
注释,以便开发工具知道在哪里可以找到它。
你应该配置你的服务器,不允许普通用户访问 SourceMap 文件!
hidden-source-map
- 与 source-map
相同,但不会为 bundle 添加 //# sourceMapURL
注释。你可以将 SourceMap 用于错误报告工具,来映射源自客户端的错误堆栈,而不必向浏览器暴露你的 SourceMap。
nosources-source-map
- 创建的 SourceMap 不包含 sourcesContent
(源代码内容)。用来映射客户端上的错误堆栈,而不会暴露源代码,但仍然会暴露原始的文件名和结构。