The difference between Webpack-dev-server and Webpack-dev-middleware

Webpack-dev-server

webpack-dev-serveris actually the equivalent of enabling one express Http服务器+调用webpack-dev-middleware . Its role is mainly used to servo resource files. This Http服务器 and the use of the client websocket Communication protocol, the original file changes, webpack-dev-server will be used Webpack real-time compilation, and then use Webpack-dev-middleware will webpack compiled file will be output to memory. For pure front-end projects, it is difficult to write back-end services for consolidation.

Webpack-dev-middleware

The Webpack-dev-middleware output file exists in memory. You define the Webpack.config,webpack to be able to comb out the relationship between the entry and the output module, and webpack-dev-middleware on this basis to form a file mapping system, whenever the application requests a file, It matches the corresponding results of the in-memory cache back to you in the file format, and vice versa, and then into the next middleware.

Because it is a memory-based file system, the rebuild is very fast and is suitable for use as a static resource server in the development phase, because Webpack can treat any one resource as a module, so it can be used to provide feedback to clients in various formats, thus replacing the HTTP server. In fact, most webpack users have used Webpack-dev-server as a express+webpack-dev-middleware implementation. The difference between the two is that Webpack-dev-server is packaged well and it is difficult to do custom development in addition to webpack.config and command-line arguments. And Webpack-dev-middleware is the middleware, you can write your own backend services and then integrate it, relatively flexible and free.

Webpack-hot-middleware:

is a combination of webpack-dev-middleware use of the middleware, it can achieve the browser's non-refresh update (hot reload), which is often said in the Webpack document HMR (Hot Module replacement). The difference between HMR and hot loading is that unloading is refreshing the entire page.

The difference between Webpack-dev-server and Webpack-dev-middleware