webpack-dev-server: In Webpack 5, the webpack-dev-server hot update encounters a JS syntax error, the websocket will break, and the hot update will not work after the change error is saved.

##index.js

function a(){
    console.log('test')
}
a()
b()

##webpack.config.js

 const {resolve} = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 module.exports = {
     entry:resolve(__dirname,'./index.js'),
     target:'web',
     output:{
         filename:'build-[hash:6].js',
         path:resolve(__dirname,'./build')
     },
     mode:'development',
     module:{
         rules:[
             {
                 test:/\.js$/,
                 exclude:/node_module/,
                 loader:'babel-loader',
                 options:{
                     presets:['@babel/preset-env','@babel/preset-react']
                 }
             }
         ]
     },
     plugins:[
         new HtmlWebpackPlugin({
             template:'./index.html', 
             minify: {
                 removeComments: true,
                 collapseWhitespace: true,
             },
             // inject: 'body', 
         }),
     ],
     devServer:{
         contentBase:resolve(__dirname, './build'),
         compress:true,
         port:3000,
         open:true,
         hot: true,
     },
 }

##package.json

{
  "name": "testtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  }
}