这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战
webpack的热更新
刷新分为两种情况：
- 页面刷新，不保留页面状态，直接
window.location.reload()。 - 另一种是基于
WDS (Webpack-dev-server)的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。
理解热更新
热更新，是指 Hot Module Replacement，缩写为 HMR。使得应用在运行状态下，不重载刷新就能更新、增加、移除模块的机制
webpack的热更新使得当我们修改了代码，不会导致页面刷新，而是在保留现有的数据状态基础上，只将模块进行更新替换。这样既保留了现有的数据状态，又能看到代码修改后的变化。热更新也叫模块热替换HMR - Hot Module Replacement）是 webpack 提供的最有用的功能之一。即允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面。
模块热更新(热替换)，其目的是为了加快用户的开发速度，提高编程体验。它并不适用于生产环境，这意味着它应当只在开发环境使用
热更新实现方式有:
- 保留在完全重新加载页面时丢失的应用程序的状态
- 只更新改变的内容，以节省开发时间
- 调整样式更加快速，几乎等同于就在浏览器调试器中更改样式
启用HMR配置方式
在webpack.config.js配置文件中做下面几件事：
- 引入webpack库
- 使用
HotModuleReplacementPlugin插件：new webpack.HotModuleReplacementPlugin() - 打开
webpack-dev-server的热更新开关： 设置devServer选项中的hot字段为true
其中HotModuleReplacementPlugin 插件是 Webpack 自带的，webpack.config.js 中使用HotModuleReplacementPlugin 插件：
module.exports = {
// ...
plugins: [
webpack.HotModuleReplacementPlugin(),
// ...
]
}
打开 webpack-dev-server 的热更新开关： 设置devServer选项中的hot字段为true：
// webpack.config.js
module.exports = {
// ...
devServer: {
hot: true,
// ...
}
}
热更新优点：
- 加载页面时保存应用程序状态
- 只更新改变的内容，节省调试时间
- 修改样式更快，几乎等同于在浏览器中更改样式
参考：
