最近在给一个老项目webpack升级，基本的问题搜索下，给包升升级就搞定了，但是proxy一直有问题，于是仔细排查了下，把解决方法分享下。
在解决一些其他问题，项目能成功跑起来后，根据官方文档，proxy需要使用
http-proxy-middleware这个中间件，所以创建src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use('/api', createProxyMiddleware({ target: 'http://xxx.xxx.com', secure: false, changeOrigin: true, }))
};
重新运行项目，发现并没有代理过去，感觉这个中间件没有注册到webpackDevServer里面，因为项目已经运行了eject，封装的配置全部暴露出来，这个操作主要是将react-scripts里面的配置暴露出来，所以其实在没有eject之前，项目运行跑的配置全在react-scripts里，感觉问题就出在了打包配置上，所以我下载了新的react-scripts代码，对比之前的旧代码，发现了以下proxy相关代码
// webpackDevServer.config.js
module.exports = function (proxy, allowedHost) {
return {
...
before (app) {
...,
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
require(paths.proxySetup)(app);
}
}
}
}
因为require的路径在paths文件中所以在paths.js也要加上
module.exports = {
...,
proxySetup: resolveApp('src/setupProxy.js'),
};
然后再重启服务，中间件成功运行，问题解决。
总结：问题主要是因为之前老项目在执行eject的时候react-scripts版本太低，http-proxy-middleware中间件没有注册，所以需要根据新版react-scripts加入相关代码。官网上react-scripts@2.0.0及以上才可以使用http-proxy-middleware，所以说明老项目在执行eject的时候react-scripts的版本是低于2.0.0的。
