Webpack docs Zustand, der output.publicPath
ist:
Die
output.path
aus der Sicht des JavaScript.
Könnten Sie bitte näher erläutern, was dies tatsächlich bedeutet?
Ich verwende output.path
und output.filename
gebe an, wo Webpack das Ergebnis ausgeben soll, bin mir aber nicht sicher, was ich eingeben soll output.publicPath
und ob es erforderlich ist.
module.exports = {
output: {
path: path.resolve("./examples/dist"),
filename: "app.js",
publicPath: "What should I put here?"
}
}
javascript
webpack
Mischa Moroshko
quelle
quelle
path
und wann würden Sie verwendenpublicPath
?Antworten:
output.path
Lokales Festplattenverzeichnis zum Speichern aller Ausgabedateien (absoluter Pfad) .
Beispiel:
path.join(__dirname, "build/")
Webpack gibt alles in aus
localdisk/path-to-your-project/build/
output.publicPath
Wo Sie Ihre gebündelten Dateien hochgeladen haben. (Relativ zum Server root)
Beispiel:
/assets/
Angenommen, Sie haben die App im Serverstamm bereitgestellt
http://server/
.Durch die Verwendung
/assets/
findet die App Webpack-Assets unter :http://server/assets/
. Unter der Haube werden alle URLs, auf die das Webpack stößt, zunächst mit "/assets/
" neu geschrieben .quelle
Bei der Ausführung im Browser muss das Webpack wissen, wo Sie das generierte Bundle hosten. Auf diese Weise können zusätzliche Chunks (bei Verwendung der Codeaufteilung ) oder referenzierte Dateien angefordert werden, die über den Datei-Loader bzw. den URL-Loader geladen werden .
Beispiel: Wenn Sie Ihren http-Server so konfigurieren, dass er das generierte Bundle unter
/assets/
hostet, sollten Sie Folgendes schreiben:publicPath: "/assets/"
quelle
Der publicPath wird nur für Entwicklungszwecke verwendetIch war verwirrt, als ich diese Konfigurationseigenschaft zum ersten Mal sah, aber es macht jetzt Sinn, dass ich Webpack für eine Weile verwendet habeAngenommen, Sie legen Ihre gesamte js-Quelldatei unter einem
src
Ordner ab und konfigurieren Ihr Webpack so, dass die Quelldatei in einendist
Ordner mit erstellt wirdoutput.path
.Sie möchten Ihre statischen Assets jedoch an einem aussagekräftigeren Ort bereitstellen, z . B.
webroot/public/assets
diesmalout.publicPath='/webroot/public/assets'
, damit Sie in Ihrem HTML-Code auf Ihre JS verweisen können<script src="/webroot/public/assets/bundle.js"></script>
.wenn Sie verlangen ,
webroot/public/assets/bundle.js
diewebpack-dev-server
die js unter dem dist - Ordner findenAktualisieren:
Vielen Dank, dass Charlie Martin meine Antwort korrigiert hat
Original: Der publicPath wird nur für Entwicklungszwecke verwendet, nicht nur für Entwicklungszwecke
quelle
publichPath
, Anforderungen zu entführen und die In-Memory-Dateien zurückzugeben.webpack -p
Ihre Assets erstellen, und Ihre Assets sollten von Ihrem Anwendungsserver oder Ihrem Nginx-Server anstelle von Webpack-Servern oder Webpack-Middleware bereitgestellt werden, sodass diese Konfiguration in der Produktionsumgebung nicht mehr nützlich ist ?Mit publicPath können Sie auf den Speicherort verweisen, an dem der Webpack-Dev-Server seine "virtuellen" Dateien bereitstellen soll. Die publicPath-Option ist derselbe Speicherort wie die Content-Build-Option für den Webpack-Dev-Server. webpack-dev-server erstellt virtuelle Dateien, die beim Starten verwendet werden. Diese virtuellen Dateien ähneln den tatsächlich vom Webpack erstellten gebündelten Dateien. Grundsätzlich soll die Option --content-base auf das Verzeichnis verweisen, in dem sich Ihre index.html befindet. Hier ein Beispiel für die Einrichtung:
webpack-dev-server hat einen Ordner für virtuelle Assets zusammen mit einer virtuellen Datei bundle.js erstellt, auf die verwiesen wird. Sie können dies testen, indem Sie zu localhost gehen: 8080 / assets / bundle.js und dann in Ihrer Anwendung nach diesen Dateien suchen. Sie werden nur generiert, wenn Sie den Webpack-Dev-Server ausführen.
quelle
/build/bundle.js
ich dassrc
in meinerindex.html
Datei ändern, oder?src
Zeile in der Datei index.html. Im Moment deutet es darauf hin,"assets/bundle.js"
ob das Bundle in die Produktion gehen soll,"build/bundle.js"
also muss ich das in der HTML-src-Zeile auf ändernsrc="build/bundle.js"
. Oder gibt es einen automatisierten Weg?/assets/
in geändert/build
. Auf diese Weise muss ich meine index.html nicht ändern. Ich habe auch meine index.html aus dem Build-Ordner in das Stammverzeichnis der Anwendung verschoben.In meinem Fall habe ich eine CDN und werde alle meine verarbeiteten statischen Dateien (js, imgs, fonts ...) in meine CDN einfügen. Angenommen, die URL lautet http://my.cdn.com/.
Wenn es also eine js-Datei gibt, deren ursprüngliche Verweis-URL in HTML './js/my.js' lautet, sollte sie in der Produktionsumgebung zu http://my.cdn.com/js/my.js werden
In diesem Fall muss ich nur publicpath gleich http://my.cdn.com/ setzen und Webpack fügt dieses Präfix automatisch hinzu
quelle
Dateiname gibt den Namen der Datei an, in der sich der gesamte gebündelte Code nach dem Erstellungsschritt ansammelt.
Pfad gibt das Ausgabeverzeichnis an, in dem die Datei app.js (Dateiname) auf der Festplatte gespeichert werden soll. Wenn kein Ausgabeverzeichnis vorhanden ist, erstellt Webpack dieses Verzeichnis für Sie. beispielsweise:
Dadurch wird ein Verzeichnis myproject / examples / dist erstellt und unter diesem Verzeichnis wird app.js , /myproject/examples/dist/app.js erstellt . Nach dem Erstellen können Sie zu myproject / examples / dist / app.js navigieren , um den gebündelten Code anzuzeigen
publicPath: "Was soll ich hier setzen?"
publicPath gibt das virtuelle Verzeichnis auf dem Webserver an, von dem aus die gebündelte Datei app.js bereitgestellt wird. Beachten Sie, dass der Wortserver bei Verwendung von publicPath entweder ein Webpack-Dev-Server oder ein Express-Server oder ein anderer Server sein kann, den Sie mit Webpack verwenden können.
beispielsweise
Diese Konfiguration weist das Webpack an, alle Ihre js-Dateien in examples / dist / app.js zu bündeln und in diese Datei zu schreiben.
publicPath weist den Webpack-Dev-Server oder Express-Server an, diese gebündelte Datei bereitzustellen , z. B. examples / dist / app.js vom angegebenen virtuellen Speicherort im Server, dh / public / assets / js. In Ihrer HTML-Datei müssen Sie also auf diese Datei verweisen als
Also zusammenfassend ist publicPath wie Zuordnung zwischen
virtual directory
in Ihrem Server undoutput directory
durch output.path Konfiguration angegeben, Jedes Mal , wenn Anforderung für die Datei public / assets / js / app.js kommt, /examples/dist/app.js Datei serviert wirdquelle
In der Dokumentation zu webpack2 wird dies viel sauberer erklärt: https://webpack.js.org/guides/public-path/#use-cases
quelle
publicPath wird von Webpack zum Ersetzen des in Ihrem CSS definierten relativen Pfads zum Verweisen auf Bild- und Schriftdateien verwendet.
quelle