生成后代码：每个模块相互分离，并用模块名称进行注释。
可以看到 webpack 生成的代码。
示例：你会看到类似 var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();，而不是 import {test} from "module"; test();。
转换过代码：每个模块相互分离，并用模块名称进行注释。
可以看到 webpack 转换前、loader 转译后的代码。
示例：你会看到类似 import {test} from "module"; var A = function(_test) { ... }(test);，
而不是 import {test} from "module"; class A extends test {}。
1. source-map
source-map是 转译后的代码 和 源代码 的映射关系。2. 如何开启 source-map
devtool选项控制是否生成，以及如何生成 source map。string = 'eval'false选择一种 source map 风格来增强调试过程。 不同的值会明显影响到构建和重新构建的速度。
3. 品质说明
var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();，而不是import {test} from "module"; test();。loader转译后的代码。 示例：你会看到类似import {test} from "module"; var A = function(_test) { ... }(test);， 而不是import {test} from "module"; class A extends test {}。loader支持。output.devtoolModuleFilenameTemplate，以匹配源代码的 url。4. 对于开发环境
以下选项非常适合开发环境：
eval
每个模块都使用
eval()执行，并且都有//# sourceURL。 此选项会非常快地构建。 主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。eval-source-map
每个模块使用
eval()执行，并且 source map 转换为 DataUrl 后添加到eval()中。 初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。 行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。eval-cheap-source-map
类似
eval-source-map，每个模块使用eval()执行。 这是 低开销 的 source map，因为它没有生成列映射(column mapping)，只是映射行数。 它会忽略源自loader的 source map，并且仅显示转译后的代码，就像devtool = eval。eval-cheap-module-source-map
类似
eval-cheap-source-map，并且，在这种情况下，源自loader的 source map 会得到更好的处理结果。 然而，loader的 source map 会被简化为每行一个映射(mapping)。5. 对于生产环境
这些选项通常用于生产环境中：
false（省略 devtool 选项）
不生成 source map。这是一个不错的选择。
source-map
整个 source map 作为一个单独的文件生成。 它为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。
注意：你应该将你的服务器配置为，不允许普通用户访问 source map 文件！
hidden-source-map
与
source-map相同，但不会为 bundle 添加引用注释。 如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会很有用。注意：你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。
nosources-source-map
创建的 source map 不包含 源代码。 它可以用来映射客户端上的堆栈跟踪，而无须暴露所有的源代码。 你可以将 source map 文件部署到 web 服务器。
注意：这仍然会暴露反编译后的文件名和结构，但它不会暴露源代码。
6. 特定场景
以下选项对于开发环境和生产环境并不理想。 他们是一些特定场景下需要的，例如，针对一些第三方工具。
inline-source-map
source map 转换为 DataUrl 后添加到 bundle 中。
cheap-source-map
没有列映射(column mapping)的 source map，忽略
loader的 source map。inline-cheap-source-map
类似
cheap-source-map，但是 source map 转换为 DataUrl 后添加到 bundle 中。cheap-module-source-map
没有列映射(column mapping)的 source map，将
loader的 source map 简化为每行一个映射(mapping)。inline-cheap-module-source-map
类似
cheap-module-source-map，但是 source mapp 转换为 DataUrl 添加到 bundle 中。