devtool 配置
[toc]
source map 源码地图
本小节的知识与 webpack 无关
前端发展到现阶段，很多时候都不会直接运行源代码，可能需要对源代码进行合并、压缩、转换等操作，真正运行的是转换后的代码
这就给调试带来了困难，因为当运行发生错误的时候，我们更加希望能看到源代码中的错误，而不是转换后代码的错误
jquery 压缩后的代码：https://code.jquery.com/jquery-3.4.1.min.js
为了解决这一问题，chrome 浏览器率先支持了 source map，其他浏览器纷纷效仿，目前，几乎所有新版浏览器都支持了 source map
source map 实际上是一个配置，配置中不仅记录了所有源码内容，还记录了和转换后的代码的对应关系
下面是浏览器处理 source map 的原理
最佳实践：
- source map 应在开发环境中使用，作为一种调试手段
- source map 不应该在生产环境中使用，source map 的文件一般较大，不仅会导致额外的网络传输，还容易暴露原始代码。即便要在生产环境中使用 source map，用于调试真实的代码运行问题，也要做出一些处理规避网络传输和代码暴露的问题。
webpack 中的 source map
使用 webpack 编译后的代码难以调试，可以通过 devtool 配置来优化调试体验