什么是Source Maps
Source Map字面意思就是原始地图，当开发环境中的源代码经过压缩，去空格，babel编译转化后，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，当打包出现问题需要我们debug的时候，我们往往都感到很头疼，因为打包后的文件都是压缩到一起的，我们很难找到问题所在，这样严重影响调试效率。为了我们开发过程中debug更方便快捷，我们就要用到Source Maps来定位到开发中的源代码。
Source map就是一个信息文件，里面储存着位置信息，也就是说，转换后的代码的每一个位置，所对应的转换前的位置。当我们在开发中出错的时候，出错工具将直接显示原始代码，而不是转换后的代码，这样使得编译后的代码可读性更高，也更方便快捷调试。
在webpack配置中配置source maps时我们需要先配置devtooldevtool配置有四种不同的方法，具体如下：
devtool配置 | 描述 |
| 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的 |
| 在一个单独的文件中生成一个不带列映射的 |
| 使用 |
| 这是在打包文件时最快的生成 |
注意：cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。
从以上的四个位置方法来看，自上而下打包速度越来越快，但是在打包过程中也出现了各种隐患，这也验证了一句话：“心急吃不了热豆腐”。对于我们现在来说我们就可以用到eval-source-map。
本文以webpack文章的demo为例，如果未阅读上文，并且想了解完整过程请点击回到上文在配置文件webpack.config.js中配置如下代码
module.exports = {
...
devtool: 'eval-source-map', // 在这里配置devtool
...
}
