Was macht "publicPath" in Webpack?

250

Webpack docs Zustand, der output.publicPathist:

Die output.pathaus der Sicht des JavaScript.

Könnten Sie bitte näher erläutern, was dies tatsächlich bedeutet?

Ich verwende output.pathund output.filenamegebe an, wo Webpack das Ergebnis ausgeben soll, bin mir aber nicht sicher, was ich eingeben soll output.publicPathund ob es erforderlich ist.

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}
Mischa Moroshko
quelle
17
Ich möchte dieser Frage hinzufügen: Wann würden Sie verwenden pathund wann würden Sie verwenden publicPath?
Wmock
6
Jemand in ihrem Entwicklerteam sollte aufwachen. So viele stellen diese Frage
Royi Namir
Hier sind die Dokumente für webpack2 .
Eliran Malka

Antworten:

133

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 .

src="picture.jpg" Schreibt ➡ neu src="/assets/picture.jpg"

Zugriff durch: ( http://server/assets/picture.jpg)


src="/img/picture.jpg" Schreibt ➡ neu src="/assets/img/picture.jpg"

Zugriff durch: ( http://server/assets/img/picture.jpg)

Kevin Law
quelle
65

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/"

Johannes Ewald
quelle
3
Können Sie mir bitte sagen, wo sich der Assets-Ordner befindet? Ich möchte die Dateien im Assets-Ordner sehen. Danke.
Gauti
53

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 habe

Angenommen, Sie legen Ihre gesamte js-Quelldatei unter einem srcOrdner ab und konfigurieren Ihr Webpack so, dass die Quelldatei in einen distOrdner mit erstellt wird output.path.

Sie möchten Ihre statischen Assets jedoch an einem aussagekräftigeren Ort bereitstellen, z . B. webroot/public/assetsdiesmal out.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.jsdie webpack-dev-serverdie js unter dem dist - Ordner finden

Aktualisieren:

Vielen Dank, dass Charlie Martin meine Antwort korrigiert hat

Original: Der publicPath wird nur für Entwicklungszwecke verwendet, nicht nur für Entwicklungszwecke

Nein, diese Option ist auf dem Entwicklungsserver nützlich, soll jedoch Skriptpakete in der Produktion asynchron laden. Angenommen, Sie haben eine sehr große Einzelseitenanwendung (z. B. Facebook). Facebook möchte nicht jedes Mal, wenn Sie die Homepage laden, sein gesamtes Javascript bereitstellen, daher wird nur das bereitgestellt, was auf der Homepage benötigt wird. Wenn Sie dann zu Ihrem Profil gehen, wird etwas mehr Javascript für diese Seite mit Ajax geladen. Diese Option gibt an, wo auf Ihrem Server das Bundle geladen werden soll

Sean
quelle
1
Es ist nicht nur für Entwickler gedacht, die Antwort von @ jhnns erklärt, wie sich dies auf die Loader-Ausgaben auswirkt.
Wen
es ist das gleiche, nicht wahr? Diese Eigenschaft teilt Ihrem Loader und Ihrer Middleware mit, wo sich die realen Assets befinden. Hoffentlich verwenden Sie keine Webpackmiddleware oder keinen Webpack-Dev-Server in Ihrer Produktionsumgebung. Ich denke, dies ist nur für die Dev-Umgebung gedacht. Weitere Informationen finden
Sean
1
Aus diesem webpack.github.io/docs/configuration.html#output-publicpath geht hervor, dass diese Option das Webpack anweist, die richtige URL oder den richtigen Pfad der Assets in die generierten Dateien einzugeben, nicht nur für Middleware. Ich denke, wenn Sie einen Dev-Server ausführen, versucht die Middleware publichPath, Anforderungen zu entführen und die In-Memory-Dateien zurückzugeben.
Wen
Genau in Ihrer Produktionsumgebung werden Sie webpack -pIhre 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 ?
Sean
7
Nein, diese Option ist auf dem Entwicklungsserver nützlich, soll jedoch Skriptpakete in der Produktion asynchron laden. Angenommen, Sie haben eine sehr große Einzelseitenanwendung (z. B. Facebook). Facebook möchte nicht jedes Mal, wenn Sie die Homepage laden, sein gesamtes Javascript bereitstellen, daher wird nur das bereitgestellt, was auf der Homepage benötigt wird. Wenn Sie dann zu Ihrem Profil gehen, wird etwas mehr Javascript für diese Seite mit Ajax geladen. Diese Option gibt an, wo auf Ihrem Server das Bundle geladen werden soll
Charlie Martin
19

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:

//application directory structure
/app/
/build/
/build/index.html
/webpack.config.js


//webpack.config.js
var path = require("path");
module.exports = {
...
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "bundle.js"
  }
};  


//index.html
<!DOCTYPE>
<html>
...
<script src="assets/bundle.js"></script>
</html>

//starting a webpack-dev-server from the command line
$ webpack-dev-server --content-base build 

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.

Isaac Pak
quelle
Eine so gute Erklärung, aber wenn ich dann in die Produktion gehe oder den Build von Hand mache, muss /build/bundle.jsich das srcin meiner index.htmlDatei ändern, oder?
ArchNoob
Entschuldigung für die späte Antwort. Sie müssen den src nicht ändern. Unabhängig davon, ob Sie sich in der Produktion oder in der Entwicklung befinden, erstellt Webpack eine Bundle.js im Ausgabepfad. Im obigen Beispiel ist es /build/bundle.js.
Isaac Pak
Vielen Dank, ich frage nach der srcZeile 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 ändern src="build/bundle.js". Oder gibt es einen automatisierten Weg?
ArchNoob
2
Ich verstehe deine Frage jetzt. Ja, Sie müssen den src für die Produktion in build / bundle.js ändern. Was einen automatisierten Weg betrifft, bin ich mir nicht sicher. Ich habe gesehen, wie andere zwei verschiedene webpack.config.js-Dateien erstellt haben, eine für die Produktion und eine für die Entwicklung. Es gibt wahrscheinlich einen programmatischen Weg, wie wenn (ENV === Produktion) dies tun ... aber das habe ich nicht versucht.
Isaac Pak
@ArchNoob Nur ein Hinweis darauf, wie ich das jetzt in der Produktion mache. Ich habe den src-Wert nicht geändert, sondern meinen publicPath-Wert von /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.
Isaac Pak
15

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

Kent Wood
quelle
In meinem Fall scheint es kein Präfix hinzuzufügen.
Param Singh
14

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:

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js"
  } 
}

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

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: path.resolve("/public/assets/js")   
  } 
}

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

<script src="public/assets/js/app.js"></script>

Also zusammenfassend ist publicPath wie Zuordnung zwischen virtual directoryin Ihrem Server und output directorydurch output.path Konfiguration angegeben, Jedes Mal , wenn Anforderung für die Datei public / assets / js / app.js kommt, /examples/dist/app.js Datei serviert wird

udeep shrestha
quelle
2
gut erklärt!
Ganesh Pandey
3

In der Dokumentation zu webpack2 wird dies viel sauberer erklärt: https://webpack.js.org/guides/public-path/#use-cases

Das Webpack verfügt über eine äußerst nützliche Konfiguration, mit der Sie den Basispfad für alle Assets in Ihrer Anwendung angeben können. Es heißt publicPath.

Alan
quelle
2

publicPath wird von Webpack zum Ersetzen des in Ihrem CSS definierten relativen Pfads zum Verweisen auf Bild- und Schriftdateien verwendet.

Khalid Azam
quelle