目录
前言
为什么webpack的devtool有很多的属性值
我们的代码通常是经过打包压缩后在浏览器上运行的，打包压缩后的代码和我们实际编写的代码有很大差异，比如ES6转ES5、TS转JS、代码丑化压缩、变量名变了、行号列号空格压缩等等。调试转化后的代码会比较困难，这时候我们就需要source-map，帮助我们从已转化的代码，映射到原始的源文件，帮助开发者调试代码，不同的devtool的属性值帮助我们控制是否生成，以及如何生成 source map（build与rebuild速度不同）。
source-map的优缺点
若浏览器支持source-map，可以根据打包压缩后文件中的注释，映射到源文件中，告诉开发者哪一行报错了，方便开发者调试。缺点就是占用内存大，source-map生成的文件通常是原始文件的2.5倍左右，浏览器需要花费更多的时间加载，并且需要浏览器支持启用JS源映射。
主要属性值介绍
none（不写）
production模式下的默认值，不生成source-map
eval
development模式下的默认值，将代码转化为字符串后，结尾有一段注释/# sourceURL=webpack:...，可以帮助打包后的代码映射到原来的代码里
source-map
生成source-map文件，在打包文件最后有一段注释//# sourceMappingURL=bundle.js.map，开发工具会根据这个注释找到source-map进行解析
eval-source-map
不会生成sourcemap文件，但是会生成source-map，souce-map是以DataUrl添加到eval函数的后面，也就意味着浏览器不需要单独再请求一个source-map文件
inline-source-map
不会生成sourcemap文件，但是会生成source-map，source-map是以DataUrl添加到打包文件的最后
cheap-source-map
会生成source-map，不会生成列映射，生成的开销更小一些，但是如果有babel、ts等loader处理过，映射的文件可能是处理后的文件，而不是源文件
cheap-module-source-map
跟cheap-source-map类似，但是会映射到源代码，而不是经过loader处理后的代码，更有利开发者调试
hidden-source-map
生成source-map文件，但是最后一段注释//# sourceMappingURL=bundle.js.map被隐藏了，即不会对source-map文件引用了，但是如果手动添加这一段注释，sourcemap就会生效了
nosources-source-map
会生成source-map文件，但是只有错误信息的提示，不会生成源代码文件
组合规则
webpack提供给我们的26个值，是可以进行多组合的
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
inline-|hidden-|eval-：三个值时三选一；nosources：可选值；cheap可选值，并且可以跟随module的值；
1027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
