你真的懂webpack devtool source-map吗

webpack devtool配置

eval

当mode为development时且devtool没有设置时，默认为eval-source-map

生成代码和Source Map内容混淆在一起，通过eval输出。

 // index.tsx
import { add, getName } from "./math";

add(1, 2);

编译后的文件

一个文件有一个sourcemap

点击打印信息

可以直接跳转到源码

hidden

编译后的文件

没有sourcemap

点击打印信息

可以直跳转到编译过的代码

inline

Source Map内容通过base64放在js文件中引入。

// index.tsx
import { add, getName } from "./math";

add(1, 2);

编译后的文件

只有最后的一个sourcemap

点击打印信息

可以直接跳转到源码

nosources

使用这个关键字的Source Map不包含sourcesContent，调试时只能看到文件信息和行信息，无法看到源码。

// index.tsx
import { add, getName } from "./math";

add(1, 2);

编译后的文件

没有sourceMap

点击打印信息

无法看到源码

cheap

// index.tsx
import { add, getName } from "./math";

add(1, 2);

编译后的文件

只有最后的一个sourcemap

点击打印信息

不包含列信息(光标不会定位到具体位置，eval和inline会)，并且源码是进过loader处理过的

cheap-module

// index.tsx
import { add, getName } from "./math";

add(1, 2);

编译后的文件

只有最后的一个sourcemap

点击打印信息

不包含列信息，源码是开发时的代码

浏览器与source-map

浏览器加载source-map是通过js文件中的sourceMappingRUL来加载的，而且sourceMapping支持两种形式：文件路径或base64格式。

加载source-map之后，在浏览器dev tool中的Sources tab就能看到对应的信息了。

Source Map 的工作原理

执行打包后，生成 dist 文件夹，打开 dist/main.js

可以看到尾部有这句注释： //# sourceMappingURL=main.js.map

正是因为这句注释，标记了该文件的 Source Map 地址，浏览器才可以正确的找到源代码的位置。 sourceMappingURL 指向 Source Map 文件的 URL 。

除了这种方式之外，MDN中指出，可以通过 response header 的 SourceMap: <url> 字段来表明。

SourceMap: /path/to/file.js.map

dist 文件夹中，除了 main.js 还有 main.js.map ，这个文件才是 Source Map 文件，也是 sourceMappingURL 指向的 URL

Source Map规范

根据Source Map v3规范，推荐的格式是：

{
    "version" : 3,
    "file": "out.js",
    "sourceRoot": "",
    "sources": ["foo.js", "bar.js"],
    "sourcesContent": [null, null],
    "names": ["src", "maps", "are", "fun"],
    "mappings": "A,AAAB;;ABCDE;"
}
复制代码

下面来解释一下每个属性代表的含义。

属性	掘力值下限
version	Source Map文件版本
file	该Source Map对应文件的名称
sourceRoot	源文件根目录，这个值会加在每个源文件之前
sources	源文件列表，用于mappings
sourcesContent	源代码字符串列表，用于调试时展示源文件，列表每一项对应于sources
names	源文件变量名和属性名，用于mappdings
mappings	位置信息