Webpack'te Asset'ler

Her projede bazı kaynaklar veya asset'ler (assets) bulunur. Bu asset'ler resimler, yazı tipi dosyaları ve benzeri şeyleri temsil eder.

Genellikle, kaynakları proje klasöründen derleme klasörüne taşımak isteriz. Ancak yine önbellek sorunu ortaya çıkar. Örneğin, tarayıcı resimleri önbelleğe alır. Bu, bir resmi değiştirirsek ama dosya adını değiştirmezsek, site kullanıcılarının resmin önceki sürümünü göreceği anlamına gelir, çünkü onlar tarafından önbelleğe alınmıştır.

Sorunun çözümü, bildiğiniz gibi, dosya adına bir karma değeri (hash) eklemektir. Webpack, kaynak dosyalarını derleme klasörüne kopyalayarak onlara karma değerleri eklemenize ve en önemlisi, tüm dosyalardaki bu kaynaklara giden yolları yenileriyle değiştirmenize olanak tanır.

Webpack'te asset'lerle çalışma, özel asset modülleri kullanılarak gerçekleştirilir. Dört tipi vardır: asset/resource, asset/inline, asset/source, asset.

asset/resource modülü, dosyaları proje klasöründen derleme klasörüne kopyalar ve onlara giden yolları yenileriyle değiştirir. asset/inline modülü, dosyaları proje klasöründen alır ve derleme kodunda dosya yollarını base64 formatındaki veri URL'leri ile değiştirir. asset/source modülü, dosyaları proje klasöründen alır ve onları bir metin dizesi olarak döndürür. asset modülü, dosyayı derleme klasörüne kopyalayıp kopyalamamaya veya onu base64'e dönüştürüp dönüştürmemeye kendi karar verir. Seçim, dosya boyutuna bağlı olarak yapılır. Varsayılan olarak 8kb'dan büyük dosyalar dosya olarak derlenir.

Bu modüllerin genel uygulama şeması aşağıdaki gibidir:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // dosyalar
      type: 'asset/resource' // modül tipi
    }
  ]
},