始终以来对source map 都懵懵懂懂， 被webpack 所提供的多样的source 给乱花了眼。 这次就决定来一一尝试一下各种source map的区别

什么是source map

古代的前端开发总是随同的各种框架， 在应用这些框架开发的代码须要通过编译才能够在生产环节应用， 编译后就随同着可读性的升高，也会影响咱们的谬误调试。
那source map就是为了解决这个问题。

Source map能够了解为一个地图， 通过它能够获知编译后的代码 对应编译前的代码地位。这样当代码遇到异样， 咱们就能够通过报错信息定位至精确的地位。 同时在浏览器 sources 也能够查看到源码。

编译后的代码内只须要蕴含这样一句

// @ sourceMappingURL=map文件门路

就能够关联上 source map文件了

devtool

webpack 通过 devtool 管制须要生成的 source map 类型

咱们来看一下 devtool 的反对的属性devtool, 能够看到 source map 同时也分为很多种，但大体上都是加载模式的区别， 实质的外围还是雷同的。

把它们列举进去竟然有这么多

• eval
• eval-cheap-source-map
• eval-cheap-module-source-map
• eval-source-map
• cheap-source-map
• cheap-module-source-map
• source-map
• inline-cheap-source-map
• inline-cheap-module-source-map
• inline-source-map
• eval-nosources-cheap-source-map
• eval-nosources-cheap-module-source-map
• eval-nosources-source-map
• inline-nosources-cheap-source-map
• inline-nosources-cheap-module-source-map
• inline-nosources-source-map
• nosources-cheap-source-map
• nosources-cheap-module-source-map
• nosources-source-map
• hidden-nosources-cheap-source-map
• hidden-nosources-cheap-module-source-map
• hidden-nosources-source-map
• hidden-cheap-source-map
• hidden-cheap-module-source-map
• hidden-source-map

看到这么多，曾经开始慌了。 不过不必怕， 其实咱们了解外围的几个关键字就能够了。

来看一下文档上对这些命名的解释，

• eval- ：应用eval 生成source map , 不会生成额定的 .map 文件， 而是在eval 函数内附加 source map 。 举荐用于开发环境， 因为 相对来说构建和热更新都比拟快。
• inline-* ： 将SourceMap内联到原始文件中，同样 不会生成额定的 .map 文件。
• hidden-* ：addition会生成source map 然而不会将其关联， 也就是不会在编译后的代码内增加下面提到的那个映射语句。
• nosources-* ：sourcemap 中不带源码， 但会有精确的谬误行列信息， 防止源码泄露。
• cheap-* ： 疏忽列信息，source map 只有行映射，能够放慢打包速度
• cheap-module-* ： moudle 要害子肯定是跟 cheap 一起应用的， 示意所映射的阶段， 如果没有 module 映射的是 loader 解决前的代码信息，如果加了 module 那就是 loader 解决后的源码， 举个例子， const a = 1 这行， 如果没加 module 那拿到的就是转为 es5 的 var a = 1, 如果加了module , 那拿到的就是 const a = 1

了解了这些之后，再来看下面这一堆不同类型的 source map 也就能看懂了。

什么？ 还不懂？ 那咱们来入手尝试一下几个典型的！

咱们在代码内成心打印未定义的变量 c, 看看不同的 source map 下的错误信息后果

留神： 行号为 9

eval

批改配置

首先咱们在 devtool 填写 eval 。

运行构建

进行一次 run build 构建看看。

能够看到生成的后果， 上方正文写明了这是来自哪个文件的编译后果， 当然这个是 webpack 的加载逻辑， 咱们这里能够不必太过关系， 往外部看， 外部是一个 eval 函数， 外部是编译后的代码。

而后咱们看到开端， eval 的开端有 sourceURL=webpack:///./src/views/About.vue? 。

错误信息

而后咱们运行一下我的项目， 看看他的报错信息如何。

能够看到其实并不是十分清晰的， 瞅一眼大略能明确是哪个文件爆的错， 但行号之类的齐全不对，而且点击进去的也是编译后的信息

查看详情：

齐全是编译后的代码。

这就是 eval 模式下的 source map 形式， 他不会生成理论的 .map 文件， 但会在 eval 函数开端增加对本来文件的映射语句， 指向源文件本地地址， 同时调试体验也较差。 因而也就无奈在生产环境应用了。

如果想要更清晰的错误信息还是须要应用 eval-source-map

source-map

最规范的 source-map 打包模式

批改配置：

运行构建：

能够看到生成了很多 .map 文件

进入一份js文件， 咱们能够看到代码的开端关联了一份 .map 文件

错误信息：

能够看到谬误定位还是比拟精确的， 找到了正确的 9 行，而后咱们点进去看看

很完满，是咱们正确的源码信息, 并且胜利定位到具体列。

inline-source-map

运行构建：

没有 .map 文件的产出

source map 数据间接内联

错误信息：

能定位到 行号

查看详情：

完满展现，同样也可能定位至列

nosources-source-map

运行构建：

有 .map 文件

有门路映射

错误信息:

行号精确

查看详情:

没有源码信息， 无奈加载

hidden-source-map

运行构建：

有 .map 文件

没有映射门路

错误信息:

错误信息含糊

查看详情:

齐全是编译后的代码

cheap-source-map

运行构建:

有 .map 文件

有映射门路

错误信息:

行号不正确

查看详情:

是被解决过的代码，并且没有定位到具体列

cheap-module-source-map

运行构建：

有 .map 文件

有映射门路

错误信息:

行号正确

查看详情:

正确的源码，但无奈定位到具体列。

结尾

搞清楚 source map 这些区别的要害就在于先要弄懂关键字所示意的含意，其余的都是 “组装” 。

本文由博客一文多发平台 OpenWrite 公布！