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，
- file表示打包后的文件
- source代表源文件地址
- sourceContent则是源码
- 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为空，这样你在开发环境能看到具体的目录结构，但是却看不到任何源码
总结
- 带
eval均是同过eval方式处理的，不生成map文件，浏览器通过解析eval中的字符串得到源码 - 带
cheap但是不带module的展示的都是转换过的代码，带有module的是源码，但是两者都仅限行 eval-source-map和source-map之类，没有cheap和module的是能映射到每一个变量名的，debugger也能单行内多次调试hidden-source-map和nosources-source-map区分生产环境和开发环境，生产环境正常，开发环境或不能显示，或只能显示目录结构
最后为了方便理解你去理解source map，建议阅读Source Map原理探究了解，明白浏览器是怎样通过mappings找到源码的位置
