作为一名开发工程师，无论是开发什么，都会用到的一个功能就是debug,我们通过webpack将文件打包成main.js，实际上客户端(浏览器)访问的是打包编译后的main.js,当浏览器执行代码报错时，报错信息自然也是main.js的内容，我们如何将报错信息（main错误信息以及所在行列）映射到源码上呢？是的，要用到source map

什么是source map

source map实际上是资源地图，里面存储着代码打包前后的对应位置信息，是搭建打包后文件与源代码之间关系的桥梁。它解决了在打包过程中，代码经过压缩，使用babel编译转化后，与源文件差别过大无法debug的问题。

source map用法

在配置文件webpack.config.js中，devtool设置source map,其有26种值可选，下面主要介绍主要的几种类型：

1.生成source map文件

当devtool为source-map，webpack会生成source map文件，并在打包后的main.js文件末尾处添加一行注释，指向source map文件

source map文件中记录着打包后文件与源代码的映射关系,source map文件中都有哪些内容呢？

• version:版本信息
• file:编译后的文件名，用于浏览器加载的
• sources:打包编译的源文件
• mappings:用来保存和源文件的映射信息（例如行列位置信息）
• names:打包编译前的变量名、方法名

2.内联source map

• devtool为eval：使用eval函数，函数末尾增加sourceUrl=》指向源文件地址

• devtool为eval-source-map:文件内容通过 eval 函数执行，source map通过base64编码后添加到了eval函数末尾处

• devtool为inline-source-map：生成的source map使用base64编码方式添加至末尾处

3.不生成source map文件，报错精确到行（以上设置，报错会精确到列的）

• cheap-source-map 报错精确到行，对于有loader的情况，不够精确（“cheap-source-map” 定位到的代码和实际的源码有些出入）

• cheap-module-source-map 报错精确到行，完美处理有loader的情况

4.既生成source map文件，也不显示源码

• hidden-source-map 会生成source map文件，但main.js没有引用source map文件

• nosources-source-map 会生成source map文件，但main.js也会引用source map文件，可以看到错误的内容及文件，但查看不了源码

5.不生成source map

• false：不使用 source map
• none：mode 为 production 的默认值（没有定义 devtool 时） 这两种方式不会生成 main.js.map 文件，也不会在 main.js 引入 main.js.map