[webpack] webpack-dev-server 4.0+ websocket disconnect and looping

[JoyMoch]

Recently, i am trying to update webpack from 4 to 5. with the webpack dev server update to v4+, development environment broken down.
phrase one errors as blow:

[webpack-dev-server] [HPM] Error occurred while proxying request 127.0.0.1:8001/ws to undefined [ECONNRESET] (https://nodejs.org/api/errors.html#errors_common_system_errors)

There are so many cases in github or StackOverflow but not solution for me. i searched the source code in node_modules with this error log and find this

// target is undefined when websocket errors

in http-proxy-middle.js

so it is a websocket error! like this

Error: socket hang up
    at connResetException (internal/errors.js:561:14)
    at Socket.socketCloseListener (_http_client.js:380:25)
    at Socket.emit (events.js:214:15)
    at TCP.<anonymous> (net.js:658:12) {
  code: 'ECONNRESET'

with ECONNRESET, i find that it mens socket fetch data fail or no response data. it is frustrating.
as the same time chrome 98 log websocket disconnected and try to reconnect and looping.

i guess there is a error about client to webpack server. the request is ws://xxx/ws in chrome devtools-network/ws. for my devserver proxy, there is a rule for request to my own nodejs server with socket.io.js

'/ws': {
  target: 'xxx'
}

yes, there is a mistake. webpack dev server's websocket request has been proxy to my own server. so change the rules to other.
anyway, avoid to webpack socket rules.

in webpack dev server v4.0+, webpack dev server request is ws://xxx/ws but in old version, request just like this ws://xx/socket-nodejs/xxx. It is a really break change!!

fix, done!