页面初始运行时只会加载编译构建产物,直到特定事件发生 —— 例如在 Chrome 打开 Devtool 面板时,才会根据//# sourceMappingURL内容自动加载 Map 文件,并按 Sourcemap 协议约定的映射规则将代码重构还原回原始形态,这既能保证终端用户的性能体验,又能帮助开发者快速还原现场,提升线上问题的定位与调试效率。 1.1 示例 ...
设置为 `true`:在构建时生成 Source Map。 设置为 `'inline'`:将 Source Map 直接嵌入到生成的文件中。 Source Map 文件使用 在转换后的文件中通过添加注释的方式引入source map文件。例如: // jquery.min.js // ...转换后的代码 //# sourceMappingURL=jquery.min.map 最后一行注释的作用,是告知浏览器的...
//@ sourceMappingURL=/path/to/source.js.map 1. 运行时就会关联到源码: sourcemap 介绍完了,接下来一起来看下 webpack 的几种 sourcemap 配置。 前面说过,webpack 的 sourcemap 配置是 eval、cheap、nosources、inline、source-map 等基础配置的组合。 我们先分别来看下这几种基础配置: eval eval 的 api 是...
eval:浏览器 devtool 支持通过 sourceUrl 来把 eval 的内容单独生成文件,还可以进一步通过 sourceMappingUrl 来映射回源码,webpack 利用这个特性来简化了 sourcemap 的处理,可以直接从模块开始映射,不用从 bundle 级别。 cheap:只映射到源代码的某一行,不精确到列,可以提升 sourcemap 生成速度 source-map:生成 sourc...
(1). 根据源文件,生成source-map文件,webpack在打包时,可以通过配置生成source-map文件。[具体配置详见下面实操] (2). 转换后生成的代码(eg: bundle.js),最后添加一个注释,它指向sourcemap; //# sourceMappingURL=bundle.js.map (3). 需要浏览器开启一些配置,一般默认都是开启的。
// @ sourceMappingURL=map文件路径 就可以关联上 source map文件了 devtool webpack 通过devtool控制需要生成的 source map 类型 我们来看一下devtool的支持的属性devtool, 可以看到 source map 同时也分为很多种,但大体上都是加载形式的区别, 本质的核心还是相同的。
页面初始运行时只会加载编译构建产物,直到特定事件发生 —— 例如在 Chrome 打开 Devtool 面板时,才会根据 //# sourceMappingURL 内容自动加载 Map 文件,并按 Sourcemap 协议约定的映射规则将代码重构还原回原始形态,这既能保证终端用户的性能体验,又能帮助开发者快速还原现场,提升线上问题的定位与调试效率。
//# sourceMappingURL=main.bundle.js.map 然后同级目录下main.bundle.js.map,是比较详细的 Source Map 信息 { "version":3, "sources": [ "webpack://webpack5-template/./src/index.js" ], "names": [], "mappings":";;;AAAA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA,mB", "file...
eval包裹每个代码块时候,会在后面增加"sourceURL"(和sourcemap里的"sourceMappingURL"不同)用来定位到原文件。 eval模式优势在于,它是将每个模块单独eval执行,因此如果配合source-map使用,就可以单独缓存每个模块的sourcemap,这样就可以在重新构建时候实现增量修改sourcemap,节省时间。如果不使用eval模式,就是一个文件(chunk...
source-map:通过 sourceMappingURL 指向bundle.map.js文件,这个文件与原始文件之间存在映射 eval-source-map:不会生成map文件,但是存在 sourceMappingURL 储存map文件的 Base64 编码 inline-source-map:不会生成map文件,在注释中通过 sourceMappingURL 储存map文件的 Base64 编码 ...