一、sourcemap是什么
首先，sourcemap是一个存储了转换前后位置信息的独立map文件，这个.map格式的文件与源文件在同一个目录下。
二、为什么用sourcemap
在开发完整之后，我们通常会对代码进行转换：
常见的几种代码转换：
1、压缩，减体积；
2、合并，少请求；（多个文件合并成一个文件，以减少http请求）
3、其他语言编译为javascript
毫无疑问，代码转换会导致运行代码和开发代码出现差异，从而导致debug困难，sourcemap的启用很好的解决了这种问题，它将运行代码和开发代码的位置对应起来，通过这个位置关系我们可以方便的debug。
这就是使用sourcemap的意义。
三、怎么用sourcemap
1、传统方式：只需在转换后的代码尾部添加//@ sourceMappingURL=map文件地址即可
2、Webpack中sourcemap的配置
sourcemap配置.png
从官网的这张截图可以发现虽然配置模式很多，但是都是以下几个项目的组合：
（1）eval：使用eval包裹模块代码
（2）cheap：不包含列信息
（3）source-map：产生.map文件
（4）module：包含loader的sourcemap
（5）inline：将.map作为DataURI嵌入，不单独生成.map文件（这个配置项比较少见）
（6）hidden：
（7）nosources：
参考文章：
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
https://segmentfault.com/a/1190000008315937
网友评论