Assets in Webpack

In jedem Projekt gibt es einige Ressourcen oder Assets (assets). Diese Assets sind Bilder, Schriftdateien und ähnliche Dinge.

In der Regel möchten wir einfach Ressourcen aus dem Projektordner in den Build-Ordner übertragen. Aber wiederum entsteht das Problem mit dem Cache. Zum Beispiel cached der Browser Bilder. Das bedeutet, wenn wir ein Bild ändern, ohne den Dateinamen zu ändern, werden die Benutzer der Website die vorherige Version des Bildes sehen, da es bei ihnen gecacht wurde.

Die Lösung des Problems, wie Sie bereits wissen, ist das Hinzufügen eines Hashs zum Dateinamen. Webpack erlaubt das Kopieren von Ressourcendateien in den Build-Ordner, wobei ihnen Hashs hinzugefügt werden und, was am wichtigsten ist, die Pfade zu diesen Ressourcen in allen Dateien auf die neuen geändert werden.

In Webpack wird die Arbeit mit Assets mit speziellen Asset-Modulen durchgeführt. Es gibt vier Typen: asset/resource, asset/inline, asset/source, asset.

Das Modul asset/resource kopiert Dateien vom Projektordner in den Build-Ordner und ersetzt die Pfade zu ihnen durch neue. Das Modul asset/inline nimmt Dateien aus dem Projektordner und ersetzt im Build-Code die Pfade zu den Dateien durch Base64. Das Modul asset/source nimmt Dateien aus dem Projektordner und gibt sie als Textstring zurück. Das Modul asset wählt selbst aus, ob es die Datei in den Build-Ordner kopieren oder sie in Base64 umwandeln soll. Die Auswahl erfolgt in Abhängigkeit von der Dateigröße. Standardmäßig werden Dateien über 8kb als Dateien gebündelt.

Das allgemeine Schema zur Anwendung dieser Module sieht folgendermaßen aus:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // Dateien
      type: 'asset/resource' // Modultyp
    }
  ]
},