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

Source: Internet
Author: User


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.


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.


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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.