页面初始运行时只会加载编译构建产物,直到特定事件发生 —— 例如在 Chrome 打开 Devtool 面板时,才会根据//# sourceMappingURL内容自动加载 Map 文件,并按 Sourcemap 协议约定的映射规则将代码重构还原回原始形态,这既能保证终端用户的性能体验,又能帮助开发者快速还原现场,提升线上问题的定位与调试效率。 1.1 示例 ...
设置为 `true`:在构建时生成 Source Map。 设置为 `'inline'`:将 Source Map 直接嵌入到生成的文件中。 Source Map 文件使用 在转换后的文件中通过添加注释的方式引入source map文件。例如: // jquery.min.js // ...转换后的代码 //# sourceMappingURL=jquery.min.map 最后一行注释的作用,是告知浏览器的...
A. source-map :【生成一个独立的source-map文件】,并且在bundle文件中有一个注释,指向source-map文件; //# sourceMappingURL=bundle.js.map B. eval-source-map: 会生成sourcemap,但是source-map是以DataUrl添加到eval函数的后面 C. inline-source-map: 会 生成sourcemap,但是source-map是以DataUrl添加到bundle...
//@ sourceMappingURL=/path/to/source.js.map 1. 运行时就会关联到源码: sourcemap 介绍完了,接下来一起来看下 webpack 的几种 sourcemap 配置。 前面说过,webpack 的 sourcemap 配置是 eval、cheap、nosources、inline、source-map 等基础配置的组合。 我们先分别来看下这几种基础配置: eval eval 的 api 是...
比如编译后代码的第 3 行第 4 列,对应着源码里的第 8 行第 5 列这种,这叫做一个 mapping。 sourcemap 的格式如下: {version:3,file:"out.js",sourceRoot:"",sources:["foo.js","bar.js"],names:["a","b"],mappings:"AAgBC,SAAQ,CAAEA;AAAEA",sourcesContent:['const a = 1; console.log(...
你会发现生成的代码也是用 eval 包裹的,但除了 sourceUrl 外,还有 sourceMappingUrl: 再运行的时候除了 eval 的代码会生成文件放在 sources 外,还会做 sourcemap 的映射: webpack 的 sourcemap 的配置就利用了浏览器对 eval 代码的调试支持。 所以为什么这个配置项不叫 sourcemap 而叫 devtool 呢?
source-map:通过 sourceMappingURL 指向bundle.map.js文件,这个文件与原始文件之间存在映射 eval-source-map:不会生成map文件,但是存在 sourceMappingURL 储存map文件的 Base64 编码 inline-source-map:不会生成map文件,在注释中通过 sourceMappingURL 储存map文件的 Base64 编码 ...
// @ sourceMappingURL=map文件路径 就可以关联上 source map文件了 devtool webpack 通过devtool控制需要生成的 source map 类型 我们来看一下devtool的支持的属性devtool, 可以看到 source map 同时也分为很多种,但大体上都是加载形式的区别, 本质的核心还是相同的。
页面初始运行时只会加载编译构建产物,直到特定事件发生 —— 例如在 Chrome 打开 Devtool 面板时,才会根据 //# sourceMappingURL 内容自动加载 Map 文件,并按 Sourcemap 协议约定的映射规则将代码重构还原回原始形态,这既能保证终端用户的性能体验,又能帮助开发者快速还原现场,提升线上问题的定位与调试效率。
Source map可以理解为一个地图, 通过它可以获知编译后的代码 对应编译前的代码位置。这样当代码遇到异常, 我们就可以通过报错信息定位至准确的位置。 同时在浏览器 sources 也可以查看到源码。 编译后的代码内只需要包含这样一句 // @ sourceMappingURL=map文件路径 ...