1. Detools（开发工具）

该选项控制是否生成源映射（source maps）以及如何生成源映射。

使用SourceMapDevToolPlugin来进行更细粒度的配置。请参阅source-map-loader来处理现有的源映射。

1.1. devtool

类型：string | false

选择一种类型的source mapping 来增强调试过程。这些值会显著地影响构建和重建速度。

注：

webpack仓库包含一个示例显示了所有devtool变量的效果。这些例子可能会帮助你理解这些差异。

-

注：

替代使用devtool选项，你还可以使用SourceMapDevToolPlugin / EvalSourceMapDevToolPlugin直接拥有更多的选择。永远不要同时使用devtool选项和插件。devtool选项在内部添加了插件，这样你就会使用两次插件。

注：

+++ 特别快, ++ 非常快, + 一般快, o 中等, - 非常慢 , -- 特别慢

其中一些值适合于开发，一些用于生产。对于开发，您通常需要以包大小为代价的快速源映射（Source Maps ），但是对于生产，您需要独立的源映射（Source Maps），这些映射是准确的和支持最小化的。

注：

在Chrome中有一些Source Maps的问题。我们需要你的帮助 !

-

注：

查看 output.sourceMapFilenam 来自定义生成的Source Maps的文件名。

1.1.1. Qualities （品质）

bundled code - You see all generated code as a big blob of code. You don't see modules separated from each other.您将所有生成的代码视为一大块代码。你看不到模块之间的相互分离。

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 Maps）中。浏览器通常尝试从web服务器或文件系统加载源。你必须确保正确地设置devtoolModuleFilenameTemplate来匹配源url。

(lines only) - 源映射（Source Maps）被简化为每行一个映射。这通常意味着每个语句都有一个映射(假设您是这样做的)。这可以防止您在语句级别上调试执行，以及在一行的列上设置断点。结合最小化是不可能的，因为最小值通常只会发出（emit）一条单一直线。

1.1.2. 开发

下面的选项是开发的理想选择:

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

eval-source-map - 最初它是缓慢的，但是它提供了快速的重建速度并产生真实的文件。由于映射到原始代码，所以行号被正确映射。它为开发提供了最好的质量源映射。

cheap-eval-source-map - 与eval-source-map类似，每个模块都用eval()执行。它是“便宜”的，因为它没有列映射，它只映射行号。它忽略了来自Loader的源程序，只显示了与eval 开发工具类似的反编译代码。

cheap-module-eval-source-map - 与cheap-eval-source-map类似，但是，在这种情况下，它会处理来自Loader的源映射以得到更好的借过。然而，Loader源映射(Loader Source Maps)被简化为每行一个映射。

1.1.3. 特殊情况

下面的选项不适合开发和生产。对于一些特殊的情况，需要一些特殊的选项，比如一些第三方工具。

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

cheap-source-map -一个没有列映射的SourceMap，忽略了loader源映射

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

cheap-module-source-map - 一个没有列映射的SourceMap，它简化了loader源映射为每行一个映射。

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

1.1.4. 生产

这些选项通常用于生产:

(none) (省略devtool 选项) -没有SourceMap发出。这是一个不错的选择。

source-map - 完整的SourceMap是作为一个单独的文件发出的。它为bundle添加了一个引用注释，因此开发工具知道在哪里找到它。

注：

您应该配置您的服务器，使其不允许对普通用户访问源映射文件。

hidden-source-map - 与source-map一样，但是，不要在bundle中添加引用注释。如果您只希望SourceMaps从错误报告中映射错误堆栈跟踪，但是不想为浏览器开发工具公开您的SourceMap，它是很有用的。

注：

您应该配置您的服务器，使其不允许对普通用户访问源映射文件。您不应该将Source Map文件部署到web服务器。相反，只使用它作为错误报告工具。

nosources-source-map - 一个SourceMap是在没有sourcesContent的情况下被创建的。它可以用于在客户机上映射堆栈跟踪，而不会暴露所有的源代码。您可以将源映射文件部署到web服务器。

注：

它仍然公开了用于反编译的文件名和结构，但是它没有公开原始代码。

-

注：

当使用uglifyjs-webpack-plugin 时，你必须提供sourceMap: true 选项来使SourceMap支持。