【webpack】快速笔记7 -- 使用sourchMap追根溯源（报错源）

平时的报错是不是看到的是这样的(┬＿┬)

为了演示这个我们得在webpack配置中把devtool关掉，因为默认配置是把sourceMap这个配置开启的；

开启前后我们看到的是这样的，控制台提示代码行是这样的：

关闭devtool： 'none'后：

那么如果是显示报错的代码，我们此时点击去看报错代码位置，是这样的：

问题：

那对于开发来查改代码的话，是不是有点麻烦，那能不能报错的时候，我可以直接定位到开发中那个文件名内的那句代码报错呢？

sourchMap的映射

概念与作用：
使用sourchMap对打包后的代码进行映射处理，将打包后的错误代码转换为开发中对应文件的报错位置，如打包文件为main.js中50行有报错，这句话的报错就会通过sourchMap进行映射去查找，然后转换成index.js中第2行报错（开发原文件报错）

如何配置(webpack.config.js)：

我们重新打包，看看控制台报错是怎样的：

所以呀，既然在开发环境，我们为了能快速去定位错误，sourchMap无疑是一个好东西；

关于devtool的其他配置项

参考官网文档：
https://webpack.docschina.org/configuration/devtool/

我们可以看到这个表：

我们可以看到，我们一开始配置的devtool为sourch-map的时候对于打包构建速度是有影响的，毕竟映射是一种树形结构的算法，会耗性能的；那有没有优化一点的配置呢，当然后继续看一步一步来：

lnline? cheap? module? eval? 是啥意思

在试其他配置前我们看看我们打包文件夹中是这样的：
在这里插入图片描述
会有一个main.js.map文件，这个就是sourceMap的映射文件内容，好了我们知道配置sourch-map的时候会多了一个main.js.map映射文件就行；
我们先把devtool配置改成inline-sourch-map，重新打包再去看报错台，如果没错的话，跟之前配置的都是一样，那到底变了什么？
看代码文件：

我们可以看到这个映射文件使用base64字符串放在main.js的最后面；

关于其他的参数讲解：
cheap： 相比于inline快一点，他报错只提示哪行不会像inline一样提示哪行哪列，所以打包速度上会比inline快一点，其次他只管业务代码
module： 加上的话他不仅管业务代码还会检测其他插件代码，比如插件间出现兼容错误，如果没有module的话，打包时是检测不出来的，所以module管得多因此打包相对于没有module时慢一些
eval： 从文档可以看出，eval的打包构建速度是最快的，因为打包后同样提示的报错也是对应文件的，其中不同的是，此次的打包构建出来的main.js中底部不在是映射后的base64代码，取而代之的是对应报错的eval，唯一缺点就是对于业务场景多的话，提示的报错信息可能比较片面

如何选择最合适的devtool配置

根据开发环境选择：

development：cheap-module-eval-source-map

production：cheap-module-source-map

上面两种中，development的配置是最合适的，提示的报错覆盖全面并且打包速度也很快，而对于production来说一般不用sourceMap映射，但如果想知道那个第三方插件之间有报错的话就可以加上这个

映射原理看文档，后续补上

后续我把原理文档附上

• #下一篇讲【webpackDevServer开启自己第一个服务啦~】