source-map介绍和使用

source-map是我们前端开发中经常会看到的 xxx.map 文件，这个map文件也被称为源码映射文件，跟它的名字一样，它的作用就是用来映射源代码的。

在前端开发中，我们所开发的项目都是建立在一些构建工具(如webpack)之下的，当项目正在开发过程中，无论是开发环境还是生产环境，构建工具都会为我们进行代码打包操作，这样势必会打乱我们的源码序列，假如我们的源代码中出现了某个错误，在浏览器控制台中将很难定位到源码出错的位置，不利于我们开发人员的调试。

为了解决上面所提出的问题，source-map应运而生。

作用

为源代码与打包构建后的代码建立映射关系，方便开发调试，准确定位错误来源及错误位置。

使用方法

假如我们使用的构建工具是webpack，那么使用source-map只需要在webpack.config.js里加入devtool 即可，如下

// webpack.config.js
module.exports = {
    devtool: 'source-map'
}

参数列表

在上面的示例中，我们的devtool的值为source-map，但其实，它还有很多其他的值。

可选值：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source

下面我们通过表格的形式来一一介绍它们不同的取值有何区别：

值	生成位置	描述
source-map	外部	能准确指示错误代码以及错误位置
inline-source-map	内联	能准确指示错误代码以及错误位置
hiden-source-map	外部	提示错误的原因，但无法追踪源码，没有错误位置
eval-source-map	内联	每个文件都生成与其对应的source-map文件
nosources-source-map	外部	有错误信息，但无法追踪源码
cheap-source-map	外部	能较好的提示错误代码及错误位置，但只能精确到行，无法精确到列
cheap-module-source-map	外部	能准确提示错误代码及错误位置，并且还包含第三方库如loader的source-map加入

其实它还有更多的值，只是都大同小异。

用哪个

devtool有那么多个可选值，我们应该使用哪个呢？这个问题的答案因人而异，看自己的项目需求来定。

1. 速度

eval > inline > cheap > 其它

2. 调试友好

source-map > cheap-module-source-map > cheap-source-map

3. 代码安全

nosources-source-map：全部隐藏(隐藏源码与构建后代码的精确错误提示)

hiden-source-map：只隐藏源代码的错误提示

个人看法如下：

• 速度快，提示友好，就用eval-source-map。

• 速度快，提示还过得去，就用eval-cheap-module-source-map。

• 提示友好，不在乎速度，就用source-map。

• 提示贼好，不在乎速度，就用cheap-module-source-map。

一般开发环境下，我们建议使用eval-source-map 或 eval-cheap-module-source-map，

生产环境的话用source-map。

顺便说一句，类似react、vue之类的脚手架工具大多都是采用eval-source-map 。