sourceMap 是把双刃剑。了解其作用才能发挥最大的效率

PS：如果了解了 sourceMap，直接拉到最后面看库的使用~

了解 sourceMap

伴随前端工程化的普及，webpack 和各种脚手架的兴起，前端代码从透明过渡到了半透明时期。

透明时期：打开 F12，一行行 JS 映入眼帘，前端逻辑一览无遗

不过现在多数网站都已经进过 webpack 的打包处理，打开的时候看到的更多是 webpack 处理过的代码。（但这仅仅是因为开发者没有上传对应 js 的.map文件）。.map 文件就是今天要说的 sourceMap

那如果经过了 webpack 打包，不过同时上传了 .map 文件会发生什么？

是的，连 vue 源码都被人扒的一干二净。快去看下vue.config.js配置文件的productionSourceMap有没有设置为 false 吧！

正题：如何使用 souceMap 定位错误

进过上面的一个小 demo。可以知道，上线的时候是绝对不能把 .map 文件一起传到服务器上去发布代码的，这时候 .map 文件我们就可以自己保存起来，只把对应的 js 文件发布出去，遇到问题了，把 map 文件拿出来用

引入在线的JS库