Remplacement du module à chaud / mise à jour à chaud HMR

(1) Remplacement du module chaud (remplacement du module chaud)

effet:

• Facile à déboguer en CSS, la page ne s'actualisera pas
• js quel module est modifié, et le module est modifié partiellement, la page ne s'actualise pas

Par exemple: pendant le développement, la couleur d'arrière-plan était rouge, puis je l'ai changée en vert. Après la modification, j'espère que l'arrière-plan de l'élément modifié passera directement du rouge au vert. N'actualisez pas toute la page. Pour le moment, nous devons utiliser la chaleur du pack Web. Update (HMR), doit être configuré dans le projet. J'espère que les éléments originaux de la page existent toujours, seul le style CSS a changé et il est temps d'utiliser HMR.

(1) HMR doit utiliser le plug-in HotModuleReplacementPlugin, ce plug-in est le plug-in fourni avec webpack, commencez par introduire webpack

(2) Configurez hot comme true dans devServer

(3) Configurer les plug-ins HMR dans les plugins

D'accord, pour que la configuration de la mise à jour à chaud puisse être configurée sans actualiser la page sur les modifications css, vous pouvez l'essayer vous-même

Le signal est dès que la page est rendue: network-work-Doc demandera localhost, quand je l'effacerai, changera le rouge en vert, et verra si Doc a re-demandé localhost pour vérifier que la page n'est effectivement pas rafraîchie.

js: entrée js

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

index.css:

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

Le changement css se fait sans actualiser la page!

Configurons à nouveau js: Le résultat de js via HMR est que lorsque la page n'est pas non plus actualisée, quel module est modifié, quel module est rechargé et les autres modules n'ont pas besoin d'être rechargés

exemple:

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 cette façon, vous pouvez modifier le contenu de #app, sans actualiser la page, la page peut conserver le numéro cliqué par numéro

(2) Petite question: Pourquoi le CSS prend-il effet automatiquement sans configuration supplémentaire? Est-ce que js a toujours besoin de module.hot.accept?

Pour les fichiers css, nous allons configurer css -loader. Le support -loadera été ajouté en css module.hot.accept, donc même s'il n'est pas configuré module.hot.accept, HMR peut être utilisé pour css, mais si JS n'est pas appelé module.hot.accept, l'exécution de HMR ne peut pas trouver le contenu correspondant, la page sera actualisée directement et les paramètres pourront être définis hotOnly: truePour empêcher l'actualisation automatique

(3) Résumé:

HMR (Hot Module Replacement), après l'ajout ou la modification d'un module (modification de JS / CSS), le contenu du navigateur est automatiquement mis à jour de manière non rafraîchissante pour améliorer l'efficacité du développement. Notez que HMR ne doit être utilisé que dans [l'environnement de développement]

Une fois HMR configuré avec succès, le CSS / JS ne sera pas modifié pour actualiser la page (notez si la page à onglet du navigateur est automatiquement actualisée lors de l'enregistrement des modifications de fichier)

La configuration du HMR comporte quatre points clés:

1. Utiliser webpack-dev-servercomme serveur de démarrage
2. webpack.configDans la devServerconfigurationhot: true
3. webpack.configAugmentation des pluginsHotModuleReplacementPlugin
4. Utiliser pour module.hot.acceptaugmenter le code HMR

D'accord, j'en ai fini avec les fleurs ~