Ejected CRA项目迁移webpack-dev-server v5：中间件适配及连接异常

核心配置迁移：替换onBeforeSetupMiddleware/onAfterSetupMiddleware为setupMiddlewares #

webpack-dev-server v5 将v4的两个钩子合并为setupMiddlewares，中间件注册顺序直接影响功能可用性，按以下方式迁移：

// webpackDevServer.config.js
const fs = require('fs');
const path = require('path');
const { evalSourceMapMiddleware, redirectServedPath, noopServiceWorkerMiddleware } = require('react-dev-utils');

module.exports = function (proxy, allowedHost) {
  return {
    // 保留原有的基础配置（如static、compress、client等）
    static: {
      directory: path.resolve(__dirname, 'public'),
    },
    compress: true,
    client: {
      overlay: { errors: true, warnings: false },
    },

    // --- HTTPS 配置（替换原v4的https字段）---
    server: {
      type: 'https', // 指定服务类型为HTTPS
      options: {
        // 加载自定义SSL证书（如果需要，否则可省略options，dev-server会生成临时证书）
        key: fs.readFileSync(path.resolve(__dirname, './ssl/localhost.key')),
        cert: fs.readFileSync(path.resolve(__dirname, './ssl/localhost.crt')),
      },
      host: 'localhost', // 确保绑定到可访问的主机
      port: 3000, // 使用CRA默认端口，避免冲突
    },

    // --- 中间件注册（替换原两个钩子）---
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) throw new Error('webpack-dev-server instance is missing');

      // 1. 原onBeforeSetupMiddleware中的逻辑（先注册）
      evalSourceMapMiddleware(devServer.app);
      // 自定义代理配置（示例）
      const { createProxyMiddleware } = require('http-proxy-middleware');
      devServer.app.use('/api', createProxyMiddleware({
        target: 'https://your-api-domain.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }, // 根据实际需求调整
      }));

      // 2. 保留webpack-dev-server默认中间件（必须返回middlewares，不要丢弃）
      // 3. 原onAfterSetupMiddleware中的逻辑（最后注册）
      redirectServedPath(devServer.app);
      noopServiceWorkerMiddleware(devServer.app);

      return middlewares;
    },

    // 移除原v4的以下配置：
    // onBeforeSetupMiddleware: ...,
    // onAfterSetupMiddleware: ...,
    // https: ...,
  };
};

关键注意事项（解决ERR_CONNECTION_REFUSED） #

1. HTTPS配置冲突：彻底删除v4版本的https字段，所有HTTPS相关配置必须放在server对象下，同时确保证书路径正确、文件可读。
2. 中间件顺序：原onBefore的逻辑要先注册，默认中间件必须保留，原onAfter的逻辑最后注册，顺序错误会导致静态资源无法加载或代理失效。
3. 端口/主机检查：确认server.port未被占用（可通过lsof -i :3000或netstat -ano | findstr :3000排查），server.host设置为localhost或0.0.0.0（允许外部访问）。
4. 依赖兼容性：确保http-proxy-middleware版本≥2.0.0，与webpack-dev-server v5兼容；删除node_modules和锁文件后重新安装依赖。
5. 证书信任：如果使用自签名证书，需在Chrome中手动信任该证书（访问chrome://settings/certificates导入证书），否则会触发安全拦截导致连接失败。

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