1. 如何修改webpack dev server的端口？ #

当然可以！有好几种灵活的方式实现，看你的项目配置情况：

• 命令行临时指定：启动dev server时直接追加--port参数就行。如果是用react-scripts搭建的项目，运行：

  npm start -- --port 8084
  # 用yarn的话写成这样
  yarn start --port 8084
  

• 通过环境变量持久化设置：在项目根目录新建.env.development文件，写入一行配置：

  PORT=8084
  

  react-scripts会自动读取这个文件里的变量，下次启动就默认用这个端口了。

• 手动修改webpack配置文件：如果是自己配置的webpack（不是react-scripts封装的），找到webpack.config.js里的devServer节点，添加port字段：

  module.exports = {
    // 其他配置项...
    devServer: {
      port: 8084, // 替换成你想要的端口号
      // 其他devServer相关配置
    }
  };
  

2. 解决代理不支持WebSocket导致的VS Code调试问题 #

这个问题的根源在于：VS Code调试React应用时，Chrome DevTools和webpack dev server之间需要通过WebSocket通信来同步断点、日志等调试信息，但你的代理服务不转发WebSocket请求，直接导致连接中断。这里给你几个可行的解决方案：

方案一：绕开代理，直接访问webpack dev server的原生端口调试 #

既然你的webpack dev server本身跑在localhost:8084，调试时直接打开http://localhost:8084就行，完全不经过代理的8080。这样WebSocket连接直接和dev server建立，不会有阻碍。

如果担心API请求跨域，可以让webpack dev server自己处理代理：

1. 项目里已经内置了http-proxy-middleware（react-scripts项目无需额外安装）
2. 在src目录下新建setupProxy.js，写入API代理配置：

   const { createProxyMiddleware } = require('http-proxy-middleware');
   
   module.exports = function(app) {
     app.use(
       '/api', // 替换成你的API请求前缀
       createProxyMiddleware({
         target: 'http://你的后端服务地址',
         changeOrigin: true,
       })
     );
   };
   

   这样访问8084时，API请求会被webpack dev server自动转发到后端，同时WebSocket调试连接也能正常工作。

方案二：配置VS Code直接连接webpack dev server的调试端口 #

修改VS Code的.vscode/launch.json配置，让调试器直接指向8084端口，跳过代理：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "React: Launch",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8084", // 直接使用dev server的端口
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

启动调试后，Chrome会直接打开8084的地址，调试通信完全不受代理影响。

方案三：调整webpack dev server的WebSocket配置（必须用代理时） #

如果因为业务限制必须通过8080代理访问，可以修改webpack dev server的WebSocket配置，让它知道要通过代理地址建立连接。react-scripts项目需要借助react-app-rewired来修改内置配置：

1. 先安装依赖：

   npm install react-app-rewired --save-dev
   

2. 在项目根目录创建config-overrides.js：

   module.exports = function override(config, env) {
     if (env === 'development') {
       config.devServer = {
         ...config.devServer,
         client: {
           webSocketURL: 'ws://localhost:8080/ws' // 指定代理后的WebSocket地址
         }
       };
     }
     return config;
   };
   

3. 修改package.json里的启动脚本：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
   }
   

   这样webpack dev server会告诉前端用代理的8080地址建立WebSocket连接，只要代理能转发/ws路径的请求（如果代理支持配置的话），就能解决调试问题。

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