Webpack-da Assetlar

Har bir loyihada ma'lum resurslar yoki assetlar (assets) bo'ladi. Ushbu assetlar rasm, shrift fayllari va shunga o'xshash narsalardir.

Odatda, biz resurslarni loyiha jildidan yig'ish jildiga oddiygina ko'chirishni xohlaymiz. Ammo yana keshlash muammosi paydo bo'ladi. Misol uchun, brauzer rasmlarni keshlaydi. Bu shuni anglatadiki, agar biz rasm faylining nomini o'zgartirmasdan, undagi tasvirni o'zgartirsak, sayt foydalanuvchilari oldingi versiyadagi rasmni ko'rishadi, chunki u ularning brauzerida keshlangan bo'ladi.

Muammoning yechimi, siz allaqachon bilasizki, fayl nomiga xesh qo'shishdir. Webpack resurs fayllarini nusxalashga (ko'chirishga) imkon beradi, ularga xesh qo'shadi va, eng muhimi, barcha fayllardagi ushbu resurslarga bo'lgan yo'llarni yangilariga o'zgartiradi.

Webpack-da assetlar bilan ishlash maxsus asset-modullari yordamida amalga oshiriladi. Ularning to'rt turi mavjud: asset/resource, asset/inline, asset/source, asset.

asset/resource moduli loyiha jildidagi fayllarni yig'ish jildiga nusxalaydi (ko'chiradi) va ularga bo'lgan yo'llarni yangilari bilan almashtiradi. asset/inline moduli loyiha jildidagi fayllarni oladi va yig'ish kodida fayllarga bo'lgan yo'llarni base64 ga almashtiradi. asset/source moduli loyiha jildidagi fayllarni oladi va ularni matnli qator ko'rinishida qaytaradi. asset moduli faylni yig'ish jildiga nusxalash yoki uni base64 ga aylantirishni o'zi tanlaydi. Tanlov fayl hajmiga qarab amalga oshiriladi. Standart sozilma bo'yicha 8kb dan katta bo'lgan fayllar fayllar sifatida yig'iladi.

Ushbu modullarni qo'llashning umumiy sxemasi quyidagicha ko'rinadi:

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