如何线上debug webpack混淆打包之后的代码

大家应该都非常清楚webpack混淆打包之后，代码是非常难读的，但是，有时候发布到线上会出问题，然后本地开发有没有现场的数据来调试，达不到很好的效果，甚至可能一直定位不到原因，现在小编来给大家安利一个方法

1.config/index.js 里面的productionSourceMap设为true，会在浏览器source多出一个webpack的文件夹

2.build/webpack.prod.conf.js 里面的devtool设为devtool: config.build.productionSourceMap ? '#source-map' : false

3.npm run build

之后打包之后的浏览器控制台里面会有我们的源码，跟开发环境一样的结构，便于调试

但是注意：生产环境一般是禁止放便于调试的包的，大家一定要注意，为了安全和保密

安全性问题，防止业务代码泄露，我们可以先打一个过去调试一下，成功之后再改为productionSourceMap：false，这样既解决了我们线上调试的问题，又可以实现代码安全保密