一、问题概述
我们很容易看出原本在第五行的错误在webpack打包后成了第十八行,这是因为前面还多了一串webpack 的代码,虽然不会影响正常的运行,但是对应我们调试代码还是很不方便的,毕竟我们想要的是直观的看到代码错误是在第几行。(以webpack举例,其实不止webpack,很多情况下都会出现这个问题)
因为大部分源码(尤其是各种函数库和框架)都要经过转换,才能投入生产环境。常见的源码转换,主要是以下三种情况:
(1)压缩,减小体积。比如jQuery 1.9的源码,压缩前是252KB,压缩后是32KB。
(2)多个文件合并,减少HTTP请求数。
(3)其他语言编译成JavaScript。最常见的例子就是CoffeeScript。
这三种情况,都使得实际运行的代码不同于开发代码,除错(debug)变得困难重重。
通常,JavaScript的解释器会告诉你,第几行第几列代码出错。但是,这对于转换后的代码毫无用处。举例来说,jQuery 1.9压缩后只有3行,每行3万个字符,所有内部变量都改了名字。你看着报错信息,感到毫无头绪,根本不知道它所对应的原始位置。
这就是Source map想要解决的问题。
二、什么是Source map
简单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。
有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。
接下来本文主要介绍在webpack中的用法,其他详情用法可以参考阮一峰老师的博客http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
三、webpack中soucemap的配置
1.souce-map
会生成map格式的文件,里面包含映射关系的代码
2.inline-souce-map
不会生成map格式的文件,包含映射关系的代码会放在生成的代码里
3.inline-cheap-souce-map
cheap有两种作用,一种是将错误只定位到行,不定位到列。二是映射业务代码,不映射loader和第三方库等,会提升打包的速度。
4.inline-cheap-modle-souce-map
module会映射loade和第三方库
5.eval
用eval的方式生成映射关系代码,效率和性能最佳,但是当代码复杂时,提示信息可能不准确。
推荐使用:
开发环境:devtool:' cheap-module-eval-souce-map'
生产环境:' cheap-module-souce-map '