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

淩亂°似流年 2022-07-28 00:06 217阅读 0赞

# 有人说 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 格式化后的[字符串][Link 1]，而不是一个 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 的默认选项。  相关解释：  大部分情况我们调试并不关心列信息，而且就算 sourcemap 没有列，有些[浏览器][Link 2]引擎（例如 v8） 也会给出列信息，所以我们使用 cheap 模式可以大幅提高 souremap 生成的效率。  使用 eval 方式可大幅提高持续构建效率，参考 [webapck devtool 文档][webapck devtool] 下方速度对比表格，这对经常需要边改边调的前端开发而言，非常重要！  使用 module 可支持 babel 这种预编译工具（在 webpack 里做为 loader 使用）。  `eval-source-map` 使用 DataUrl 本身包含完整 sourcemap 信息，并不需要像 `sourceURL` 那样，浏览器需要发送一个完整请求去获取 sourcemap 文件，这会略微提高点效率  现实很残忍  大部分浏览器对于 sourcemap 的支持都非常有限，支持最好的 V8 也仅限于在 debugger 里面支持 sourcemap，对于错误的调用栈，我们看到的结果还是各种指向 bundle.js (除非是使用 eval + sourceURL 的方式)。  所以我做了 [stack-source-map][] 这个[项目][Link 3]，它能让 [chrome][] 的 error stack 支持所有的 webpack 打包模式，这样测试工具报错时，你就能第一时间找到错误处，后续还在考虑支持 vim 的 quickfix 列表，这样一旦出错，[开发者][Link 4]就可以直接在[编辑器][Link 5]内跳转到错误代码处。  如果您发现这个工具有什么问题，欢迎任何形式 [反馈][Link 6]  其实只要你了解 sourcemap 相关[知识][Link 7]就会发现官方文档并不难懂，只是表述的比较简约，而且正是因为有了灵活的配置方式，我们才能在不同场景下获得最佳的效果。      #

[Link 1]: http://www.07net01.com/tags-%E5%AD%97%E7%AC%A6%E4%B8%B2-0.html
[Link 2]: http://www.07net01.com/tags-%E6%B5%8F%E8%A7%88%E5%99%A8-0.html
[webapck devtool]: https://webpack.github.io/docs/configuration.html#devtool
[stack-source-map]: https://github.com/chemzqm/stack-source-map
[Link 3]: http://www.07net01.com/tags-%E9%A1%B9%E7%9B%AE-0.html
[chrome]: http://www.07net01.com/tags-chrome-0.html
[Link 4]: http://www.07net01.com/tags-%E5%BC%80%E5%8F%91%E8%80%85-0.html
[Link 5]: http://www.07net01.com/tags-%E7%BC%96%E8%BE%91%E5%99%A8-0.html
[Link 6]: https://github.com/chemzqm/stack-source-map/issues
[Link 7]: http://www.wredian.com/zhishi/