VSCode切换Webpack+Babel配置的React项目时显示旧项目组件问题

1. 端口占用&未停止前一个项目的开发服务 #

• 两个React项目如果开发服务默认使用同一个端口（常见为3000、8080），切换项目时如果没有手动终止上一个项目的devServer进程，旧服务会持续占用目标端口
• 新项目启动时检测到端口占用会自动顺延到其他端口，若你依旧打开旧端口的页面，访问的就是未关闭的旧项目
• 排查方式：Windows执行netstat -ano | findstr "端口号"、Mac/Linux执行lsof -i:端口号查看端口占用进程，杀掉残留进程后再启动新项目

2. 浏览器静态资源缓存 #

• 两个项目都在同一个localhost域名下运行时，浏览器会缓存旧项目的JS、CSS等静态资源，若旧项目配置了Service Worker（比如使用PWA相关配置），会持续返回缓存的旧项目资源
• 解决方式：打开页面后按Ctrl+Shift+R/Cmd+Shift+R强制刷新清空缓存，或者打开浏览器控制台-应用标签页，清空站点存储、注销所有Service Worker后再刷新

3. 构建配置的缓存冲突 #

• 参考常规React脚手架/教程的配置逻辑，Webpack和Babel默认都会开启本地缓存来提升构建速度：
  • Babel的cacheDirectory配置会把编译结果缓存在node_modules/.cache/babel-loader目录
  • Webpack 5+默认开启的文件系统缓存会把构建产物缓存在node_modules/.cache/webpack目录
• 如果你的两个项目存在目录结构复用、或者软链接指向错误的情况，可能出现缓存读取错误的问题
• 解决方式：删除当前项目的node_modules/.cache目录，再执行启动命令重启开发服务

4. 终端工作路径错误 #

• 切换VSCode项目后如果没有切换终端的工作目录，直接执行启动命令实际运行的是上一个项目的服务，自然返回旧项目内容
• 排查方式：执行pwd（Mac/Linux）或cd（Windows）查看当前终端工作路径，确认和当前项目根路径一致后再执行启动命令

内容的提问来源于stack exchange，提问作者James Huang