【webpack】- 6、devtool配置

1、source map 源码地图–解决报错调试问题

本小节的知识与 webpack 无关

前端发展到现阶段，很多时候都不会直接运行源代码，可能需要对源代码进行合并、压缩、转换(eg:ts转js)等操作，真正运行的是转换后的代码

这就给调试带来了困难，因为当运行发生错误的时候，我们更加希望能看到源代码中的错误，而不是转换后代码的错误

jquery压缩后的代码：https://code.jquery.com/jquery-3.4.1.min.js

为了解决这一问题，chrome浏览器率先支持了source map，其他浏览器纷纷效仿，目前，几乎所有新版浏览器都支持了source map

2、source map原理

source map实际上是一个配置，配置中不仅记录了所有源码内容，还记录了源码和转换后的代码的对应关系

下面是浏览器处理source map的原理

最后浏览器会请求两个文件：运行的文件 和 源码地图

---

3、source map源码地图使用

• source map 应在开发环境中使用，作为一种调试手段
• source map 不应该在生产环境中使用，source map的文件一般较大，不仅会导致额外的网络传输，还容易暴露原始代码。即便要在生产环境中使用source map，用于调试真实的代码运行问题，也要做出一些处理规避网络传输和代码暴露的问题。

webpack中的source map
使用 webpack 编译后的代码难以调试，可以通过 devtool 配置来优化调试体验

webpack.confit.js文件：

module.exports = {
	mode:'development',
	devtool:none
}

1. 如果没有配置devtool：
   mode:'development'默认报错方式是eval()方式，浏览器显示错误的时候只显示eval()里那一部分
   最运行没有影响，只是给浏览器看的，是浏览器的一种调试手段
   mode:'production' 默认报错方式是none有错，直接指到main.js，没有具体的提示
2. 配置devtool
   具体详见： devtool 配置文档