webpack+React+gulp的调试

在开发过程中，开发程序只是第一步，调试才是最重要的，上一节讲了如何在webstorm中进行调试js内容，但是对于进行React进行jsx语法开发时，又是如何调试呢。

对于webpack.config.js配置，这里也不做过多介绍，网上有很多内容，其中一个很重要的就是source map。

什么是Source map

简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

JS发布后通常会经过压缩和混淆，所有代码被压缩成一行代码，如果发生错误，无法定位错误，SourceMap因此而生。说起SourceMap，不得不说说uglifyjs，uglifyjs是nodejs下一款优秀的JS压缩优化工具，支持SourceMap的生成。

更多可以参考：

使用 SourceMap 来进行前端代码调试

但是自己在webpack.config.js中添加了如下配置：

devtool: 'eval-source-map',

而且在dish的目录下面有：

alliance-detail.js
alliance-detail.map
alliance-list.js
alliance-list.map
article-list.js
article-list.map
business-detail.js
business-detail.map

文件也有对应关系，但是在chrome中就是看多对应的jsx文件，最后经过公司前端一哥的帮忙，发现如果在webpack中将Debugger中的如下内容打开，就可以看到js对应的jsx文件，断点什么的，就可以飞起来了。

说明source map生效，可以在jsx里面打断点进行调试了。