携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

热更新

如果我们不适用任何构建工具，在原生的Html和JS中编写代码，那每次修改内容后，是需要手动去刷新浏览器加载更新后的内容的。

如果我们使用热更新的方式启动，一切就会自动完成，编辑器编写完保存，浏览器在不刷新的情况下会检测到文件有更新，从而编译渲染出来。

在webpack中提供给了我们webpack-dev-server来实现热更新。只需要简单的配置：

const webpack = require('webpack')
module.exports = {
  devServer: {
    contentBase: './dist',
    hot: true
  }
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

WDS不刷新浏览器，也不输出文件，而是放在内存中，读写效率更高。

原理分析

就像刚才上面说的，正常的流程是文件编辑保存后，刷新浏览器，浏览器才会重新编译和渲染文件内容，从而达到更新的效果。

那WDS是如何实现这自动化的过程的呢？

如果简单说就一个，在上面的配置文件中webpack提供了个核心插件HotModuleReplacementPlugin，核心功能由它来完成。

再详细一点就是：插件HotModuleReplacementPlugin提供了两个核心功能，一个是HMR Server，另一个是HMR Runtime。HMR Server会将webpck compiler编译后的热更新文件输出给HMR Runtime，而HMR Runtime是被注入到浏览器中，会接收HMR Server输入的文件然后更新文件的变化，浏览器就会在不刷新的情况下渲染出来了。

对比我们不用热更新的情况，我们正常修改代码，仅仅是在本地文件系统的层面上，即使通过服务器启动了，浏览器也仅仅是加载了当前文件进行了渲染，但文件修改后，浏览器是并不知道的，没有任何机制来通知浏览器去更新，只能是刷新后才会重新渲染该目标文件达到更新的目的。

而HRM所做的就是中间这个监听的过程，HMR Server会监听webpack编译的内容，提供给HMR Runtime，更新浏览器内容从而在不刷新浏览器的情况下自动渲染更新。