Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术。尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换。比如开发环境下用scss写样式, 想在浏览器中在线编辑css那样编辑scss就不是那么容易了。从我自己看过的资料中, sourcemap的概念最早出现在12年, jquer1.9是较早支持sourcemap的库。这篇博客比较有代表性:Introduction to JavaScript Source Maps,阮一峰的文章JavaScript Source Map 详解也大量参考该博客。关于sourcemap的原理及作用,基本在这两篇文章中讲清楚了。回到webpack中的sourcemap,就我这几天的琢磨, 这方面资料相对比较零散,但凡搜索Webpack中sourcemap的配置, 总是能得到千篇一律的如下信息: Sourcemap type Quality Notes eval: 生成代码 每个模块都被eval执行,并且存在@sourceURL cheap-eval-source-map: 转换代码(行内) 每个模块被eval执行,并且sourcemap作为eval的一个dataurl cheap-module-eval-source-map: 原始代码(只有行内) 同样道理,但是更高的质量和更低的性能 eval-source-map: 原始代码 同样道理,但是最高的质量和最低的性能 cheap-source-map: 转换代码(行内) 生成的sourcemap没有列映射,从loaders生成的sourcemap没有被使用 cheap-module-source-map: 原始代码(只有行内) 与上面一样除了每行特点的从loader中进行映射 source-map: 原始代码 最好的sourcemap质量有完整的结果,但是会很慢 webpack中devtool的配置的官方文档在这 :webpack-devtool 疑问 反正我看完这些说明是云里雾里, 就我自己而言, 有3个疑问: eval和sourcemap有什么关系,eval模式是sourcemap吗? 包含cheap关键字的配置中只有行内是什么意思? 这几种不同的配置有什么区别? 解答 看似配置项很多, 其实只是五个关键字eval,source-map,cheap,module,inline的任意组合。这五个关键字每一项都代表一个特性, 这四种特性可以任意组合。它们分别代表以下五种特性(单独看特性说明有点不明所以,别急,往下看): eval: 使用eval包裹模块代码 source-map: 产生.map文件 cheap: 不包含列信息(关于列信息的解释下面会有详细介绍)也不包含loader的sourcemap module: 包含loader的sourcemap(比如jsx to js ,babel的sourcemap) inline: 将.map作为DataURI嵌入,不单独生成.map文件(这个配置项比较少见) 了解了以上各种不同特性, 再来逐一解答以上问题。 eval和sourcemap有什么关系,eval模式是sourcemap吗? eval和source-map都是webpack中devtool的配置选项, eval模式是使用eval将webpack中每个模块包裹,然后在模块末尾添加模块来源//# souceURL, 依靠souceURL找到原始代码的位置。包含eval关键字的配置项并不单独产生.map文件(eval模式有点特殊, 它和其他模式不一样的地方是它依靠sourceURL来定位原始代码, 而其他所有选项都使用.map文件的方式来定位)。包含source-map关键字的配置项都会产生一个.map文件,该文件保存有原始代码与运行代码的映射关系, 浏览器可以通过它找到原始代码的位置。(注:包含inline关键字的配置项也会产生.map文件,但是这个map文件是经过base64编码作为DataURI嵌入),举个栗子:eval-source-map是eval和source-map的组合,可知使用eavl语句包括模块,也产生了.map文件。webpack将.map文件作为DataURI替换eval模式中末尾的//# souceURL。按照我自己的理解, eval和.map文件都是sourcemap实现的不同方式,虽然大部分sourcemap的实现是通过产生.map文件, 但并不表示只能通过.map文件实现。下面是eval模式后产生的模块代码: 包含cheap关键字的配置中只有行内是什么意思? 这里的列信息指的是代码的不包含原始代码的列信息。 官方文档对于包含cheap的解释是这样的: > cheap-source-map - A SourceMap without **column-mappings**. SourceMaps > from loaders are not used. 这句话翻译过来就是“在cheap-source-map模式下sourcemap不包含列信息,也不包含loaders的sourcemap”这里的“column-mappings”就是代码列数的意思,是否包含loaders的sourcemap有什么区别将在之后提到。debug的时候大部分人都只在意代码的行数, 很少关注列数, 列数就是该行代码从第一个字符开始到定位字符的位置(包括空白字符)包含cheap关键字的模式不包含列信息,体现在webpack中就是:如果包含cheap关键字,则产生的.map文件不包含列信息。也就是说当你在浏览器中点击该代码的位置时, 光标只定位到行数,不定位到具体字符位置。而不包含cheap关键字时, 点击控制台log将会定位到字符位置。 包含列信息后点击原始代码的定位,注意光标位置: 不包含列信息的光标位置: 这篇博客:Go to a line number at a specific column直观地展示了列数的概念。如果深入到webpack中的细节中体会该配置项,可以看这篇博客:SurviveJS:Source Maps ,该文章对比了webpack中所有配置项中.map文件的代码,这里截取eval-source-map和cheap-source-map的模式产生的.map文件代码中的mappings字段对比: devtool: 'eval-source-map' "mappings": "AAAAA,QAAQC,GAAR,CAAY,aAAZ", devtool: 'cheap-source-map' "mappings": "AAAA", 注:这里使用了VLQ编码,(关于VLQ编码还可参考这里:前端构建:Source Maps详解) 在VLQ编码中,逗号,表示字符列分割,分号;表示行分割。包含cheap关键字的配置项不包含列信息,也就没有逗号。关于VLQ编码, 本文最初的阮一峰的文章中有所解释。而不包含loader的sourcemap指的是不包含loader的sourcemap,不包含它时候如果你使用了诸如babel等代码编译工具时, 定位到的原始代码将是经过编译后的代码位置,而非原始代码。 比如当我用babel编译JS的时候,如果包含不包含loaders的sourcemap,此时debug到的将是编译后的代码, 而非原始代码,如图(这是使用cheap-source-map模式未包含loaders的sourcemap情况下的截图, debug的位置与之前的对比截图是同一个地方): 这几种不同的配置有什么区别? 通过以上两个问题的解释, webpack中的sourcemap各个配置项异同应该有了一定认识,乍看之下各个配置项很难记忆, 但其实从每个关键字所代表的特性入手, 就能体会到他们的异同。他们在webpack中的主要区别一个体现在重构的性能上, 总的来说eval性能最好,source-map性能最低,但就我自身的实践来看大多用的是最完整的source-map,该模式对于不管是js还是css,scss等都能很好的覆盖, 相反其他模式都不完整, 在开发环境下重构性能似乎比不上功能的完善。 另外需要补充的是module关键字, 当加上module关键字webpack将会添加loader的sourcemap。

【转】webpack中关于source map的配置的更多相关文章

  1. 让 webpack 加载 Source Map

    在浏览器中运行的 JavaScript 代码都是编译器输出的代码,这些代码的可读性很差.如果在开发过程中遇到一个不知道原因的 Bug,则你可能需要通过断点调试去找出问题. 在编译器输出的代码上进行断点 ...

  2. Webpack的详细配置,[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  3. Javascript 如何生成Less和Js的Source map

    为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用 ...

  4. source map 的原理探究

    线上产品代码一般是编译过的,前端的编译处理过程包括不限于 转译器/Transpilers (Babel, Traceur) 编译器/Compilers (Closure Compiler, TypeS ...

  5. webpack中clean-webpack-plugin插件使用遇到的问题及解决方法

    webpack 会生成文件,然后将这些文件放置在 /dist 文件夹中,但是 webpack 无法追踪到哪些文件是实际在项目中用到的. 通常,在每次构建前清理 /dist 文件夹,是比较推荐的做法,因 ...

  6. 聊一聊 webpack 中的 preloading 和 Prefetching

    聊一聊 webpack 中的 preloading 和 Prefetching 提到 Preloading 和 Prefetching 就不得不先说一下代码分割,通过下面的例子我们来说明为什么需要代码 ...

  7. Vue、webpack中默认的config.js、index.js 配置详情

    在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.reso ...

  8. 第五十八篇:webpack的Source Map

    好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中 ...

  9. webpack之source map

    先来一个webpack小例子,项目结构如下: // greeter.js module.exports = function() { var greet = document.createElemen ...

随机推荐

  1. servlet相关 jar包位置 BAE上部署web应用

    1手动编译servlet工程: 要编译servlet,则类路径classpath中必须包括Servlet API 的相关类,如果使用的web容器是Tomcat,则这些类通常封装在在tomcat的lib ...

  2. ASP.NET使用百度编辑器(UEditor)使用方法

    ASP.NET使用百度编辑器(UEditor)方法如下 第一步到百度官网下载百度编辑器 http://ueditor.baidu.com/website/download.html 下载.net版本 ...

  3. office excel Query 功能

    Microsoft Query 合并查询 Excel 2016 默认已集成 Power Query 功能

  4. VLC媒体视频播放器 v3.0.2官方版

    https://www.videolan.org/    VLC media player http://www.pc6.com/softview/SoftView_52483.html    VLC ...

  5. 九度OJ小结

    1. 高精度问题 可参考题目 题目1137:浮点数加法   http://ac.jobdu.com/problem.php?pid=1137 对于高精度问题可以考虑使用结构体.上述为浮点数加法,因此该 ...

  6. LeetCode 32 Longest Valid Parentheses(最长合法的括号组合)

    题目链接: https://leetcode.com/problems/longest-valid-parentheses/?tab=Description   Problem :已知字符串s,求出其 ...

  7. Stooge 排序

    Stooge排序是一种低效的递归排序算法,甚至慢于冒泡排序.在<算法导论>第二版第7章(快速排序)的思考题中被提到,是由Howard.Fine等教授提出的所谓“漂亮的”排序算法. 实现 如 ...

  8. Unity3D笔记 GUI 三、实现选项卡二窗口

    实现目标: 1.使用个性化Box控件 2.个性化Lable控件 3.添加纵向滚动条 4.新建SelectedItem样式 一.最终效果: 二.主要代码 using UnityEngine; using ...

  9. 火狐浏览器adobe flash player

    最近Firefox火狐浏览器已停止Flash Player 18.0.0.203运行 在Mozilla官方公告中,该公司提到Flash Player 18.0.0.203插件存在已知安全漏洞,建议用户 ...

  10. Oracle创建测试表

    试中文排序的数据库版本: SQL> select * from v$version; BANNER ----------------------------------------------- ...