一、sourcemap是什么
首先,sourcemap是一个存储了转换前后位置信息的独立map文件,这个.map格式的文件与源文件在同一个目录下。
二、为什么用sourcemap
在开发完整之后,我们通常会对代码进行转换:
常见的几种代码转换:
1、压缩,减体积;
2、合并,少请求;(多个文件合并成一个文件,以减少http请求)
3、其他语言编译为javascript
毫无疑问,代码转换会导致运行代码和开发代码出现差异,从而导致debug困难,sourcemap的启用很好的解决了这种问题,它将运行代码和开发代码的位置对应起来,通过这个位置关系我们可以方便的debug。
这就是使用sourcemap的意义。
三、怎么用sourcemap
1、传统方式:只需在转换后的代码尾部添加//@ sourceMappingURL=map文件地址即可
2、Webpack中sourcemap的配置
从官网的这张截图可以发现虽然配置模式很多,但是都是以下几个项目的组合:
(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