web-dev-qa-db-de.com

Statische Assets im Webpack Dev Server bereitstellen

Ich führe webpack-dev-server vom Stammordner meines Projekts aus. __ Ich habe den Ordner assets im Ordner / src/assets, der von CopyWebPackPlugin kopiert wird:

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

Wenn ich logo.png in den Assets-Ordner stecke, kann ich nach dem Ausführen von webpack-dev-server nicht auf die Datei http: //localhost/assets/logo.png zugreifen, kann jedoch darauf zugreifen http: //localhost/src/assets/logo.png datei. Wenn ich jedoch im Produktionsmodus arbeite, stellt sich die Situation auf den Kopf.

Wie kann der Webpack-Server so konfiguriert werden, dass http: //localhost/assets/logo.png im Entwicklungsmodus verfügbar ist?

webpackwebpack-dev-server
44
Rem

Sie können webpack anweisen, beim Laden vom Browser einen anderen Pfad zu verwenden.

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

webpack.config.js

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

Ich würde hinzufügen, dass es für mich das Gegenteil war. Ich hatte meine Bilder und .obj/.mtl-Dateien ursprünglich in einem public-Ordner, der sich im Stammverzeichnis meiner Anwendung befand. Ich habe sie in einen assets-Ordner verschoben, der im app-Ordner erstellt wurde.

Einen npm install --save-dev copy-webpack-plugin ausführen und den 

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

in der webpack.common.js-Datei wurde mein Problem behoben.

32
Katana24

ich benutze Proxy:

proxy: {
  '/static': {
      target: 'http://localhost:3333',
      pathRewrite: {'^/static' : '/app/static'}
   }
}
0
insub