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将js打包后的map文件

类似于这样的map文件 由webpack自动生成 参数: devtool: '#eval-source-map',//映射js到原文件...
  • qq_26632807
  • qq_26632807
  • 2017年06月30日 11:00
  • 2304

一小时包教会 —— webpack 入门指南

什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 ...
  • yczz
  • yczz
  • 2015年10月19日 15:28
  • 26989

webpack配置及使用

npm:node.js下面的一个模块,里面有很多插件,服务器在国外 cnpm:淘宝创建的一个npm网站的镜像,从里面就可以直接下到npm下的插件,所以我们在dos中下插件一般npm和cnpm开头都行...
  • jackYouth
  • jackYouth
  • 2016年12月08日 19:17
  • 1456

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

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

webpack 在开发还是上线的时候都支持soucemap的功能 学习心得

最近项目中在使用react/redux/koa做一个IM,打包工具自然选择了webpack 我主要使用了webpack 的下列功能 webpack 打包编译js文件 编译js文件支持多入口,版...
  • chengnuo628
  • chengnuo628
  • 2016年09月09日 11:20
  • 7873

如何降低Vue.js项目中Webpack打包文件的大小?

结论结论:vue中,直接引用文件,可以让打包文件最小。
  • maray
  • maray
  • 2016年03月26日 19:48
  • 18965

webpack 前端加载工具 让 浏览器端 javascript 执行 CommonJS规范

转载自:webpack 前端加载工具 让 浏览器端 javascript 执行 CommonJS规范 (注意:博主在读原文进行实践的过程中,遇到了一些小问题,这里贴出问题的解决方案: ERROR in...
  • qq_15096707
  • qq_15096707
  • 2016年09月10日 10:49
  • 2043

webpack使用css-loader?sourceMap导致font(eot、ttf)等无法加载问题

使用webpack的css-loader?sourceMap时,在.scss文件中@font-face字体后,经过webpack编译后,导致无法显示字体,原因大概是由于url的问题,有兴趣的同学请参考...
  • u010576965
  • u010576965
  • 2017年02月15日 12:32
  • 1071

webpack开发和生产两个环境的配置详解

目录 webpack.base.conf.jswebpack.dev.conf.jswebpack.prod.conf.js 一开始在接触webpack 的时候,简直痛不欲生,现在回头看,做个...
  • itKingOne
  • itKingOne
  • 2017年04月21日 16:35
  • 16952

webpack 使用总结

前言 本文是对近半年使用 webpack 的一个总结。webpack 作为 配置型的工具,虽然配置项很多、功能强大,但是用起来并不复杂。文内主要内容来自网络摘抄以及翻译官网文档,相对比较全面。 ...
  • u010537398
  • u010537398
  • 2017年02月22日 14:47
  • 1407
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webpack sourcemap 选项多种模式的一些解释
举报原因:
原因补充:

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