Devtool (开发工具)

此选项控制 Source Map 的生成方式和是否生成。

使用 SourceMapDevToolPlugin 可以进行更精细的配置。请参阅 source-map-loader 来处理现有的 Source Map。

devtool

string = 'eval' false

选择一种Source Map 样式来增强调试过程。这些值会显著影响构建和重新构建的速度。

devtool (开发工具)	performance (性能)	生产环境	质量	注释
(无)	构建：最快 重新构建：最快	是	bundle	对于性能最大化的生产构建的推荐选择。
eval	构建：快 重新构建：最快	否	生成的	对于性能最大化的开发构建的推荐选择。
eval-cheap-source-map	构建：良好 重新构建：快	否	转换后的	开发构建的权衡选择。
eval-cheap-module-source-map	构建：慢 重新构建：快	否	原始行	开发构建的权衡选择。
eval-source-map	构建：最慢 重新构建：良好	否	原始	对于高质量 SourceMap 的开发构建的推荐选择。
cheap-source-map	构建：良好 重新构建：慢	否	转换后的	-
cheap-module-source-map	构建：慢 重新构建：慢	否	原始行	-
source-map	构建：最慢 重新构建：最慢	是	原始	对于高质量 SourceMap 的生产构建的推荐选择。
inline-cheap-source-map	构建：良好 重新构建：慢	否	转换后的	-
inline-cheap-module-source-map	构建：慢 重新构建：慢	否	原始行	-
inline-source-map	构建：最慢 重新构建：最慢	否	原始	发布单个文件时的可能选择
eval-nosources-cheap-source-map	构建：良好 重新构建：快	否	转换后的	不包含源代码
eval-nosources-cheap-module-source-map	构建：慢 重新构建：快	否	原始行	不包含源代码
eval-nosources-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	构建：最慢 重新构建：最慢	是	原始	无引用。仅用于错误报告时可能选择 SourceMap。

快捷方式	解释
性能：构建	devtool 设置如何影响初始构建的性能？
性能：重新构建	devtool 设置如何影响增量构建的性能？慢速的 devtool 可能会降低 watch 模式下的开发反馈循环。与构建性能相比，其规模不同，因为人们期望重新构建比构建更快。
生产环境	是否适合在生产构建中使用此 devtool？当 devtool 对用户体验产生负面影响时，通常为 no。
质量：打包	你将看到一个大块代码中所有生成的代码。这是没有任何 devtool 支持的原始输出文件。
质量：生成的	你将看到生成的代码，但每个模块在浏览器 devtools 中都显示为单独的代码文件。
质量：转换后的	你将看到经过 loader 预处理但未经过额外 webpack 转换的代码。只有源行将被映射，列信息将被丢弃或不生成。这会阻止在行中间设置断点，因为这与代码最小化器不兼容。
质量：原始行	你将看到你编写的原始代码，假设所有 loader 都支持 SourceMapping。只有源行将被映射，列信息将被丢弃或不生成。这会阻止在行中间设置断点，因为这与代码最小化器不兼容。
质量：原始	你将看到你编写的原始代码，假设所有 loader 都支持 SourceMapping。
eval-* 添加	为每个模块生成 SourceMap 并通过 eval 附加。建议用于开发，因为其重新构建性能得到提升。请注意，Windows Defender 可能存在问题，导致病毒扫描造成严重减速。
inline-* 添加	将 SourceMap 内联到原始文件中，而不是创建单独的文件。
hidden-* 添加	未添加 SourceMap 的引用。当 SourceMap 未部署，但仍应生成时，例如用于错误报告目的。
nosources-* 添加	SourceMap 中不包含源代码。这在需要引用原始文件时很有用（需要更多配置选项）。

其中一些值适合开发，另一些则适合生产。对于开发，你通常希望以打包大小为代价获得快速的 Source Map，而对于生产，你则需要精确且支持最小化的独立 Source Map。

质量

bundled code - 你将看到所有生成的代码作为一大块代码。你不会看到模块相互分离。

generated code - 你会看到每个模块彼此分离，并带有模块名称的注释。你会看到 webpack 生成的代码。例如：你看到的是 var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a(); 而不是 import {test} from "module"; test();。

transformed code - 你会看到每个模块彼此分离，并带有模块名称的注释。你会看到 webpack 转换之前的代码，但已经是 Loader 转译之后的代码。例如：你看到的是 import {test} from "module"; var A = function(_test) { ... }(test); 而不是 import {test} from "module"; class A extends test {}

original source - 你会看到每个模块彼此分离，并带有模块名称的注释。你会看到转译之前的代码，即你编写的代码。这取决于 Loader 的支持。

without source content - Source Map 中不包含源内容。浏览器通常会尝试从 Web 服务器或文件系统加载源文件。你必须确保正确设置 output.devtoolModuleFilenameTemplate 以匹配源 URL。

(lines only) - Source Map 被简化为每行一个映射。这通常意味着每个语句一个映射（假设你以这种方式编写代码）。这会阻止你调试语句级别的执行，以及在行的列上设置断点。与最小化器结合使用是不可能的，因为最小化器通常只发射一行。

开发

以下选项是开发环境的理想选择

eval - 每个模块都使用 eval() 和 //# sourceURL 执行。这非常快。主要缺点是它无法正确显示行号，因为它被映射到转译后的代码而不是原始代码（没有来自 Loader 的 Source Map）。

eval-source-map - 每个模块都使用 eval() 执行，并且 SourceMap 以 DataUrl 的形式添加到 eval() 中。它最初速度较慢，但提供了快速的重新构建速度并生成真实文件。行号被正确映射，因为它被映射到原始代码。它为开发提供了最高质量的 SourceMap。

eval-cheap-source-map - 类似于 eval-source-map，每个模块都使用 eval() 执行。它“便宜”是因为它没有列映射，只映射行号。它忽略来自 Loader 的 SourceMap，并且只显示类似于 eval devtool 的转译代码。

eval-cheap-module-source-map - 类似于 eval-cheap-source-map，但是，在这种情况下，来自 Loader 的 Source Map 会被处理以获得更好的结果。然而，Loader Source Map 被简化为每行一个映射。

特殊情况

以下选项既不适合开发也不适合生产。它们适用于某些特殊情况，即某些第三方工具。

inline-source-map - SourceMap 以 DataUrl 的形式添加到打包文件中。

cheap-source-map - 不带列映射的 SourceMap，忽略 loader Source Map。

inline-cheap-source-map - 类似于 cheap-source-map，但 SourceMap 以 DataUrl 的形式添加到打包文件中。

cheap-module-source-map - 不带列映射的 SourceMap，将 loader Source Map 简化为每行一个映射。

inline-cheap-module-source-map - 类似于 cheap-module-source-map，但 SourceMap 以 DataUrl 的形式添加到打包文件中。

生产

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

(none) (省略 devtool 选项或设置 devtool: false) - 不会发射 SourceMap。这是一个很好的开始选项。

source-map - 会发射完整的 SourceMap 作为单独的文件。它会向打包文件添加一个引用注释，以便开发工具知道在哪里可以找到它。

hidden-source-map - 与 source-map 相同，但不向打包文件添加引用注释。如果你只希望 SourceMap 用于映射错误报告中的错误堆栈跟踪，但不想将 SourceMap 暴露给浏览器开发工具，则此选项很有用。

nosources-source-map - 创建的 SourceMap 中不包含 sourcesContent。它可以用于在客户端上映射堆栈跟踪，而无需暴露所有源代码。你可以将 Source Map 文件部署到 Web 服务器。