关于JavaScript代码报错但是代码对应错误问题（soucemap用法）

一、问题概述

我们很容易看出原本在第五行的错误在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 '