webpack热更新

使用webpack可帮助我们的开发以及打包，在开发过程中，有时候我们只修改了部分代码并想不必刷新整个页面即可看到更改后的效果，这时候 webpack-dev-server （WDS）热更新就可以派上用场了。

关于 WDS 热更新，有以下几点：
（1）WDS 不刷新整个页面；
（2）WDS 不输出文件，而放在内存中（没有磁盘IO，速度更快）；
（3）使用 HotModuleReplacementPlugin 插件(webpack自带)。

WDS需要先通过 npm 安装 webpack-dev-server，然后相关配置如下：

const devServer = {
 port: 8000,
 host: '0.0.0.0',
 hot: true //热更新，修改代码后，不刷新整个页面
}

// plugin 中需要使 HotModuleReplacementPlugin插件
plugins:defaultPluins.concat([
     new webpack.HotModuleReplacementPlugin()   
])

热更新的原理分析：##

热更新原理图（from Geekbang）

HMR Runtime：开发的打包阶段被注入到浏览器端的 Bundle.js 里，这样 bundle.js 就建立起和服务器的连接（websocket连接），这样在编辑器中修改代码，相应的文件变化就可以得到及时更新。
热更新的过程，还是看上面那张图：
（1）启动阶段：文件系统中的代码经过 webpack compiler 编译，打包输出为 bundle.js，并传输给 Bundle Server，使 浏览器能通过访问服务器获取 bundle.js. （图中过程为 1，2，A，B）;
（2） 更新阶段：改动的代码还是经过 webpack compiler 编译，然后传给 HMR Server（知道js代码中 哪些模块发生了改变），HMR Server 再去通知浏览器端的 HMR Runtime 哪些内容发生了变化（以 json 数据方式传输通知），然后 HMR Runtime 就会更新代码，最后页面上就会呈现相应的改变。（图中过程为 1，2，3，4，5）

最后提下，还可使用 webpack-dev-middleware（WDM）来进行热更新，将 webpack 输出的文件传输给服务器，适用于灵活的定制场景。