webpack "--watch" vs "--hot": Was ist der Unterschied?

Question

Was ist der Unterschied zwischen

webpack --watch 

und

webpack-dev-server --hot 

dank verwenden.

Answer 1

Nach webpack Dokumentation @https://webpack.github.io/docs/tutorials/getting-started/#watch-mode

Wenn Watch-Modus verwenden, installiert webpack Datei-Beobachter auf alle Dateien, , die in den Übersetzungsvorgang verwendet wurden. Wenn eine Änderung festgestellt wird, wird die Kompilierung erneut ausgeführt. Wenn das Caching aktiviert ist, behält das Webpack jedes Modul im Speicher und verwendet es erneut, wenn es nicht geändert wird.

Also, im Grunde ist der Unterschied zwischen webpack und webpack --watch ausgeführt, dass in Ihren Dateien für alle Code-Änderungen bei der Verwendung --watch, wartet auf Ihrer CLI nach dem Übersetzungsvorgang hängen, und wenn es eine Änderung gibt, dann wird neu kompiliert und wartet erneut. Sie sollten sich bewusst sein, dass, wenn Sie webpack-dev-Server verwenden, dann müssen Sie diese Option nicht verwenden, da webpack-dev-Server webpack Uhrenmodus standardmäßig entsprechend seiner Dokumentation verwendet:

Der Dev-Server nutzt den Watch-Modus von webpack. Es verhindert auch, dass das Webpack die resultierenden Dateien auf die Festplatte ausgibt. Stattdessen hält und dient die resultierenden Dateien aus dem Speicher.

Also, was ist webpack-dev-server --hot? Im Grunde fügt dies die HotModuleReplacementPlugin der Webpack-Konfiguration hinzu, die es Ihnen im Wesentlichen ermöglicht, nur die Komponente neu zu laden, die geändert wird, anstatt eine vollständige Seite zu aktualisieren! Ziemlich verkehrt nützlich, wenn Sie mit Staaten arbeiten! Gemäß der Dokumentation:

Jeder Modus auch Ersatz Hot Module unterstützt, in dem das Bündel darüber informiert, dass eine Änderung statt einer vollen Seite neu geladen passiert ist. Eine Hot Modulaustausch-Laufzeit könnte dann die aktualisierten Module laden und sie in die laufende App einspeichern.

Weitere Informationen darüber, was es ist und wie es hier verwendet: https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

Ich hoffe, dies zu verstehen hilft webpack ein bisschen mehr!