什么是热更新

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新

一般的刷新我们分两种：

•  一种是页面刷新，不保留页面状态，就是简单粗暴，直接 window.location.reload()。
•  另一种是基于 WDS (Webpack-dev-server) 的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。

可以看到相比于第一种，热更新对于我们的开发体验以及开发效率都具有重大的意义

HMR 作为一个 Webpack 内置的功能，可以通过 HotModuleReplacementPlugin 或 –hot 开启。

具体我们如何在 webpack 中使用这个功能呢？

热更新的使用以及简单分析

如何使用热更新

1. npm install webpack webpack-dev-server –save-dev 

设置 HotModuleReplacementPlugin，HotModuleReplacementPlugin 是 webpack 是自带的

1. plugins: {  
2.     HotModuleReplacementPlugin: new webpack.HotModuleReplacementPlugin()  
3. } 

再设置一下 devServer

1. devServer: {  
2.     contentBase: path.resolve(__dirname, 'dist'),  
3.     hot: true, // 重点关注  
4.     historyApiFallback: true,  
5.     compress: true  
6. } 

•  hot 为 true，代表开启热更新

两个重要的文件

当我们改变我们项目的文件的时候，比如我修改 Vue 的一个 方法：

更改前：

1. clickMe() {  
2.   console.log('我是 Gopal，欢迎关注「前端杂货铺」');  
3. } 

更改后：

1. clickMe() {  
2.   console.log('我是 Gopal，欢迎关注「前端杂货铺」，一起学习成长吧');  
3. }