webpack source map详解

1. 什么是source map ?

根据名字可以推测出source map就是我们编译后的源文件映射。当使用webpack 编译前端项目时，配置项devtool控制是否生成source map。

2. 分类

source map 文件可分为2类，内联型和外联（独立）型：

内联源映射，将映射的数据之间添加在生成的文件中，在.map文件中的‘sourcesContent’字段来存放源码
外联源映射，将映射数据存储在单独的映射文件中，使用标记将源链接到源码，一般会去掉源码中的注释

3. 关键字与模式

webpack为source map 提供了5个关键字eval，source-map，cheap，module，inline；以及从关键字衍生出来的7种不同模式。

5个关键字的含义见下表：

eval	使用eval包裹模块代码
source-map	生成.map文件
cheap	不包含列信息，也不包含loader的sourcemap
module	包含loader的的sourcemap
inline	将.map作为DataURI嵌入，不单独生成.map文件

webpack配置文件中由上面几个关键字衍生出来的debtool7中模式如下表格：

模式	含义	类型
eval	生成的代码每个模块都被eval执行，并且存在//@sourceURL	内联
cheap-eval-source-map	只包含行数据而不包含列映射。	内联
eval-source-map	每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap，比较慢。	内联
hidden-source-map	和 source-map 一样，但不会在 bundle 末尾追加注释。	外联
cheap-source-map	转换代码（行内）生成的sourcemap没有列映射，从loaders生成的sourcemap没有被使用	外联
cheap-module-source-map	生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。	外联
source-map	原始代码最好的sourcemap质量有完整的结果，但速度是最慢的。	外联

3. eval模式

使用eval将webpack中每个模块包裹，然后在模块末尾添加模块来源//# souceURL，依靠souceURL找到原始代码的位置。包含eval关键字的配置项并不单独产生.map文件，依靠sourceURL来定位原始代码。

4. source-map模式

都会产生一个.map文件，该文件保存有原始代码与运行代码的映射关系，浏览器可以通过它找到原始代码的位置。（注：包含inline关键字的配置项也会产生.map文件，但是这个map文件是经过base64编码作为DataURI嵌入）。使用.map文件的方式来定位。

举个栗子：eval-source-map是eval和source-map的组合，可知使用eavl语句包括模块，也产生了.map文件。webpack将.map文件作为DataURI替换eval模式中末尾的//# souceURL。

5. source map文件格式

Source map文件的基本格式如下：

- version：Source map的版本，目前为3。
- file：转换后的文件名。
- sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
- sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
- names：转换前的所有变量名和属性名。
- mappings：记录位置信息的字符串，下文详细介绍。

mappings属性：
关键就是map文件的mappings属性。这是一个很长的字符串，它分成三层。
第一层是行对应，以分号（;）表示，每个分号对应转换后源码的一行。所以，第一个分号前的内容，就对应源码的第一行，以此类推。
　第二层是位置对应，以逗号（,）表示，每个逗号对应转换后源码的一个位置。所以，第一个逗号前的内容，就对应该行源码的第一个位置，以此类推。
　第三层是位置转换，以VLQ编码表示，代表该位置对应的转换前的源码位置。

有错误之处，欢迎指正。

参考资料：

source-maps

Webpack devtool source map

webpack source map详解相关推荐

.map文件源映射(Source Map)详解
一.什么是源映射为了提高性能,很多站点都会先压缩 JavaScript 代码然后上线, 但如果代码运行时出现错误,浏览器只会显示在已压缩的代码中的位置,很难确定真正的源码错误位置. 这时源映射就登场 ...
linux source.命令,linux下source命令详解
本文收集整理关于linux下source命令详解的相关议题,使用内容导航快速到达. 内容导航: Q1:linux下的source命令 linux下的source命令source 命令是 bash sh ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
webpack 入口文件 php,webpack的使用详解
这次给大家带来webpack的使用详解,使用webpack的注意事项有哪些,下面就是实战案例,一起来看一下. 1.安装//全局安装npm install -g webpack//安装到你的项目目录np ...
MySQL 数据库 source 命令详解及实例
MySQL 数据库 source 命令详解及实例 MySQL 数据库 source 命令,该命令是数据库导入命令.source 命令的用法非常简单,首先你需要进入 MySQL 数据库的命令行管理界面, ...
java map详解
java map详解 Map 是一种键-值对(key-value)集合,Map 集合中的每一个元素都包含一个键对象和一个值对象.其中,键对象不允许重复,而值对象可以重复,并且值对象还可以是 Map 类 ...
sync.Map详解
导航 Golang sync.Map 详解简单的介绍一下 Golang Map Map 使用 sync.Map sync.Map 是什么 sync.Map 使用 sync.Map 剖析 sync.m ...
java中list和map详解
java中list和map详解一.概叙 List , Set, Map都是接口,前两个继承至Collection接口,Map为独立接口, List下有ArrayList,Vector,LinkedL ...
java中set和ge什么么意思,java的Collection和Map详解
java的Collection和Map详解线性表,链表,哈希表是常用的数据结构,在进行Java开发时,JDK已经为我们提供了一系列相应的类来实现基本的数据结构.这些类均在java.util包中.本文 ...

webpack source map详解

webpack source map详解相关推荐

最新文章

热门文章