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-dev-middleware(und möglicherweisewebpack-hot-middleware) verwenden, wenn Sie Ihren eigenen benutzerdefinierten Entwicklungsserver schreiben möchten. Sofern Siewebpack-dev-serverkeine bestimmte Funktion haben möchten, die Sie nicht haben, sollten Sie diese einfach verwenden.Antworten:
webpackWie 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-middlewareWebpack 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 .webpack-dev-serverWebpack 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-middlewareWebpack 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 bereitstellenwebpack-dev-middleware.Ebenfalls...
webpack-hot-server-middlewareNur um die Dinge zu verwirren noch mehr, gibt es auch Webpack Hot Server Middleware , die ausgelegt ist , verwendet werden , neben
webpack-dev-middlewareundwebpack-hot-middlewareHot - Module Ersatz der Server gerendert Anwendungen zu handhaben .quelle
Ab dem Update im Jahr 2018 und unter Berücksichtigung des Hinweises zum Webpack-Dev-Server auf der offiziellen GitHub-Seite:
Was wäre die natürliche Wahl, um ein Webpack HMR zu bauen?
quelle
Use webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers.Sie vielleicht Webpack-Serve ausprobieren möchten .