Reemplazo de módulo en caliente / actualización en caliente HMR

(1) Reemplazo del módulo en caliente (Reemplazo del módulo en caliente)

efecto:

• CSS fácil de depurar, la página no se actualiza
• js qué módulo se cambia y el módulo se cambia parcialmente, la página no se actualiza

Por ejemplo: durante el desarrollo, el color de fondo era rojo y luego lo cambié a verde. Después del cambio, espero que el fondo del elemento modificado cambie de rojo a verde directamente. No actualice la página completa. En este momento, necesitamos usar el calor del paquete web. Actualización (HMR), debe configurarse en el proyecto. Espero que los elementos originales de la página sigan existiendo, solo ha cambiado el estilo CSS y es hora de usar HMR.

(1) HMR necesita usar el complemento HotModuleReplacementPlugin, este complemento es un complemento que viene con el paquete web, primero introduzca el paquete web

(2) Configurar caliente como verdadero en devServer

(3) Configure los complementos del complemento HMR

Bien, entonces la configuración de actualización en caliente se puede configurar sin actualizar la página sobre los cambios de css, puede probarlo usted mismo

La señal es tan pronto como se procesa la página: network-work-Doc solicitará localhost, cuando lo borre, cambio de rojo a verde y veo si Doc ha vuelto a solicitar localhost para verificar que la página no se haya actualizado.

js: entrada js

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

index.css:

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

¡El cambio de CSS se realiza sin actualizar la página!

Configuremos js nuevamente: el resultado de js a través de HMR es que cuando la página tampoco se actualiza, qué módulo se cambia, solo qué módulo se vuelve a cargar y no es necesario volver a cargar otros módulos

ejemplo:

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

De esta manera, puede cambiar el contenido de #app, sin actualizar la página, la página puede retener el número en el que se hizo clic por número

(2) Pequeña pregunta: ¿Por qué CSS entra en vigor automáticamente sin configuración adicional? ¿Aún necesita js module.hot.accept?

Para archivos css, configuraremos css -loader. El soporte -loaderse ha agregado en css module.hot.accept, por lo que incluso si no está configurado module.hot.accept, HMR se puede usar para css, pero si no se llama a JS module.hot.accept, la ejecución de HMR no puede encontrar el contenido correspondiente, la página se actualizará directamente y los parámetros se pueden configurar hotOnly: truePara evitar la actualización automática

(3) Resumen:

HMR (Reemplazo de módulo en caliente), después de agregar o modificar un módulo (modificando JS / CSS), el contenido del navegador se actualiza automáticamente de una manera no refrescante para mejorar la eficiencia del desarrollo. Tenga en cuenta que HMR solo debe usarse en el [entorno de desarrollo]

Una vez que HMR se haya configurado correctamente, CSS / JS no se modificará para actualizar la página (tenga en cuenta si la página de la pestaña del navegador se actualiza automáticamente al guardar los cambios de archivo)

La configuración de HMR tiene cuatro puntos clave:

1. Usar webpack-dev-servercomo inicio de servidor
2. webpack.configEn la devServerconfiguraciónhot: true
3. webpack.configAumento de complementosHotModuleReplacementPlugin
4. Úselo para module.hot.acceptaumentar el código HMR

Está bien, he terminado con las flores ~