webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware区别

webpack-dev-server:

webpack-dev-server,实际上是一个小型Express服务器,它是用webpack-dev-middleware来处理webpack编译后的输出。
它是一个静态资源服务器,只用于开发环境;
webpack-dev-server会把编译后的静态文件全部保存在内存里;

webpack-dev-middleware:

是一个处理静态资源的middleware;

webpack-hot-middleware:

是一个结合webpack-dev-middleware使用的middleware,它可以实现浏览器的无刷新更新(hot reload),这也是webpack文档里常说的HMR(Hot Module Replacement)。

  • webpack-dev-server只适用于纯前端的项目, 如果要加入到包含后端服务器的项目中,则需要webpack-dev-middleware和webpack-hot-middleware。

  • webpack-dev-server就是一个Express 和 webpack-dev-middleware的实现,webpack-dev-server 是封装好了的, 除了config 和命令行参数之外很难再做定制型的开发,所以它适合纯前端的辅助工具。
    而webpack-dev-middleware是一个中间件, 可以编写自己的后端服务, 然后整合进来。

  • webpack-hot-middleware这个套件只能搭配webpack-dev-middleware使用,其实就是把热替换的功能加到一般server应用。
    我们都知道webpack dev server有提供一种Hot Module Replacement/Hot Reloading热替换的功能。在一般webpack-dev-server的时候我们会在webpack.config.js加入new webpack.HotModuleReplacementPlugin()或设定来启用。
    而webpack hot middleware是给webpack-dev-middleware用的。就是让我们在一般的server上加上热替换的功能,总结来说就是webpack-dev-middleware webpack-hot-middleware即可让我们用express客制一个有热替换功能的webpack开发服务器。

  • 好的介绍文章:https://segmentfault.com/a/1190000005614604#articleHeader11
    http://madole.github.io/blog/2015/08/26/setting-up-webpack-dev-middleware-in-your-express-application/

原文地址:https://www.cnblogs.com/cag2050/p/7652365.html