Source Map

49 阅读1分钟

我们在执行完打包后,如果出现错误,报错的地方是打包后生成的文件,但如果项目复杂的话,根据打包后的文件出错的位置去找到源代码中对应的出错位置是十分困难的!!Source Map 的用处就来了!!

Source Map 【源代码地图】,功能就是映射转换后的代码与源代码。有了这个开发工具,我们可以很轻松的定位到源代码中出错的位置,甚至可以精确到哪一列出错!!

2269.png

使用方法: 直接在 webpack.config.js 文件中进行配置!!配置devtool属性即可!!

2270.png

有许多种模式可以选择!

2272.png

2271.png

不同模式的大概不同之处:

2273.png

比较推荐的方式:

  • 开发模式下:

2274.png

2275.png

  • 生产模式下:

2276.png

2277.png