Webpack Encore
Assets mit Webpack Encore versionieren
Bilder, Favicons und CSS sollten im Livebetrieb zuverlässig versioniert werden. Mit Webpack Encore lassen sich statische Assets sauber kopieren und mit Hashes versehen.
Bei Websites ist es verlockend, Bilder, Favicons oder Manifest-Dateien direkt unter public/ abzulegen. Das funktioniert zwar, wird aber spätestens beim Browser-Cache unsauber: Wenn sich eine Datei ändert, kann der Browser trotzdem noch die alte Version verwenden.
Die Idee
Statische Dateien liegen im Projekt unter assets/website/images. Webpack Encore kopiert sie beim Build nach public/build/website/images und versieht sie mit einem Hash im Dateinamen.
.copyFiles({
from: './assets/website/images',
to: 'images/[path][name].[hash:8].[ext]',
pattern: /\.(png|jpg|jpeg|svg|ico)$/
})
Warum das hilft
Durch den Hash entsteht bei Änderungen automatisch ein neuer Dateiname. Der Browser kann lange cachen, bekommt bei einem neuen Build aber trotzdem die aktuelle Datei.
Manifest-Dateien
Einige Dateien, zum Beispiel site.webmanifest, sollten unter einem stabilen Namen erreichbar bleiben. Dafür kann man eine zweite Copy-Regel verwenden, die diese Dateien zusätzlich ohne Hash ausgibt.
.copyFiles({
from: './assets/website/images',
to: 'images/[path][name].[ext]',
pattern: /(?:site\.webmanifest|web-app-manifest-\d+x\d+\.png)$/
})
Einordnung
Für kleine Websites wirkt das zunächst wie ein Detail. Im Livebetrieb ist es aber angenehm, wenn Logo, Favicons, CSS und JavaScript reproduzierbar aus dem Build kommen. So bleibt klar, welche Dateien Teil des Projekts sind und welche Version gerade ausgeliefert wird.