webpack高级应用篇（一）：source map —— 增强调试过程

Devtool
此选项控制是否生成，以及如何生成 source map。

使用 SourceMapDevToolPlugin 进行更细粒度的配置。查看 source-map-loader 来处理已有的 source map。

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

Devtool	表现	生产	质量	评论
`none`	构建：最快重建：最快	是的	`打包后的代码`	具有最高性能的生产版本的推荐选择。
`eval`	构建：快速重建：最快	不	`生成后的代码`	具有最高性能的开发版本的推荐选择。
`eval-cheap-source-map`	构建：好的重建：快速	不	`转换过的代码`	开发构建的权衡选择。
`eval-cheap-module-source-map`	构建：缓慢重建：快速	不	`只映射行信息的源码`	开发构建的权衡选择。
`eval-source-map`	构建：最慢的重建：好的	不	`源码`	使用高质量 SourceMaps 进行开发构建的推荐选择。
`source-map`	构建：最慢重建：最慢	是的	`源码`	使用高质量 SourceMaps 进行生产构建的推荐选择。
`inline-source-map`	构建：最慢重建：最慢	不	`源码`	发布单个文件时的可能选择
`hidden-source-map`	构建：最慢重建：最慢	是的	`源码`	仅将 SourceMap 用于错误报告目的时的可能选择。

其中一些值适用于开发环境，一些适用于生产环境。

对于开发环境，通常希望更快速的 source map，需要添加到 bundle 中以增加体积为代价，

但是对于生产环境，则希望更精准的 source map，需要从 bundle 中分离并独立存在。

打包后的代码 - 将所有生成的代码视为一大块代码。你看不到相互分离的模块。

生成后的代码 - 每个模块相互分离，并用模块名称进行注释。可以看到 webpack 生成的代码。

转换过的代码 - 每个模块相互分离，并用模块名称进行注释。可以看到 webpack 转换前、loader 转译后的代码。

源代码 - 每个模块相互分离，并用模块名称进行注释。你会看到转译之前的代码，正如编写它时。这取决于 loader 支持。

（仅限行） - source map 被简化为每行一个映射。这通常意味着每个语句只有一个映射（假设你使用这种方式）。这会妨碍你在语句级别上调试执行，也会妨碍你在每行的一些列上设置断点。与压缩后的代码组合后，映射关系是不可能实现的，因为压缩工具通常只会输出一行。

以下选项非常适合开发环境：

eval-source-map - 每个模块使用 eval() 执行，并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
eval-cheap-source-map - 类似 eval-source-map，每个模块使用 eval() 执行。这是 “cheap(低开销)” 的 source map，因为它没有生成列映射(column mapping)，只是映射行数。它会忽略源自 loader 的 source map，并且仅显示转译后的代码，就像 eval devtool。
eval-cheap-module-source-map - 类似 eval-cheap-source-map，并且，在这种情况下，源自 loader 的 source map 会得到更好的处理结果。然而，loader source map 会被简化为每行一个映射(mapping)。

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

警告

你应该将你的服务器配置为，不允许普通用户访问 source map 文件！

hidden-source-map - 与 source-map 相同，但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会很有用。

警告

你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。