webpack热更新

为什么要热更新

每次改完代码都需要重新打包一次，打开浏览器，刷新一次，很麻烦 我们可以安装使用webpack的devserver来改善这块的体验。

怎么使用热更新

使用webpack内置HotModuleReplacementPlugin插件。按如下代码安装配置好，重新启动服务后，会发现dist目录没有了，这是因为devServer把打包后的模块不会放在dist目录下，⽽是放到内存中，从⽽提升速度。
代码：

module.exports = {
  ...
  devServer: {
    contentBase: "./dist",
    hot: true
  }
}

原理：

webpack-dev-server：

(WDS)的功能提供 bundle server的能力，就是生成的 bundle.js 文件可以通过 localhost://xxx 的方式去访问，另外 WDS 也提供 livereload(浏览器的自动刷新)。

hot-module-replacement-plugin：

HMR Server 是服务端，用来将变化的 js 模块通过 websocket 的消息通知给浏览器端。
HMR Runtime是浏览器端，用于接受 HMR Server 传递的模块数据，浏览器端可以看到 .hot-update.json 的文件过来。
hot-module-replacement-plugin的作用是提供 HMR 的 runtime，并且将 runtime 注入到 bundle.js 代码里面去。一旦磁盘里面的文件修改，那么 HMR server 会将有修改的 js module 信息发    送给 HMR runtime，然后 HMR runtime 去局部更新页面的代码。因此这种方式可以不用刷新浏览器。

总结：

webpack 构建出来的 bundle.js 本身是不具备热更新的能力的，HotModuleReplacementPlugin 的作用就是将 HMR runtime 注入到 bundle.js，使得bundle.js可以和HMR server建立websocket的通信连接。hot-module-replacement-plugin 包给 webpack-dev-server 提供了热更新的能力。