Hot module replacement/hot update HMR

(1) Hot Module Replacement (Hot Module Replacement)

effect:

• Easy to debug css, the page will not refresh
• js which module is changed, the module is changed partially, the page does not refresh

For example: during development, the background color was red, and then I changed it to green. After the change, I hope that the background of the modified element will change from red to green directly. Don’t refresh the entire page. At this time, we need to use the heat of webpack. Update (HMR), need to be configured in the project. I hope that the original elements of the page still exist, only the CSS style has changed, and it is time to use HMR.

(1) HMR needs to use the HotModuleReplacementPlugin plug-in, this plug-in is a plug-in that comes with webpack, first introduce webpack

(2) Configure hot as true in devServer

(3) Configure the HMR plug-in in plugins

Okay, so the hot update configuration can be configured without refreshing the page about css changes, you can try it yourself

The signal is as soon as the page is rendered: network-work-Doc will request localhost, when I clear it, change red to green, and see if Doc has re-requested localhost to verify that the page is indeed not refreshed.

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; // 验证时更改了这个
}

The css change is done without refreshing the page!

Let's configure js again: The result of js through HMR is that when the page is also not refreshed, which module is changed, only which module is reloaded, and other modules do not need to be reloaded

example:

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()
  })
}

In this way, you can change the content of #app, without refreshing the page, the page can retain the number clicked by number

(2) Small question: Why does CSS take effect automatically without additional configuration? Does js still need module.hot.accept?

For css files, we will configure css -loader, the support -loaderhas been added in css module.hot.accept, so even if it is not configured module.hot.accept, HMR can be used for css, but if JS is not called module.hot.accept, HMR execution cannot find the corresponding content, the page will be refreshed directly, and parameters can be set hotOnly: trueTo prevent automatic refresh

(3) Summary:

HMR (Hot Module Replacement), after adding or modifying a module (modifying JS/CSS), the browser content is automatically updated in a non-refreshing manner to improve development efficiency. Note that HMR should only be used in the [development environment]

After HMR is successfully configured, the CSS/JS will not be modified to refresh the page (note whether the browser Tab page is automatically refreshed when saving file changes)

HMR configuration has four key points:

1. Use webpack-dev-serveras a server start
2. webpack.configIn the devServerconfigurationhot: true
3. webpack.configPlugins increaseHotModuleReplacementPlugin
4. Use to module.hot.acceptincrease HMR code

Okay, I'm done with flowers~