开发工具
此选项控制是否以及如何生成源映射。
使用 SourceMapDevToolPlugin 进行更精细的配置。请参阅 source-map-loader 以处理现有的源映射。
devtool
string = 'eval' false
选择 源映射 的样式，以增强调试过程。这些值可能会极大地影响构建和重建速度。
| devtool | 性能 | 生产 | 质量 | 注释 |
|---|---|---|---|---|
| (无) | 构建：最快 重建：最快 | 是 | 包 | 推荐用于具有最大性能的生产构建。 |
eval | 构建：快 重建：最快 | 否 | 已生成 | 推荐用于具有最大性能的开发构建。 |
eval-cheap-source-map | 构建：正常 重建：快 | 否 | 已转换 | 开发构建的折衷选择。 |
eval-cheap-module-source-map | 构建：慢 重建：快 | 否 | 原始行 | 开发构建的折衷选择。 |
eval-source-map | 构建：最慢 重建：正常 | 否 | 原始 | 推荐用于具有高质量 SourceMaps 的开发构建。 |
cheap-source-map | 构建：正常 重建：慢 | 否 | 已转换 | |
cheap-module-source-map | 构建：慢 重建：慢 | 否 | 原始行 | |
source-map | 构建：最慢 重建：最慢 | 是 | 原始 | 推荐用于具有高质量 SourceMaps 的生产构建。 |
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 | 构建：正常 重建：慢 | 否 | 已转换 | 不包含源代码 |
内联-无源-廉价模块-源映射 | 构建：慢 重建：慢 | 否 | 原始行 | 不包含源代码 |
内联-无源-源映射 | 构建：最慢 重建：最慢 | 否 | 原始 | 不包含源代码 |
无源-廉价-源映射 | 构建：正常 重建：慢 | 否 | 已转换 | 不包含源代码 |
无源-廉价模块-源映射 | 构建：慢 重建：慢 | 否 | 原始行 | 不包含源代码 |
无源-源映射 | 构建：最慢 重建：最慢 | 是 | 原始 | 不包含源代码 |
隐藏-无源-廉价-源映射 | 构建：正常 重建：慢 | 否 | 已转换 | 无引用，不包含源代码 |
隐藏-无源-廉价模块-源映射 | 构建：慢 重建：慢 | 否 | 原始行 | 无引用，不包含源代码 |
隐藏-无源-源映射 | 构建：最慢 重建：最慢 | 是 | 原始 | 无引用，不包含源代码 |
隐藏-廉价-源映射 | 构建：正常 重建：慢 | 否 | 已转换 | 无引用 |
隐藏-廉价模块-源映射 | 构建：慢 重建：慢 | 否 | 原始行 | 无引用 |
隐藏-源映射 | 构建：最慢 重建：最慢 | 是 | 原始 | 无引用。仅在将 SourceMap 用于错误报告目的时才可能选择。 |
| 快捷方式 | 说明 |
|---|---|
| 性能：构建 | devtool 设置如何影响初始构建的性能？ |
| 性能：重建 | devtool 设置如何影响增量构建的性能？缓慢的 devtool 可能会在监视模式下减少开发反馈循环。与构建性能相比，规模不同，因为人们期望重建比构建更快。 |
| 生产 | 是否应该在生产构建中使用此 devtool？当 devtool 对用户体验产生负面影响时，通常为否。 |
| 质量：已捆绑 | 您将在一个代码块中看到一个块的所有生成代码。这是没有任何 devtooling 支持的原始输出文件 |
| 质量：已生成 | 您将看到生成的代码，但每个模块在浏览器 devtool 中显示为单独的代码文件。 |
| 质量：已转换 | 您将在加载器预处理后但 webpack 转换之前看到生成的代码。只会映射源行，列信息将被丢弃或不生成。这可以防止在行中间设置断点，而这与最小化程序不兼容。 |
| 质量：原始行 | 您将看到您编写的原始代码，假设所有加载器都支持 SourceMapping。只会映射源行，列信息将被丢弃或不生成。这可以防止在行中间设置断点，而这与最小化程序不兼容。 |
| 质量：原始 | 您将看到您编写的原始代码，假设所有加载器都支持 SourceMapping。 |
eval-* 附加 | 为每个模块生成 SourceMap 并通过 eval 附加它。由于重建性能得到改善，因此建议用于开发。请注意，Windows Defender 存在一个问题，由于病毒扫描导致速度大幅下降。 |
inline-* 附加 | 将 SourceMap 内联到原始文件，而不是创建单独的文件。 |
hidden-* 添加 | 未引用添加的 SourceMap。当未部署 SourceMap，但仍应生成 SourceMap 时，例如，用于错误报告目的。 |
nosources-* 添加 | 源代码未包含在 SourceMap 中。当应引用原始文件时，这可能很有用（需要进一步的配置选项）。 |
其中一些值适用于开发，而另一些值适用于生产。对于开发，你通常需要以牺牲包大小为代价来获得快速的 Source Map，但对于生产，你需要准确且支持最小化的单独 Source Map。
质量
已捆绑代码 - 你会看到所有生成的代码作为一个巨大的代码块。你不会看到彼此分开的模块。
已生成代码 - 你会看到彼此分开的每个模块，并用模块名称进行注释。你会看到 webpack 生成的代码。示例：代替 import {test} from "module"; test();，你会看到类似 var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a(); 的内容。
已转换代码 - 你会看到彼此分开的每个模块，并用模块名称进行注释。你会看到 webpack 转换之前的代码，但 Loaders 转换之后。示例：代替 import {test} from "module"; class A extends test {}，你会看到类似 import {test} from "module"; var A = function(_test) { ... }(test); 的内容。
原始源 - 你会看到彼此分开的每个模块，并用模块名称进行注释。你会看到转换之前的代码，就像你编写的那样。这取决于 Loader 支持。
无源内容 - 源的内容不包含在 Source Map 中。浏览器通常会尝试从 Web 服务器或文件系统加载源。你必须确保正确设置 output.devtoolModuleFilenameTemplate 以匹配源 URL。
（仅限行） - Source Map 简化为每行一个映射。这通常意味着每条语句一个映射（假设你以这种方式编写）。这会阻止你在语句级别调试执行，以及在行的列上设置断点。与最小化结合是不可能的，因为最小化器通常只发出单行。
开发
以下选项非常适合开发
eval - 每个模块都使用 eval() 和 //# sourceURL 执行。这相当快。主要缺点是它无法正确显示行号，因为它映射到已转换的代码，而不是原始代码（加载程序没有源映射）。
eval-source-map - 每个模块都使用 eval() 执行，并将源映射作为 DataUrl 添加到 eval() 中。最初速度很慢，但它提供了快速的重新构建速度并生成真实文件。行号正确映射，因为它映射到原始代码。它为开发生成了最优质的源映射。
eval-cheap-source-map - 与 eval-source-map 类似，每个模块都使用 eval() 执行。它“便宜”，因为它没有列映射，它只映射行号。它忽略加载程序的源映射，只显示与 eval 开发工具类似的已转换代码。
eval-cheap-module-source-map - 与 eval-cheap-source-map 类似，但是，在这种情况下，加载程序的源映射会得到处理以获得更好的结果。然而，加载程序源映射被简化为每行一个映射。
特殊情况
以下选项既不适合开发也不适合生产。它们是为一些特殊情况需要的，例如一些第三方工具。
inline-source-map - 将源映射作为 DataUrl 添加到包中。
cheap-source-map - 无列映射的源映射，忽略加载程序源映射。
inline-cheap-source-map - 与 cheap-source-map 类似，但源映射作为 DataUrl 添加到包中。
cheap-module-source-map - 无列映射的源映射，将加载程序源映射简化为每行一个映射。
inline-cheap-module-source-map - 与 cheap-module-source-map 类似，但源映射作为 DataUrl 添加到包中。
生产
这些选项通常用于生产
(none)（省略 devtool 选项或设置 devtool: false） - 不发出源映射。这是一个很好的起点。
source-map - 将完整的源映射作为单独的文件发出。它向包添加一个引用注释，以便开发工具知道在哪里可以找到它。
hidden-source-map - 与 source-map 相同，但不会向包添加引用注释。如果你只想让源映射映射错误报告中的错误堆栈跟踪，但不想让浏览器开发工具公开你的源映射，这很有用。
nosources-source-map - 创建一个不包含 sourcesContent 的 SourceMap。它可用于映射客户端上的堆栈跟踪，而无需公开所有源代码。您可以将 SourceMap 文件部署到 Web 服务器。
8 位贡献者
