webpack sourcemap 选项多种模式的一些解释

23


有人说 Webpack 难用,原因是 sourcemap 有 7 种,本文就尝试解释下这些选项都是什么意思,不仅如此,本文还会分析如何用最好的姿势使用这些配置。


先一项一项来看:

  • eval 文档上解释的很明白,每个模块都封装到 eval 包裹起来,并在后面添加 //# sourceURL

  • source-map 这是最原始的 source-map 实现方式,其实现是打包代码同时创建一个新的 sourcemap 文件, 并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿

  • hidden-source-map 文档上也说了,就是 soucremap 但没注释,没注释怎么找文件呢?貌似只能靠后缀,譬如 xxx/bundle.js 文件,某些引擎会尝试去找 xxx/bundle.js.map

  • inline-source-map 为每一个文件添加 sourcemap 的 DataUrl,注意这里的文件是打包前的每一个文件而不是最后打包出来的,同时这个 DataUrl 是包含一个文件完整 souremap 信息的 Base64 格式化后的字符串,而不是一个 url。

  • eval-source-map 这个就是把 eval 的 sourceURL 换成了完整 souremap 信息的 DataUrl

  • cheap-source-map 不包含列信息,不包含 loader 的 sourcemap,(譬如 babel 的 sourcemap)

  • cheap-module-source-map 不包含列信息,同时 loader 的 sourcemap 也被简化为只包含对应行的。最终的 sourcemap 只有一份,它是 webpack 对 loader 生成的 sourcemap 进行简化,然后再次生成的。

webpack 不仅支持这 7 种,而且它们还是可以任意组合的,就如文档所说,你可以设置 souremap 选项为 cheap-module-inline-source-map


这么多模式,到底该用哪个?

cheap-module-eval-source-map 绝大多数情况下都会是最好的选择,这也是下版本 webpack 的默认选项。

相关解释:

  1. 大部分情况我们调试并不关心列信息,而且就算 sourcemap 没有列,有些浏览器引擎(例如 v8) 也会给出列信息,所以我们使用 cheap 模式可以大幅提高 souremap 生成的效率。

  2. 使用 eval 方式可大幅提高持续构建效率,参考 webapck devtool 文档 下方速度对比表格,这对经常需要边改边调的前端开发而言,非常重要!

  3. 使用 module 可支持 babel 这种预编译工具(在 webpack 里做为 loader 使用)。

  4. eval-source-map 使用 DataUrl 本身包含完整 sourcemap 信息,并不需要像 sourceURL 那样,浏览器需要发送一个完整请求去获取 sourcemap 文件,这会略微提高点效率


现实很残忍

大部分浏览器对于 sourcemap 的支持都非常有限,支持最好的 V8 也仅限于在 debugger 里面支持 sourcemap,对于错误的调用栈,我们看到的结果还是各种指向 bundle.js (除非是使用 eval + sourceURL 的方式)。

所以我做了 stack-source-map 这个项目,它能让 Chrome 的 error stack 支持所有的 webpack 打包模式,这样测试工具报错时,你就能第一时间找到错误处,后续还在考虑支持 vim 的 quickfix 列表,这样一旦出错,开发者就可以直接在编辑器内跳转到错误代码处。

如果您发现这个工具有什么问题,欢迎任何形式 反馈


其实只要你了解 sourcemap 相关知识就会发现官方文档并不难懂,只是表述的比较简约,而且正是因为有了灵活的配置方式,我们才能在不同场景下获得最佳的效果。

本文同步发布与 [https://chemzqm.me/webpack-sourcemap/]

你可能感兴趣的

11 条评论
chemzqm 作者 · 2016年10月15日

最新版 Chrome 53 修复了之前 devtools sourcemap 的严重错误

+1 回复

然后 · 2016年01月11日

学习了

回复

Dickeylth · 2016年06月21日

使用 cheap-module-eval-source-map 在 Chrome 下 debug,打了断点不进去,楼主有遇到过么?

回复

0

试了下firefox 52.0.1 版本,debugger 里可以支持 cheap-module-eval-source-map 模式下的源码断点调试

jinmmd · 2017年03月22日
chemzqm 作者 · 2016年06月21日

确实有这个问题,应该是 chrome 的 bug,我升级 chrome 之前没遇到过,只能在需要断点调试时改回 sourcemap

回复

xuqinggangsls · 2016年10月27日

使用cheap-module-eval-source-map在chrome下debug,进入到源文件,只显示出 `undefined
/ WEBPACK FOOTER
**
**/`
退而求其次,使用module-eval-source-map 可源码调试。
这个问题是什么问题?chrome问题嘛?我的chrome是54

回复

chemzqm 作者 · 2016年10月28日

@xuqinggangsls 我的 chrome 现在也有这个 bug

回复

PaulHan · 2016年12月15日

55版的chrome试过这两种配置还是没用啊?

回复

chemzqm 作者 · 2016年12月19日

@PaulHan chrome sourcemap 的 cheap-module 支持坏了, 我现在用的 inline-eval-source-map

回复

0

试了下firefox 52.0.1 版本,debugger 里可以支持 cheap-module-eval-source-map 模式下的源码断点调试

jinmmd · 2017年03月22日
红枫星空 · 2017年11月10日

调试的时候错行了,这个怎么办?

回复

载入中...