码迷,mamicode.com
首页 > Web开发 > 详细

webpack-dev-server和webpack-dev-middleware的区别

时间:2017-05-09 00:56:38      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:实现   关系   无刷新   自己   文件系统   存在   速度   服务器   文件的   

 

webpack-dev-server

webpack-dev-server实际上相当于启用了一个expressHttp服务器+调用webpack-dev-middleware。它的作用主要是用来伺服资源文件。这个Http服务器client使用了websocket通讯协议,原始文件作出改动后,webpack-dev-server会用webpack实时的编译,再用webpack-dev-middleware将webpack编译后文件会输出到内存中。适合纯前端项目,很难编写后端服务,进行整合。

 

webpack-dev-middleware

 webpack-dev-middleware输出的文件存在于内存中。你定义了 webpack.config,webpack 就能据此梳理出entry和output模块的关系脉络,而 webpack-dev-middleware 就在此基础上形成一个文件映射系统,每当应用程序请求一个文件,它匹配到了就把内存中缓存的对应结果以文件的格式返回给你,反之则进入到下一个中间件。

因为是内存型文件系统,所以重建速度非常快,很适合于开发阶段用作静态资源服务器;因为 webpack 可以把任何一种资源都当作是模块来处理,因此能向客户端反馈各种格式的资源,所以可以替代HTTP 服务器。事实上,大多数 webpack 用户用过的 webpack-dev-server 就是一个 express+webpack-dev-middleware 的实现。二者的区别仅在于 webpack-dev-server 是封装好的,除了 webpack.config 和命令行参数之外,很难去做定制型开发。而 webpack-dev-middleware 是中间件,可以编写自己的后端服务然后把它整合进来,相对而言比较灵活自由。

 

webpack-hot-middleware:

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

 

webpack-dev-server和webpack-dev-middleware的区别

标签:实现   关系   无刷新   自己   文件系统   存在   速度   服务器   文件的   

原文地址:http://www.cnblogs.com/wangpenghui522/p/6826182.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!