Understanding webpack middleware
webpack-dev-server
webpack-dev-server is a small Node.js Express server that uses webpack-dev-middleware to serve webpack packages. In practice, it will start an express static resource web server at localhost:8080 (or other ports) and automatically run webpack in listen mode and listen for resource changes in real time via the socket.io service and refresh the page automatically (hot update).
webpack-dev-middleware
webpack-dev-middleware is a middleware. What is middleware? Middleware is a function that accesses request objects, response objects, and middleware in a web application that is in the request-response loop flow. Its functions include: executing any code, modifying request and response objects, terminating the request-response loop and calling the next middleware in the stack. Specifically, the process is like this: webpack itself is only responsible for the function of packaging and compiling , webpack-dev-server is to assist us in the development of the server , it is through the webpack-dev-middleware as middleware, from the request and response process to obtain the webpack compiled information for hot update.
webpack-hot-middleware
webpack-hot-middleware is for webpack-dev-middleware, which allows us to add hot updates to our server. It will subscribe to listen to the development server and update it through the webpack HMR API when updates or changes occur. In a nutshell, webpack-dev-middleware + webpack-hot-middleware = webpack development server with hot update functionality