web-dev-qa-db-de.com

Wie verwende ich das Webpack mit statischen Bilddateien?

Ich verwende Webpack zum Bündeln von .vue-Dateien, die import und export verwenden. Webpack erstellt einen Nizza bundle.js und das ist alles in Ordnung.

ABER wenn meine Vue-Datei ein Bild erwähnt, zum Beispiel:

<div>
     <img src='./images/thing.png'>
</div>

.style {
   background: url('./images/anotherthing.png');
}

Jetzt muss dieses Bild plötzlich in meinem dev-Ordner sein, und webpack möchte ALLE meine Bilddateien jedes Mal kopieren, wenn ich ein Zeichen in einer Javascript-Datei aktualisiere. Außerdem werden nicht ALLE meine Bilder auf diese Weise importiert. Daher muss ich einige Dateien manuell in den Ordner dist kopieren, und mit webpack werden auch einige Dateien kopiert ... 

Kann ich webpack anweisen, keine statischen Image-Dateien zu bündeln, die sich niemals ändern? Ist das überhaupt zu empfehlen? 

javascriptwebpackvue.js
6
Kokodoko

Webpack hat einen file-loader, der das Kopieren statischer Abhängigkeiten und das korrekte Auflösen ihrer URLs behandelt:

https://webpack.js.org/loaders/file-loader/

Hier ist eine ausführlichere Diskussion über Bilder speziell: https://webpack.js.org/guides/asset-management/#loading-images

2
Adrian Smith

Sie können eine andere Dateierweiterung verwenden, um bestimmte Bilder unterschiedlich zu behandeln. Stellen Sie sicher, dass der ignore-loader vor dem File-loader enthalten ist:

{ test: /ignore\.(png|jpg|gif|svg)$/, loader: 'ignore-loader' },
{ test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }

Fügen Sie dann Ihr Bild mit der vorangestellten Erweiterung ein:

<img src='./images/thing.ignore.png'>

Sie müssen die Datei ebenfalls in thing.ignore.png umbenennen. 

1
sidhuko

Nehmen wir an, wir haben folgende Struktur: - public/ - dist/ - static/ - src/ - webpack.config.js Sie können Ihre statischen Bilder im Verzeichnis static und alle von webpack erstellten Dateien im Verzeichnis dist speichern. Legen Sie das Webpack-Verzeichnis auf src fest. Webpack funktioniert nur mit dem Verzeichnis src. Ihre statischen Dateien werden vom Webpack getrennt.

Und benutze webpack watch: true. Webpack stellt nur geänderten Code und nicht alle Projekte zusammen.

0
Martin