Assets Webpack-də

Hər bir layihədə bəzi resurslar və ya assets (assets) olur. Bu assets-lər şəkillər, yazı tipli fayllar və buna bənzər şeylərdir.

Bir qayda olaraq, biz sadəcə olaraq resursları layihə qovluğundan yığın qovluğuna köçürmək istəyirik. Lakin yenə də keş problemi ortaya çıxır. Məsələn, brauzer şəkilləri keş edir. Bu o deməkdir ki, əgər biz şəklin adını dəyişmədən onu dəyişsək, istifadəçilər veb səhifədə köhnə versiyanı görəcəklər, çünki o onlarda keşlənib.

Problemin həlli, artıq bildiyiniz kimi, fayl adına heş əlavə etməkdir. Webpack resurs fayllarını yığın qovluğuna köçürməyə, onlara heş əlavə etməyə və, ən əsası, bütün fayllarda bu resurslara olan yolları yeniləri ilə dəyişməyə imkan verir.

Webpack-də assets-lərlə iş xüsusi assets-modulları vasitəsilə həyata keçirilir. Onların dörd növü var: asset/resource, asset/inline, asset/source, asset.

asset/resource modulu faylları layihə qovluğundan yığın qovluğuna köçürür və onlara olan yolları yeniləri ilə əvəz edir. asset/inline modulu faylları layihə qovluğundan götürür və yığın kodunda fayl yollarını base64 ilə əvəz edir. asset/source modulu faylları layihə qovluğundan götürür və onları mətn sətri şəklində qaytarır. asset modulu özü seçir, faylı yığın qovluğuna köçürmək ya da onu base-ə çevirmək. Seçim faylın ölçüsündən asılı olaraq həyata keçirilir. Standart olaraq 8kb-dan böyük fayllar fayllar şəklində yığılır.

Bu modulların tətbiqinin ümumi sxemi aşağıdakı kimi görünür:

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