webpack HMR热更新

1. 介绍

HMR(Hot Module Replacement)：模块热替换，也叫模块热更新，解决自动刷新导致页面状态丢失，只将修改的模块实时替换至应用中。

2. 开启HMR

2.1 通过webpack-dev-server --hot命令运行

2.2 通过配置文件开启

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  ...
  devServer: {
    hot: true,
    // hotOnly: true // 只使用 HMR，不会 fallback 到 live reloading
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

3. HMR的疑问

通过上述配置后，发现只有css样式会触发热更新，而js代码等还是会刷新页面

原因：

• webpack中的HMR并不可以开箱即用
• 需要手动处理模块热替换逻辑

3.1 为什么上述代码的样式文件的热更新开箱即用？

因为上述的样式文件经过了loader处理，在loader中自动处理了样式文件的热更新

3.2 为什么样式文件可以自动处理，脚本文件不行？

• 样式模块更新后，只需把更新的css即使替换到页面中，覆盖之前样式，从而实现样式文件的更新
• 我们编写的js代码是没有任何规律的，在一个模块中可能导出一个对象，也有可能是字符串或者函数，我们对导出的成员的使用也是各不相同的，webpack对这些毫无规律的js模块根本不知道如何去处理更新过后的模块，也就无法实现一套通用的模块替换方案

3.3 vue,reack脚手架没有手动处理，js照样可以热替换

因为使用的是框架，框架下的开发，每种文件都是有规律的，如react模块当中，每个文件必须要导出一个函数或一个类，内部也集成了HMR方案