热模块替换/热更新 HMR

（一）热模块替换/热更新（Hot Module Replacement）

作用：

方便调试css，页面不会刷新
js 哪个模块更改了，局部更改那个模块，页面不刷新

比如：在开发的时候，背景颜色是红色，然后我又改成了绿色，改好后，希望修改的元素背景直接由红色变为绿色，不要刷新整个页面，这时候就要用到 webpack 的热更新（HMR），需要在项目中配置。希望页面原素依旧存在，仅仅是css样式发生改变，这时候就到了使用HMR的时候。

（1）HMR 需要用到 HotModuleReplacementPlugin 这个插件，这个插件是 webpack 自带的插件，首先引入webpack

（2）在 devServer 中配置 hot 为 true

（3）在 plugins 中配置上HMR的插件

好了，这样热更新的配置关于 css 改动不刷新页面就配置好了，可以自己试一下

信号就是页面一渲染：network - work - Doc 就会请求 localhost, 当我清空，把red改为green，看看 Doc 有没有重新请求 localhost就可以验证了，验证确实没有重新刷新页面

js: entry 入口js

import './index.css'
var dom = document.createElement('div')
document.body.appendChild(dom)

index.css:

div {
  width: 300px;
  height: 300px;
  background-color: red; // 验证时更改了这个
}

css 更改不刷新页面搞定！

下面再来配置js： js 要通过HMR实现的结果是，在同样不刷新页面的情况下，哪个模块更改了，只重新加载哪个模块，其他模块不需要重新加载

例子：

noChange.js:

export default function noChange () {
  var dom = document.getElementById('app')
  dom.innerHTML = 2200
}

number.js:

export default function number () {
  var count = 0
  var dom = document.createElement('div')
  dom.innerHTML = count
  dom.onclick = function () {
    count++
    dom.innerHTML = count
  }
  document.body.appendChild(dom)
}

index.js

import number from './number.js'
import noChange from './noChange.js'

number()
noChange()

// 如果开启了热更新
if (module.hot) {
  module.hot.accept('./noChange', () => { // 当noChange文件代码变化了 执行回调函数的内容
    noChange()
  })
}

这样就可以改变 #app的内容，不刷新页面，页面还能留住number点击的数字

（二）小疑问：css 为什么什么都不用额外配置，自动就生效了呢，js 还需要 module.hot.accept 呢？

css文件我们会配置css-loader，css-loader中已经增加了module.hot.accept的支持，所以即使不配置module.hot.accept，对于css也可以HMR，但是如果JS没有调用module.hot.accept，HMR执行找不到对应的内容，则会直接刷新页面，可以设置参数hotOnly: true来防止自动刷新

（三）总结：

HMR（Hot Module Replacement），添加、修改模块（修改JS/CSS）后浏览器内容通过非刷新的方式自动更新，提高开发效率，要注意HMR只应在【开发环境】使用

HMR在配置成功以后，修改CSS/JS不会进行页面刷新（注意保存文件变更的时候，浏览器Tab页是否是自动刷新）

HMR配置有四个关键点：

使用webpack-dev-server作为服务器启动

webpack.config的devServer中配置hot: true

webpack.config的plugins增加HotModuleReplacementPlugin

使用module.hot.accept增加HMR代码

好了完结撒花~

热模块替换/热更新 HMR

猜你喜欢