Serving static assets in webpack dev server

Question

Ich starte webpack-dev-server aus dem Stammordner meines Projekts. Ich habe Vermögen Ordner in /src/assets, die von CopyWebPackPlugin kopiert wird:

new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]) 

Wenn ich logo.png innerhalb Vermögen Ordner setzen dann webpack-dev-Server Nach dem Ausführen kann ich nicht Zugriff http://localhost/assets/logo.png Datei, kann aber zugreifen http://localhost/src/assets/logo.png Datei. Wenn ich jedoch im Produktionsmodus laufe, stellt sich die Situation auf den Kopf.

Wie konfiguriert man Webpack-Server http://localhost/assets/logo.png Datei im Entwicklungsmodus zugänglich machen?

Answer 1

Sie können festlegen, dass Webpack beim Laden über den Browser einen anderen Pfad verwendet.

Fügen Sie im Abschnitt output Ihrer Webpack-Konfigurationsdatei ein Feld publicPath hinzu, das auf Ihren Ordner assets verweist.

webpack.config.js

output: { 
    // your stuff 
    publicPath: '/assets/' 
} 

Answer 2

Ich möchte hinzufügen, dass es das Gegenteil für mich war. Ich hatte ursprünglich meine Bilder und .obj/.mtl Dateien in einem public Ordner, der an der Wurzel meiner Anwendung bestand. Ich habe sie in einen Ordner assets verschoben, der im Ordner app erstellt wurde.

Durchführen einer npm install --save-dev copy-webpack-plugin und das Hinzufügen der

new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]) 

auf die webpack.common.js Datei mein Problem behoben.