(一)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
    ...
}