Webpack gegen Webpack-Dev-Server gegen Webpack-Dev-Middleware gegen Webpack-Hot-Middleware gegen etc.

Ich beginne webpackmit einer node/expressUmgebung zu arbeiten, in der eine ReactJSserverseitig gerenderte Anwendung entwickelt wird react-router. Ich bin sehr verwirrt über die Rolle jedes Webpack-Pakets für Entwickler- und Produktumgebungen (Laufzeitumgebungen).

Hier ist die Zusammenfassung meines Verständnisses:

webpack: Ist ein Paket, ein Tool, um verschiedene Teile einer Webanwendung zusammenzufügen und dann (normalerweise bundle.js) in einer einzigen .js-Datei zu bündeln . Die Ergebnisdatei wird dann in einer Produktumgebung bereitgestellt, die von der Anwendung geladen werden soll, und enthält alle erforderlichen Komponenten, um den Code auszuführen. Zu den Funktionen gehören das Verkleinern von Code, das Minimieren usw.

webpack-dev-server: Ist ein Paket, das einen Server zum Verarbeiten der Website-Dateien bietet . Es erstellt auch eine einzelne .js-Datei ( bundle.js) aus Client-Komponenten, stellt sie jedoch im Speicher bereit . Es hat auch die Option ( -hot), alle Gebäudedateien zu überwachen und bei Codeänderungen ein neues Bundle im Speicher zu erstellen. Der Server wird direkt im Browser bedient (zB :) http:/localhost:8080/webpack-dev-server/whatever. Durch die Kombination aus Laden im Speicher, Hot-Processing und Browser-Serving kann der Benutzer die Anwendung im Browser aktualisieren, wenn sich der Code ändert. Dies ist ideal für die Entwicklungsumgebung.

Wenn ich Zweifel an dem obigen Text habe, bin ich mir über den Inhalt unten nicht sicher. Bitte teilen Sie mir dies gegebenenfalls mit

Ein häufiges Problem bei der Verwendung webpack-dev-servermit node/expressist, dass webpack-dev-serveres sich um einen Server handelt node/express. Dies macht es in dieser Umgebung schwierig, sowohl den Client als auch einen Knoten- / Expresscode (eine API usw.) auszuführen. HINWEIS: Dies ist, was ich konfrontiert habe, aber es wäre toll zu verstehen, warum dies im Detail geschieht ...

webpack-dev-middleware: Dies ist eine Middleware mit den gleichen Funktionen webpack-dev-server(Speicherbündelung, Hot-Reloading), jedoch in einem Format, das in die server/expressAnwendung eingefügt werden kann . Auf diese Weise haben Sie eine Art Server (den webpack-dev-server) Insider des Knotenservers. Ups: Ist das ein verrückter Traum ??? Wie kann dieses Stück die Dev- und Prod-Gleichung lösen und das Leben einfacher machen?

webpack-hot-middleware: This ... Stuck here ... hat dieses Stück gefunden, als ich gesucht habe webpack-dev-middleware... Keine Ahnung, wie man es benutzt.

ENDNOTE: Entschuldigung, es gibt ein falsches Denken. Ich brauche wirklich Hilfe, um diese Varianten in einer komplexen Umgebung zu verstehen. Wenn es Ihnen passt, fügen Sie bitte weitere Pakete / Daten hinzu, die das gesamte Szenario erstellen.

webpack

Wie Sie beschrieben haben, ist Webpack ein Modulbündler, der hauptsächlich verschiedene Modulformate bündelt, damit sie in einem Browser ausgeführt werden können. Es bietet sowohl eine CLI- als auch eine Node-API .

webpack-dev-middleware

Webpack Dev Middleware ist eine Middleware, die auf einem Express-Server bereitgestellt werden kann, um die neueste Kompilierung Ihres Bundles während der Entwicklung bereitzustellen . Dies verwendet webpackdie Node-API im Überwachungsmodus und gibt sie nicht in das Dateisystem aus, sondern in den Speicher .

Zum Vergleich könnten Sie express.staticin der Produktion so etwas anstelle dieser Middleware verwenden.

webpack-dev-server

Webpack Dev Server selbst ist ein Express - Server , die verwendet webpack-dev-middlewaredie neueste Bündel zu dienen und zusätzlich Griffe heißen Modulaustausch (HMR) Anfragen für Live - Modul - Updates auf dem Client.

webpack-hot-middleware

Webpack Hot Middleware ist eine Alternative zu, webpack-dev-serveraber anstatt einen Server selbst zu starten, können Sie ihn auf einem vorhandenen / benutzerdefinierten Express-Server neben sich bereitstellen webpack-dev-middleware.

Ebenfalls...

webpack-hot-server-middleware

Nur um die Dinge zu verwirren noch mehr, gibt es auch Webpack Hot Server Middleware , die ausgelegt ist , verwendet werden , neben webpack-dev-middlewareund webpack-hot-middlewareHot - Module Ersatz der Server gerendert Anwendungen zu handhaben .

Ab dem Update im Jahr 2018 und unter Berücksichtigung des Hinweises zum Webpack-Dev-Server auf der offiziellen GitHub-Seite:

Projekt in der Wartung Bitte beachten Sie, dass sich der Webpack-Dev-Server derzeit nur in der Wartung befindet und in naher Zukunft keine zusätzlichen Funktionen akzeptiert. Die meisten neuen Funktionsanforderungen können mit Express-Middleware ausgeführt werden. Bitte beachten Sie die Verwendung der Vorher- und Nachher-Haken in der Dokumentation.

Was wäre die natürliche Wahl, um ein Webpack HMR zu bauen?