Devtool 配置

你也可以提供一个对象数组，为不同类型的资源配置不同的 source map 风格：

webpack.config.js

export default {
  // ...
  devtool: [
    { type: "javascript", use: "source-map" },
    { type: "css", use: "inline-source-map" },
  ],
};

type 字段指定了哪种资源类型应应用对应的 devtool 值：

• "all" - 应用于所有资源类型（JavaScript 和 CSS）
• "javascript" - 仅应用于 JavaScript 文件
• "css" - 仅应用于 CSS 文件

当使用数组时，每个条目将按顺序处理。如果提供一个字符串值，它将被视为 { type: "all", use: "your-string-value" }。

T> webpack 仓库中包含一个展示所有 devtool 变体效果的示例。这些示例很可能帮助你理解它们之间的差异。

T> 除了使用 devtool 选项，你也可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin，因为它有更多的选项。切勿同时使用 devtool 选项和插件。devtool 选项会在内部添加插件，因此你会导致插件被应用两次。

T> 我们期望在验证 devtool 名称时遵循特定模式，请注意不要混淆 devtool 字符串的顺序。该模式是：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map。

其中一些值适用于开发环境，另一些适用于生产环境。对于开发环境，你通常希望以包体积为代价换取快速的 Source Map，但对于生产环境，你需要独立且准确并支持压缩的 Source Map。

T> 参见 output.sourceMapFilename 自定义生成的 Source Map 的文件名。

质量

打包代码（bundled code） - 你将看到所有生成的代码作为一大块代码。你无法看到彼此分离的模块。

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

转换后代码（transformed code） - 你将看到每个模块彼此分离，并带有模块名称注释。你看到的是 webpack 转换之前、但在 Loader 转译之后的代码。例如：你不会看到 import {test} from "module"; class A extends test {}，而是会看到类似 import {test} from "module"; var A = function(_test) { ... }(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() 执行。它很“cheap”（廉价），因为它没有列映射，只映射行号。它忽略来自 Loader 的 Source Map，只显示类似于 eval devtool 的转译后代码。

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

特殊情况

以下选项不适用于开发或生产环境。它们用于某些特殊情况，例如某些第三方工具。

inline-source-map - SourceMap 作为 DataUrl 添加到 bundle 中。

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

inline-cheap-source-map - 类似于 cheap-source-map，但 SourceMap 作为 DataUrl 添加到 bundle 中。

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

inline-cheap-module-source-map - 类似于 cheap-module-source-map，但 SourceMap 作为 DataUrl 添加到 bundle 中。

生产环境

这些选项通常在生产环境中使用：

(none)（省略 devtool 选项或设置 devtool: false）- 不生成 SourceMap。这是一个很好的起步选项。

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

W> 你应该配置服务器，禁止普通用户访问 Source Map 文件！

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

W> 你不应该将 Source Map 文件部署到 Web 服务器。相反，仅将其用于错误报告工具。

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

W> 它仍然会暴露文件名和结构，这可能导致反编译风险，但它不会暴露原始代码。

T> 如果默认的 webpack minimizer 已被覆盖（例如自定义 minimizer-webpack-plugin 选项），请确保将其替代配置为 sourceMap: true 以启用 SourceMap 支持。