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

转载 2016年08月23日 12:14:39

转自 https://segmentfault.com/a/1190000004280859

有人说 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 相关知识就会发现官方文档并不难懂,只是表述的比较简约,而且正是因为有了灵活的配置方式,我们才能在不同场景下获得最佳的效果。


相关文章推荐

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

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

从头到尾讲Webpack-实例篇(多种方法实现)

理解webpack概念之后,进一步了解下他的工作方式安装Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack sample project),在终端中转到该文件夹后执行下...

如果使用Python,不同的阶段应该有多种选项,反而容易让人困惑

工欲善其事必先利其器;  一个语言的好坏对初学者来说,主要是它呈现的用户界面,语法以及编译优化等底层的实现反而不是那么重要.  而这些界面有关的东西通过不同的工具有不同实现方式. 所以,找到和选择...

网络编程(9)—— 怎么获取和设置socket的输出\输入缓冲等多种可选项

套接字中可以设置和获取多种可选项,包括套接字的类型(TCP套接字还是UDP套接字)、接收和发送缓冲区的大小等等,详见《TCP/IP网络编程》140页。我们利用getsockopt和setsockopt...

一起学DNS系列(三)理解计算机的多种DNS后缀选项

上节介绍了计算机主DNS后缀的一些内容,今天这一节将继续延伸此话题,同时也谈到与之相关的其他概念。     本节的试验环境是一台DC和一台客户机相连,很简单的拓扑环境。如下图:     在WI...

WinForm中的ComoBox选项值的多种加载方法

在WinForm开发中,我们经常需要用到ComoBox控件,而该控件选项值一般是动态加载的,也就是说先从数据库查询出来,然后再加载到ComoBox的选项中。那么常见的动态加载选项值的方法又有哪几种呢?...

android window类的解释及软输入法模式选项:

Android的Window类 2011-03-25 10:02 by Keis, 110 visits, 网摘, 收藏, 编辑 Android的Window类(一)  Android的G...

使用Webpack创建vue的tab选项

首先创建主页模板:html {{tab01Text}} {{tab02T...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webpack sourcemap 选项多种模式的一些解释
举报原因:
原因补充:

(最多只允许输入30个字)