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