umi 如何配置webpack_React Dev Inspector, 提升开发效率的神器！

这一期，我邀请到了字节跳动数据平台的腿长一米八sonacy小哥哥。他要给大家带来一个非常非常非常好用的插件！听说牛逼的人都在用它！这款插件防脱发效果非常非常好！是什么呢？让我们揭晓吧！

有没有遇到过刚到公司，接手项目就去排bug或者一个小需求，因为项目太复杂，你找不到你要修改的对应文件位置？

有没有遇到看到别人项目，想看看实现却因为项目结构太深，而花了1个小时以上才找到你想要的地方。

react-dev-inspector(https://github.com/zthxxx/react-dev-inspector)就是为了这些目的而诞生的。

它的神奇之处就在于，可以从页面上识别react组件，直接跳转到本地ide的代码片段上，厉害吧

好好研究一下

安装

npm i -D react-dev-inspector

使用和配置

可以自定义开关键值，或者在devtool里面通过window. REACT_DEV_INSPECTOR_TOGGLE ()开启

 组件属性

ts类型定义文件在 react-dev-inspector/es/Inspector.d.ts

umi3插件

webpack插件