Hot Module Ersatz / Hot Update HMR

(1) Austausch des heißen Moduls (Austausch des heißen Moduls)

bewirken:

• CSS ist einfach zu debuggen und wird nicht aktualisiert
• Wenn das Modul geändert wird und das Modul teilweise geändert wird, wird die Seite nicht aktualisiert

Beispiel: Während der Entwicklung war die Hintergrundfarbe rot, und dann habe ich sie in grün geändert. Nach der Änderung hoffe ich, dass sich der Hintergrund des geänderten Elements direkt von rot in grün ändert. Aktualisieren Sie nicht die gesamte Seite. Zu diesem Zeitpunkt müssen wir die Wärme des Webpacks nutzen. Update (HMR) muss im Projekt konfiguriert werden. Ich hoffe, dass die ursprünglichen Elemente der Seite noch vorhanden sind, nur der CSS-Stil sich geändert hat und es Zeit ist, HMR zu verwenden.

(1) HMR muss das HotModuleReplacementPlugin-Plug-In verwenden. Dieses Plug-In ist das Plug-In, das mit dem Webpack geliefert wird. Führen Sie zuerst das Webpack ein

(2) Konfigurieren Sie hot in devServer als true

(3) Konfigurieren Sie die HMR-Plug-In-Plugins

Okay, damit die Hot-Update-Konfiguration für CSS-Änderungen konfiguriert wird, ohne die Seite zu aktualisieren, können Sie es selbst versuchen

Das Signal ist, sobald die Seite gerendert wurde: network-work-Doc fordert localhost an, wenn ich es lösche, wechselt rot zu grün und prüft, ob Doc localhost erneut angefordert hat, um zu überprüfen, ob die Seite tatsächlich nicht aktualisiert wurde.

js: Eintrag js

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

index.css:

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

Die CSS-Änderung erfolgt ohne Aktualisierung der Seite!

Lassen Sie uns js erneut konfigurieren: Das Ergebnis von js über HMR ist, dass, wenn die Seite auch nicht aktualisiert wird, welches Modul geändert wird, nur welches Modul neu geladen wird und andere Module nicht neu geladen werden müssen

Beispiel:

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

Auf diese Weise können Sie den Inhalt von #app ändern, ohne die Seite zu aktualisieren. Die Seite kann die Nummer beibehalten, auf die die Nummer geklickt hat

(2) Kleine Frage: Warum wird CSS ohne zusätzliche Konfiguration automatisch wirksam? Benötigt js noch module.hot.accept?

Für CSS-Dateien konfigurieren wir CSS -loader. Die Unterstützung -loaderwurde in CSS hinzugefügt. module.hot.acceptSelbst wenn es nicht konfiguriert ist module.hot.accept, kann HMR für CSS verwendet werden. Wenn JS jedoch nicht aufgerufen wird module.hot.accept, kann die HMR-Ausführung den entsprechenden Inhalt nicht finden, die Seite wird direkt aktualisiert und die Parameter können festgelegt werden hotOnly: trueUm eine automatische Aktualisierung zu verhindern

(3) Zusammenfassung:

HMR (Hot Module Replacement) Nach dem Hinzufügen oder Ändern eines Moduls (Ändern von JS / CSS) wird der Browserinhalt automatisch nicht aktualisiert, um die Entwicklungseffizienz zu verbessern. Beachten Sie, dass HMR nur in der [Entwicklungsumgebung] verwendet werden sollte.

Nachdem HMR erfolgreich konfiguriert wurde, wird CSS / JS nicht geändert, um die Seite zu aktualisieren (beachten Sie, ob die Registerkarte des Browsers beim Speichern von Dateiänderungen automatisch aktualisiert wird).

Die HMR-Konfiguration hat vier Hauptpunkte:

1. Verwenden Sie webpack-dev-serverals Server - Start
2. webpack.configIn der devServerKonfigurationhot: true
3. webpack.configPlugins nehmen zuHotModuleReplacementPlugin
4. Verwenden Sie diese module.hot.acceptOption , um den HMR-Code zu erhöhen

Okay, ich bin fertig mit Blumen ~