Kann ich das Webpack auf der Client-Seite ohne Nodejs Server verwenden?

Question

Ich versuche, eine Web-App zu bauen, wo ich alle HTML-, JS- und CSS-Dateien auf Amazon S3 speichern und mit einem erholsamen Server über API kommunizieren möchte.

Ich versuche, Lazy Loading und vielleicht Routing mit Reagieren Router zu erreichen. Es scheint, dass Webpack diese Feature-Code-Aufspaltung hat, die ähnlich wie Lazy Loading funktionieren würde.

Alle Tutorials und Beispiele, die ich gefunden habe, betrifft jedoch webpack-dev-server, der ein kleiner Knoten Express-Server ist. Gibt es da überhaupt ein Bundle zum Buildzeitpunkt und alles auf Amazon S3 hochzuladen und etwas ähnliches wie Angulars ocLazyLoading zu erreichen?

Answer 1

Es ist definitiv möglich, eine statische Paket-JS-Datei zu erstellen, die Sie in Ihrem Produktionscode verwenden können, der webpack-dev-server nicht enthält.

Siehe this example als Referenz (Hinweis: Ich bin der Besitzer dieses Repo). webpack.prod.config.js erstellt eine fertigungsreife Bundle-Datei mit Webpack über node.js, die selbst keine node.js mehr benötigt. Aus diesem Grund können Sie es einfach als eine einfache statische Datei dienen (was im Live-Beispiel getan wird).

Der Hauptunterschied besteht darin, wie die Einstiegspunkte in den Entwicklungs- und Produktionsumgebungen geschrieben werden. Für die Entwicklung webpack-dev-server wird

module.exports = { 
    entry: [ 
     'webpack-dev-server/client?http://localhost:3000', 
     'webpack/hot/only-dev-server', 
     './src/index' 
    ], 
    // ... 
} 

In der Produktionsumgebung Sie die webpack-dev-server und das heiße Nachladen Teil

module.exports = { 
    entry: [ 
     './src/index' 
    ], 
    // ... 
} 

Wenn Sie Ihren Code teilen möchten in mehr als ein Bündel überspringen verwendet, möchten Sie vielleicht Sehen Sie sich an, wie Sie multiple entry points definieren und die Dateien entsprechend verknüpfen.