Der Unterschied zwischen Webpack-Pfad und publicPath besteht in der Analyse

Dieses Mal werde ich den Unterschied zwischen Webpack-Pfad und publicPath analysieren. Was sind die Vorsichtsmaßnahmen über den Unterschied zwischen Webpack-Pfad und publicPath?

Vorwort

Während der Entwicklung von WebpackModularisierung wurde die Konfiguration webpack.config.js entdeckt Der Ausgabepfad der Datei hat immer einen Pfad und publicPath, ich verstehe seine Bedeutung nicht.

module.exports = {
 output: {
 path: path.resolve("./examples/dist"),
 filename: "app.js",
 publicPath: "What should I put here?" 
 } 
}

Text

Offizielle Erklärung

publicPath: Der Ausgabepfad aus der Sicht von die Javascript / HTML-Seite.

Der Ausgabepfad von der JS/HTML-Seite

Mein Verständnis

output.path speichert alle Ihre Ausgaben. Die lokale Dateiverzeichnis für die Datei. (Absoluter Pfad)

Zum Beispiel:

path.join(dirname, “build/”)

webpack gibt alle Dateien in localdisk/path-to-your-project/build/

publicPath

aus

Der Speicherort aller gepackten Dateien, die Sie hochgeladen haben (relativ zum Stammverzeichnis des Servers)

Pfad: das Ausgabeverzeichnis, in dem die gepackten Dateien gespeichert werden

publicPath: Geben Sie das Verzeichnis an, auf das die Ressourcendateien verweisen

Verwendung: In Express wird beispielsweise public/dist als Stammverzeichnis der Website angegeben und die Quelldateien der Website werden öffentlich gespeichert. Dann müssen Sie dies tun set path: „./dist“ gibt die Paketausgabe in dieses Verzeichnis an, und publicPath muss auf „/“ gesetzt werden, was den aktuellen Pfad angibt.

publicPath hängt vom Speicherort des Stammverzeichnisses Ihrer Website ab, da sich die gepackten Dateien alle im Stammverzeichnis der Website befinden und die Verweise auf diese Dateien auf diesem Verzeichnis basieren. Gehen Sie davon aus, dass das Stammverzeichnis der Website öffentlich ist und der referenzierte Bildpfad „./img.png“ lautet. Wenn der öffentliche Pfad „/“ ist, kann das Bild nicht angezeigt werden, da die Bilder in dist gepackt und abgelegt sind um den publicPath auf „ /dist“ zu setzen.

Zum Beispiel:

/assets/

Angenommen, Sie stellen dieses Projekt auf dem Server http://server/ bereit.

Durch Ändern des Output.publicPath-Sets zu /assets/ hinzufügen, findet dieses Projekt Webpack-Ressourcen unter http://server/assets/.

Unter dieser Voraussetzung werden alle Pfade im Zusammenhang mit Webpack neu geschrieben, sodass sie mit /assets/ beginnen.

src="picture.jpg" Re-writes ➡ src="/assets/picture.jpg"
Accessed by: (http://server/assets/picture.jpg)
src="/img/picture.jpg" Re-writes ➡ src="/assets/img/picture.jpg"
Accessed by: (http://server/assets/img/picture.jpg)

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Eine Zusammenfassung der Methode zur Verwendung von JS zur Bestimmung des in einer Zeichenfolge enthaltenen Inhalts

JS +HTML5 echte Mausbindung Partikelanimation von Ereignissen

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen Webpack-Pfad und publicPath besteht in der Analyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!