Асеты ў Webpack

У кожным праекце ёсць некаторыя рэсурсы ці асеты (assets). Гэтыя асеты ўяўляюць сабой карцінкі, файлы шрыфтоў і да таго падобныя рэчы.

Як правіла, мы хочам проста перанесці рэсурсы з тэчкі праекта ў тэчку зборкі. Але зноў узнікае праблема з кэшам. Напрыклад, браўзэр кэшуе карцінкі. Гэта значыць, што калі мы зменім выяву на карцінцы, не змяніўшы імя яе файла, то карыстальнікі сайта ўбачаць папярэднюю версію карцінкі, так як яна ў іх закэшавалася.

Рашэннем праблемы, як вы ўжо ведаеце, служыць даданне хэшу ў імя файла. Webpack дазваляе капіяваць файлы рэсурсаў у тэчку зборкі, дадаючы ім пры гэтым хэшы і, самае галоўнае, змяняючы ва ўсіх файлах шляхі да гэтых рэсурсаў на новыя.

У Webpack праца з асетамі ажыццяўляецца з дапамогай спецыяльных assets-модуляў. Іх чатыры тыпу: asset/resource, asset/inline, asset/source, asset.

Модуль asset/resource капіюе файлы з тэчкі праекта ў тэчку зборкі і замяняе шляхі да іх на новыя. Модуль asset/inline бярэ файлы з тэчкі праекта і ў кодзе зборкі замяняе шляхі да файлаў на base64. Модуль asset/source бярэ файлы з тэчкі праекта і вяртае іх у выглядзе тэкставай радкі. Модуль asset сам выбірае, капіяваць файл у тэчку зборкі ці ператвараць яго ў base. Выбар ажыццяўляецца ў залежнасці ад памеру файла. Па змаўчанні файлы больш за 8kb збіраюцца ў файлы.

Агульная схема прымянення гэтых модуляў выглядае наступным чынам:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // файлы
      type: 'asset/resource' // тып модуля
    }
  ]
},