Ausführliche Erläuterung der Vor- und Nachteile der Verwendung von Webpack Path und publicPath

Dieses Mal werde ich Ihnen die Vor- und Nachteile der Verwendung von Webpack Path und PublicPath ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Webpack Path 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)

Wichtig

Wenn Sie Style-Loader oder CSS SourceMap verwenden, müssen Sie publicPath festlegen. Legen Sie den absoluten Pfad der Serveradresse fest, z. B. http://server/assets/, damit die Ressourcen korrekt geladen werden können.

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:

Zusammenfassung der Datenübertragungsdatenmethoden für Eltern-Kind-Komponenten der Vue-Formularklasse

Zusammenfassung von Angular+ Routerlink-Sprungmethode

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Vor- und Nachteile der Verwendung von Webpack Path und publicPath. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!