【踩坑记】如何解决前端调试无法显示正确的soureceMap映射，并且无法在控制台断点调试的问题

项目技术栈

electron + vue + ts + webpack4

背景：

最近项目要打包上线时报错，排查时发现是因为 browserlist 深夜更新了一个版本4.21.0，browserlist内部有一个依赖项:electron-to-chromium
“electron-to-chromium”: “^1.4.147”,升级到了 “electron-to-chromium”: “^1.4.164”,
而electron-to-chromium也更新了版本，把我们的项目打包给给搞崩溃了。于是我们决定将项目依赖锁死，不想再出现突发依赖升级导致项目崩溃了。

然而，当大家把本地的 yarn.lock 及 node_modules 删除重新拉线上的 yarn.lock 并下载依赖后，之前部分可以在调试控制台断点调试的同学都出现了无法调试的问题。（本来就陆陆续续有同学说已经无法调试，只能在代码里打 console.log调试，这次锁死依赖后，全部的同学都无法调试了）

排查步骤

最开始在网上疯狂谷歌搜索，想看看是否有解决方案出来，结果网上给的结论是让改 devtools。按照网上说的改成各种各样的，什么 eval-source-map、inline-source-map 等等，都无效。于是我决定自行排查一下问题到底出在哪里。

首先，我想看看 vue-cli 官网自己生