Was macht "publicPath" in Webpack?

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?"   
  } 
}

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)

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

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

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.

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

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

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.

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