webpack——devtool配置及sourceMap的选择

官方手册传送门

官方对devtool配置的定义很简单：选择一种 source map 格式来增强调试过程，不同的值会明显影响到构建build和重新构建rebuild的速度。

不过，什么是source map，官方用提供了许多种的source map，其中的区别是什么，我们在开发中应该怎么选择，都是我们要学习的。

1. 什么是 source map

现在的前端代码会通过babel编译或者各类的压缩，在debug时，只能调试编译或者压缩后的代码。简单来说，source map 提供了一种将压缩文件中的代码映射回源文件中的原始位置的方法。

下为 react 项目代码使用source map前后图

编译后的代码

使用source map后的代码

使用source map后，我们可以相当于是在自己写的代码里调试了~

1.1 source map的分类

source map 文件分为2类，内联型和外联型

• 内联源映射，将映射的数据之间添加在生成的文件中，在 .map 文件中的sourcesContent字段来存放源码
• 外联源映射，将映射数据存储在单独的映射文件中，使用标记将源链接到源码，一般会去掉源码中的注释

1.2 source map 关键字

webpack为 source map 提供了