webpack中的sourcemap
阅读数:136 评论数:0
跳转到新版页面分类
html/css/js
正文
sourcemap和Data URL
1、sourcemap
我们在打包中，将开发环境中源代码经过压缩、去空格、babel编译转化，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，会造成无法debug的问题。
sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁，主要是方便开发人员的错误定位。
2、DataUrl
DataUrl最早出现在HTML文件img标签中关于图片的引用，DataURL提供了一种将图片嵌入到HTML中的方法。
跟传统img的src属性指向服务器中某引图片的地址不同，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。
<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">webpack中的Sourcemap
webpack在打包中同样支持sourcemap，并且提供了十几种的组合。
1、eval
每个模块都执行eval()过程，并且会追加//@ sourceURL
2、eval-source-map
每个模块在执行eval过程之后，并且会为每一个模块生成sourcemap文件，生成的sourcemap文件通过DataURL的方式添加。
3、cheap-eval-source-map
跟eval-source-map相同，唯一不同的忽略了行的信息，也不会生成不同loader模块之间的sourcemap
4、cheap-module-eval-source-map
与cheap-eval-source-map相同，但是包含了不同loader模块之间的sourcemap.
不同的环境中如何选择sourcemap的类型
（1）在源代码的列信息是没有意义的，只要有行信息就能完整的建立打包前后代码之间的依赖关系。因此不管是开发环境还是生产环境，我们都会增加cheap基本类型来忽略模块打包前后的列信息关联。
（2）不管在生产还是开发环境，我们都需要定位debug到最原始的资源，比如定位错误到jsx、coffeeScript的原始代码处，而不是编译成js的代码处，因此，不能忽略module属性。
（3）希望生成.map文件的形式，因此要增加source-map属性。
（4）在生产中，使用eva-source-map会使打包后的文件太大，因此在生产环境中不会使用eval-source-map
在开发环境中使用：cheap-module-eval-source-map
在生产环境中使用：cheap-module-source-map.