webpack-dev-server（WDS）
WDS通常和HotModuleReplacementPlugin一起使用，两者结合可以开启热更新的功能
优势：没有磁盘IO，不会输出文件，是将生成的文件放在内存中，而不是本地磁盘文件
功能：提供 bundle server的能力，即生成的 bundle.js 文件可以通过 localhost://xxx 的方式去访问，另外 WDS 也提供 livereload(浏览器的自动刷新)。
webpack-dev-middleware（WDM）
WDM将webpack输出的文件传输给服务器，适用于较灵活的场景，需再引入node server
热更新的实现
热更分为两个过程：
1. 启动阶段：文件系统进行编译，初始代码通过webpack compiler进行打包，打包好的文件传给bundle server（相当于服务器），bundle server会run这个文件，以server的方式让浏览器能够访问的到（1 -> 2 -> A -> B）
2. 文件变更：代码通过webpack compiler进行打包编译，编译后的代码还发送给HMR server，这时HMR server就会知道哪些模块（源代码编译的模块）发生了变更，然后会通过websoket以json的方式通知HRM runtime，HRM runtime就会更新代码，实现不刷新代码的更新（1 -> 2 -> 3 -> 4）
**HMR Server 是服务端：**用来将变化的 js 模块通过 websocket 的消息通知给浏览器端。
HMR Runtime是浏览器端：用于接受 HMR Server 传递的模块数据，浏览器端可以看到 .hot-update.json 的文件过来。
webpack构建出来的bundle.js本身是不具备热更新能力的HotModuleReplacementPlugin的作用是将HMR runtime注入到bundle.js，这样就实现了bundle.js可以和HMR server建立websocket的通信连接
Q：WDS 和HotModuleReplacementPlugin之间的关系
A：WDS 的功能提供 bundle server的能力，就是生成的 bundle.js 文件可以通过 localhost://xxx 的方式去访问，另外 WDS 也提供 livereload(浏览器的自动刷新)。
HotModuleReplacementPlugin 的作用是提供 HMR 的 runtime，并且将 runtime 注入到 bundle.js 代码里面去。一旦磁盘里面的文件修改，那么 HMR server 会将有修改的 js module 信息发送给 HMR runtime，然后 HMR runtime 去局部更新页面的代码。因此这种方式可以不用刷新浏览器。
单独写两个包也是出于功能的解耦来考虑的。简单来说就是：HotModuleReplacementPlugin 包给WDS提供了热更新的能力
