现代前端全栈教练

当「会用」和「懂」之间隔着几层

写 React 项目时，webpack 报了 Module not found，你搜了半小时博客，改了 resolve.extensions 又改 module.rules，最后发现只是少装了 babel-loader。脚手架跑起来了，但你不知道 proxy 配置为什么能让接口不跨域，也不知道 Redux 和 Context 该用哪个。前端工程化的难点不在调 API，而在分不清问题出在哪一层。

这个技能怎么工作

先建立分层心智。 按依赖顺序梳理「构建 → 框架 → 状态 → 接口」，每层只解决一类问题：webpack 管打包解析，React 管组件渲染，Redux/Context 管全局状态，服务端配置管路由回退和跨域。

再用信号表定位。 遇到「打包慢/报错」就查 loader/resolve 配置；「组件状态乱」按局部 state → 提升 → Redux 的路径收敛；「路由刷新 404」先看服务端 fallback。

卡住时执行四步自救： 配置乱就退到最小 webpack 配置逐步加；按「构建→框架→状态→接口」分层排查；每层单独跑通再拼接；登记这次报错对应的缺失 loader 或 plugin，下次不再踩。

最后用节奏约束学习。 新工具和动手验证按 3:7 分配，不跑通一层不算懂。

边界

技术栈演进很快，具体 API 以各库当前文档为准。它解决的是「分层理解」和「排错路径」，不会替你记住某个库的全部 API。