webpack devtool详解

前言

devtool也是之前常用的一个配置，我们稍微了解下吧，不研究太深，毕竟现在都不怎配置他。

内容

devtool是配置sourceMap的。
sourceMap大家都知道，我们本地或者测试环境出了错误，可以在source中迅速定位错误，用到的就是 .map (map文件)，这个文件中是源文件映射(主要是源文件代码)。但是我们在network中看不到.map文件的请求，盲猜一波是浏览器做了屏蔽，不让我们看这种请求。(毕竟是源码，我单独下载map文件是可以下载下来的)

接下来，当devtool被配置为以下各个值的时候，对应的source-map状态

source-map

产生一个单独的source-map(.map)文件，打包的js文件里面最下行有map文件的地址。功能最完全，但会减慢打包速度。

eval

每个 module 会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL，所以一个chunk文件可能有很多个module。

inline开头

source-map被base64转码后，放在打包的js文件里面最下行

hidden开头

打包后有.map文件，打包后的js中没有sourceMappingURL，也没有base64转码后的内容(这种配置我很懵，有啥用)

eval开头(不是eval)

打包后的js代码和Source Map内容混淆在一起，通过eval输出。

cheap开头

.map中的源码经过loader处理了，我们点击到source看的时候是ES3、4、5的代码。

总结

还有一些平常不太用到的没有写出来，先这样吧