学习笔记 - SourceMap

devtool

官方表格：

devtool	build	rebuild	production	quality
(none)	+++	+++	yes	bundled code
eval	+++	+++	no	generated code
cheap-eval-source-map	+	++	no	transformed code (lines only)
cheap-module-eval-source-map	o	++	no	original source (lines only)
eval-source-map	--	+	no	original source
cheap-source-map	+	o	no	transformed code (lines only)
cheap-module-source-map	o	-	no	original source (lines only)
inline-cheap-source-map	+	o	no	transformed code (lines only)
inline-cheap-module-source-map	o	-	no	original source (lines only)
source-map	--	--	yes	original source
inline-source-map	--	--	no	original source
hidden-source-map	--	--	yes	original source
nosources-source-map	--	--	yes	without source content

+++ super fast, ++ fast, + pretty fast, o medium, - pretty slow, -- slow

关于 quality 的说明：

• bundled code 在开发者工具中会直接看到最终生成的合并过后的超大 js ，而不会看到按照源码分离的模块。

• generated code 能够看到按源码分离的各个模块，模块内容是 webpack 处理后的。比如，如果源码里面是 import {test} from "module"; ，那么在开发者工具中看到的大致是 var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a(); 。

• transformed code 能够看到按源码分离的各个模块，看到的模块内容是经过 loaders 处理之后的，但是未经过 webpack 处理的代码。比如，如果源码中是 import {test} from "module"; class A extends test {} ，那么此处看到的是 import {test} from "module"; var A = function(_test) { ... }(test); 。

• original source 能够看到按源码分离的各个模块，看到的模块内容是编译转换之前的，和源码里面的一致。这个需要 loader 支持，如果某个模块经过的某个 loader 没有正确处理 Source Map ，那么最终生成的代码是无法正确映射到源码上的。

• without source content Source Map 不包含源码内容。通常浏览器会尝试从 web 服务器或者文件系统中加载源码，此时必须确保设置了正确的 output.devtoolModuleFilenameTemplate 。

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