了解SourceMap的各类格式区别

    webpack的devtool用了蛮久了，但每次都是默认使用其中几个，对其余的并不了解，这节准备吧每种方式都打包一下，看看到底有啥区别。

官网的方式说明

devtool	构建速度	从新构建速度	生产环境	品质(quality)
(none)	+++	+++	yes	打包后的代码(没有sourcemap)
eval	+++	+++	no	生成后的代码
cheap-eval-source-map	+	++	no	转换过的代码（仅限行）
cheap-module-eval-source-map	o	++	no	原始源代码（仅限行）
eval-source-map	--	+	no	原始源代码
cheap-source-map	+	o	no	转换过的代码（仅限行）
cheap-module-source-map	o	-	no	原始源代码（仅限行）
inline-cheap-source-map	+	o	no	转换过的代码（仅限行）
inline-cheap-module-source-map	o	-	no	原始源代码（仅限行）
source-map	--	--	yes	原始源代码
inline-source-map	--	--	no	原始源代码
hidden-source-map	--	--	yes	原始源代码
nosources-source-map	--	--	yes	无源代码内容

+++ 很是快速, ++ 快速, + 比较快, o 中等, - 比较慢, -- 慢

开始

1. eval

打包后只生成bundle.js一个文件

代码经过eval执行，能映射到每一个模块的代码，可是代码只能看到生成后的代码，打包和构建的速度都很快(不须要复杂转换和打包)，可是不能定位到源码的真实位置

2. cheap-eval-source-map

一样只有一个bundle.js

基本上和eval相似，相比而言映射的代码仍是转换过的，而不是源码，即转换过的代码，示例中其实转换过的代码和源码一直，由于只是用的js最基本的语法，因此看不到转换

3. cheap-module-eval-source-map

具有上面的特性，此次能看到的代码是真正的源码，可是注意到scss文件和jsx是分开的，可是只是精确到每一行

4. eval-source-map

这一次是精确到每一列了，能够看出和上面的区别，同一行能够多段调试

5. cheap-source-map

和cheap-eval-source-map的区别在于不是使用eval进行处理，而是生成.map来映射代码，经过上图能够看到，file、sources、sourceContent、mappings，

1. file表示打包后的文件
2. source表明源文件地址
3. sourceContent则是源码
4. mappings表示转换过的代码和sources的映射(能够经过Source Map原理探究了解)

6. cheap-module-source-map

这个图就不列举，和上一个的区别就是.map中存放的是源码，不是转换过的代码

7. inline-cheap-source-map

和cheap-source-map相似，可是不生成.map文件，直接在打包的文件中使用base64存.map文件内容，我大概对比了一下打包后的文件，inline-cheap-source-map文件，由于转成base64更大了

8. inline-cheap-module-source-map

这个和上者的区别也就是个变成展现的是源码，不是转换过的代码

9. source-map

这个基本上是开发环境都在用的，一样和cheap-source-map，可是不只限于行，精确到每一列，来看看.map文件有什么变化

能看到在.map中多了names，names中其实就是每一个变量/函数名，这样就能精确到每个变量/函数，因此能够精确到每一列

10. inline-source-map

看到inline大概就明白了，就是把.map集中到打包文件中

11. hidden-source-map

和source-map基本相同，可是不会有sourceMappingURL注释，这样你就没法定位到源文件，基本上就是生产环境能用，开发环境不能用，不用进行区分配置了。

12. nosources-source-map

和hidden-source-map同样也是，开发环境能用，可是会进行映射，而且sourceContents为空，这样你在开发环境能看到具体的目录结构，可是却看不到任何源码

总结

1. 带eval均是同过eval方式处理的，不生成map文件，浏览器经过解析eval中的字符串获得源码
2. 带cheap可是不带module的展现的都是转换过的代码，带有module的是源码，可是二者都仅限行
3. eval-source-map和source-map之类，没有cheap和module的是能映射到每个变量名的，debugger也能单行内屡次调试
4. hidden-source-map和nosources-source-map区分生产环境和开发环境，生产环境正常，开发环境或不能显示，或只能显示目录结构

最后为了方便理解你去理解source map，建议阅读Source Map原理探究了解，明白浏览器是怎样经过mappings找到源码的位置