webpack 热更新

本节我们学习 webpack 的模块热更新，也可以叫做模块热替换。其目的是为了加快用户的开发速度，提高编程体验，方便开发人员在不刷新页面的情况下，就能修改代码，并且直观地在页面上看到变化。这个功能主要用于开发过程中，对于生产环境没有任何帮助。

什么是模块热更新

HMR 全称为 Hot Module Replacement ，中文意思为模块热更新，是 webpack 提供的最有用的功能之一。它允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面。热更新中的“热”我们可以理解为这个模块正在运行中，热替换就是将正在运行的模块进行替换。

热更新主要可以通过以下几种方式来显著加快发速度：

• 保留在完全重新加载页面时丢失的应用程序的状态。
• 只更新改变的内容，以节省开发时间。
• 调整样式更加快速，几乎等同于就在浏览器调试器中更改样式。

启用热更新

HMR 的启动其实很简单，需要使用到 webpack-dev-server 插件和 HMR 插件。

如果要通过 webpack-dev-server 启动 webpack 的开发环境，可以打开 webpack-dev-server 的热更新开关，例如下面是在 webpack.config.js 配置文件中的演示代码：

module.exports = {
   
  devServer: {
   
    hot: true,  // 打开热更新开关
  }
}

在 webpack.config.js 中加入 HotModuleReplacementPlugin 插件，因为这个插件是 webpack 自带的，如果可以直接加入：

module.exports = {
   
  plugins: [
    webpack.HotModuleReplacementPlugin(