4-2 webpack使用mapsource调试

一.什么是Sourcemap

Sourcemap是为了解决在实际运行代码（打包后的）出现问题时，无法定位到开发环境中的源代码的问题。为了让资源更小，加载速度更快，在js项目部署之前都会将代码混淆压缩，将less、sass 、typeScript 等其他语言编译成 css 或 JS ，这样就可以使浏览器识别。但是这样也带来了影响，当代码中出现问题时，只能定位到压缩之后的代码，出错以后只会告诉我们第几行有错误。而压缩之后的代码一般就只有一两行，每一行上万字符，对排除检查几乎没有帮助。而sourceMap的存在就是为了解决这个问题，它帮助我们将压缩的代码在控制台中转换成源码。

二.devtool

如果需要启用Sourcemap，就需要用到devtool。
devtool选项：

(1)eval
每个模块都使用 eval() 执行，每一个模块后会增加sourceURL来关联模块处理前后的对应关系。如下图：