Wie verarbeitet man eine Reihe von Bildern in Webpack

Question

Ich habe versucht, meinen Kopf um Webpack zu wickeln. Es fällt mir wirklich schwer, es zu verdauen. Ich kann dir nicht sagen, wie viele Tutorials ich gelesen habe. Ich habe fast alle auf ihrer Website durchgesehen. Lesen Sie den Dokumentabschnitt zweimal. Ich habe Video-Tutorials auf Lynda und Youtube angeschaut. Seit fast einer Woche kämpft man damit. Ich kann das meiste davon immer noch nicht verstehen.

Also nur zum Teufel, lassen Sie mich sagen, ich möchte eine Reihe von Bildern verarbeiten. Es gibt kein Projekt, es gibt keine Module, Javascript oder nichts. Ich möchte nur die Bilder verarbeiten. Warum? Kein Grund. Nur um zu verstehen, wie Webpack funktioniert und mit der Konfigurationsdatei auf verschiedene Arten herumspielt, um es zu verstehen.

Mit diesem gesagt, alles, was ich tun möchte, ist eine Reihe von Bildern aus dem Ordner "app/img" in den Ordner "build/img" zu bewegen, und möglicherweise den Hash in den Dateinamen. ZB:

module.exports = { 
    entry: { 
     entry: '' 
    }, 
    output: { 
     path: 'build', 
     filename: '' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.(png)$/, 
       loader: 'file?name=img/[name]-[hash].[ext]', 
       include: './app/img/' 
      } 
     ] 
    } 
}; 

Da es zur Ausgabe keine JS-Datei ist (also ich will nur Bilder Prozess sein), gibt es keinen Eintrag für ‚Eintrag‘ und ‚Ausgang‘ - oder zumindest ich bin nicht sicher, was zu lege es dort hin.

Wie würde ich das machen? Denn so wie es aussieht, sind diese Konfigurationsdateien nicht korrekt, aber ich habe keine Ahnung, wie es funktioniert. Vielen Dank.

PS: Ich habe das Datei-Loader-Paket heruntergeladen, das ich versuche, dafür zu verwenden.

Answer 1

Webpack ist mehr Bundler als Task Runner wie Schluck oder Grunzen. Sie versuchen, eine einfache Kopieraufgabe mit Umbenennungsdateien zu entwickeln - so sollten Sie Webpack nicht verwenden.

loaders wird nur dann ausgelöst, wenn test Szenario Weg in require oder import übereinstimmen. Da Sie keine importierenden Anweisungen haben, wird Ihr Loader nie benutzt.