在react配置less中导出webpack配置，怎么断点调试webpack

前言

在react项目开发中，因为需要使用less,就开始疯狂的寻找方案了。

网上寻找react配置less方案

作为一个合格的开发，就使用基本操作了-------万能的百度，发现基本上都是使用 安装less less-loader到生产环境，npm run eject导出webpack配置，修改webpack配置，配置less，我就照网上的配置抄了下，发现配置不成功，这时候我就耐不住烦了，这哪出问题了呢，光靠百度不行，得想着自己调试解决下，于是就开始了大神级别操作，想出了和平常开发一样的思路，断点调试。

断点调试

先解释下断点调试，相信很多开发都会用到断点调试的功能吧! 就是使用debugger在问题代码上打断点，定位问题原因，也可以使用debugger观察和理顺代码运行过程。
前端开发最经常使用断点调试在谷歌浏览器上观察断点，后端开发经常在编辑器上用自带断点调试工具进行断点调试。
所以作为一名优秀的前端工程师，当然使用谷歌浏览器断点调试了。
第一步，在你需要找到问题的代码上断点：

第二步，因为webpack的配置脚本不会在页面运行显示时执行，而是在项目中运行，所以无法直接打开页面进行查看断点，所以我们需要使用node运行项目启动脚本，从而运行webpack脚本node --inspect-brk 【项目中启动脚本所在路径】 --inline --progress：
node --inspect-brk ./scripts/start.js --inline --progress
第三步，node运行脚本后，debugger断点被监听到，这时候需要打开谷歌浏览器进行调试，打开Chrome浏览器，地址栏里输入chrome://inspect/#devices：

这时候点击Open dedicated DevTools for Node

点击下一个断点，发现第一次加载的样式loader是sass的

再下一步没发现less的loader，找到了是less的loader没引入成功，所以就这样子成功定位到问题。

最后，喜欢本文的小伙伴们加个收藏，关注博主哦！我会不定期发博主项目中的问题和解决问题的方法哦！