create react app webpack V3 to V

最近在给一个老项目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的。