Dev Server 自动刷新会导致页面的状态或者输入的某些值丢失。使用热替换则只将修改的模块实时替换到应用中。


如何开启

webpack-dev-server 已经集成了 HMR，在运行时加上 “—hot” 即可。或者也可以通过配置文件开启。

  1. // webpack.config.js
  3. const webpack = require('webpack')
  5. devServer: {
  6.     hot: true
  7.   },
  9. plugins: [
  10.     new webpack.HotModuleReplacementPlugin()
  11.   ]

CSS 文件可以实现热替换，但是 JS 仍然会触发自动刷新， 因为 JS 导出的对象没有规律，Webpack 无法处理无规律的对象。所以 JS 文件需要根据实际情况处理更新后的逻辑。module.hot.accept 用于手动处理模块更新的逻辑，加上这个的话，不会再触发自动刷新。module.hot.accept 接收两个参数，第一个是模块路径，第二个是处理逻辑的函数。module.hot.accept 也可以处理图片模块。

  1. // ============ 以下用于处理 HMR，与业务代码无关 ============
  3. // console.log(createEditor)
  5. if (module.hot) { // 如果开启了 HMR 的话，当 hot 或 hotOnly 为 true 的时候，就是开启了 HMR
  6.   let lastEditor = editor
  7.   module.hot.accept('./editor', () => {
  8.     //...
  9.   })
  11.   module.hot.accept('./better.png', () => {
  12.     //...
  13.   })
  14. }

hotOnly

hot 属性的缺点是当一个组件或处理逻辑的函数发生运行错误的时候，webpack 会转而自动刷新页面，把错误信息刷掉。这种情况可以配置 hotOnly 属性。这样即使发生错误，也不会刷新页面，错误信息也能被看到。

  1. devServer: {
  2.     hotOnly: true // 只使用 HMR，不会 fallback 到 live reloading
  3.  },