webpack使用sourcemap使你可以看到压缩后的源码

在使用webpack的过程中,相信大家都有遇到过比较苦恼的问题,其中有一个问题就是代码压缩以后,都成了一团,部署以后,不能打断点,不好调试

webpack使用sourcemap使你可以看到压缩后的源码_第1张图片
image.png

打包以后就变成了这样,一堆压缩的代码,很难看懂

现在只需要在webpack中加入
"devtool": "source-map",
就可以把打包后的代码变成和开发的时候一样

webpack使用sourcemap使你可以看到压缩后的源码_第2张图片
image.png

这样子你就可以随便的打断点修改了,极大的方便了打包后的修改

唯一的就是打包后的东西体积会变大,


webpack使用sourcemap使你可以看到压缩后的源码_第3张图片
image.png

这并不影响我们的使用

你可能感兴趣的:(webpack使用sourcemap使你可以看到压缩后的源码)