(一)Source Maps

什么是Source Maps

Source Map字面意思就是原始地图，当开发环境中的源代码经过压缩，去空格，babel编译转化后，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，当打包出现问题需要我们debug的时候，我们往往都感到很头疼，因为打包后的文件都是压缩到一起的，我们很难找到问题所在，这样严重影响调试效率。为了我们开发过程中debug更方便快捷，我们就要用到Source Maps来定位到开发中的源代码。
Source map就是一个信息文件，里面储存着位置信息，也就是说，转换后的代码的每一个位置，所对应的转换前的位置。当我们在开发中出错的时候，出错工具将直接显示原始代码，而不是转换后的代码，这样使得编译后的代码可读性更高，也更方便快捷调试。
在webpack配置中配置source maps时我们需要先配置devtool
devtool配置有四种不同的方法，具体如下：

devtool配置	描述
source-map	在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度
cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便
eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项
cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点

注意：cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。
从以上的四个位置方法来看，自上而下打包速度越来越快，但是在打包过程中也出现了各种隐患，这也验证了一句话：“心急吃不了热豆腐”。对于我们现在来说我们就可以用到eval-source-map。
本文以webpack文章的demo为例，如果未阅读上文，并且想了解完整过程请点击回到上文
在配置文件webpack.config.js中配置如下代码

module.exports = {
    ...
    devtool: 'eval-source-map', // 在这里配置devtool
    ...
}