Webpack: Benötigt (oder kopiert) automatisch alle Bilder, auf die in HTML verwiesen wird?

Question

Gerade begonnen, Webpack mit einer eckigen 1.x-Anwendung zu verwenden, habe ich funktionierende Lösung, aber anstatt meine Bilder (die sie in das Build-Verzeichnis kopieren würde) gezwungen hatte ich hoffe, das HTML automatisch analysieren und alle IMG erfordern Stichworte.

Ich schien ein Modul gefunden zu haben, obwohl es anscheinend nicht mehr gepflegt wird? https://github.com/webpack/html-loader

Ich fragte mich, was meine Möglichkeiten hier sind?

Die Option besteht darin, das webpack copy-Plugin zu verwenden, um Objekte in das Build-Verzeichnis zu kopieren, aber das bedeutet, dass ich Dinge kopieren kann, die nicht verwendet werden.

Ich würde jede Einsicht schätzen, die jemand hat. Ich beginne gerade mit webpack, aber was ich bis jetzt sehe, ist großartig, obwohl es eine andere Art von Denken erfordert, um zu schlucken.

Jede Hilfe oder Information dankbar geschätzt.

Dank

Answer 1

Ich verwende in meinem dev Config html-loader und es funktioniert gut für das, was ich brauche. Ich bin nicht wirklich sicher, warum Sie wollen, dass die Bilder kopiert werden, aber wenn Sie wollen, dass die Imgs benötigt werden, wird HTML-Loader dies für Sie erreichen. Danach verwende ich die URL-loader wie folgt aus:

{ 
     test: /\.(png|gif|jpe?g)$/i, 
     // if the file have ~50kb or less it's added to DOM as a data atributte, if not it's compressed as an image 
     loader: 'url?limit=50000' 
    }, 

Wenn das Bild größer als 50 kb ist es meinem Build-Ordner kopiert wird, wenn i'ts klein ich es auf das DOM als Daten atributte sein lassen Sie Reduzieren der Anzahl der HTTP-Anfragen.

Ich hoffe, dass dir das irgendwie hilft. Webpack ist am Anfang wirklich schwer, aber sobald du verstehst, wie es funktioniert, wirst du nie wieder zurück gehen.