Ассети в Webpack

Във всеки проект има някои ресурси или ассети (assets). Тези ассети представляват картини, файлове с шрифтове и други подобни неща.

По правило ние просто искаме да преместим ресурсите от папката на проекта в папката на сборката. Но отново възниква проблем с кеша. Например, браузърът кешира картини. Това означава, че ако променим изображението, без да променим името на файла му, потребителите на сайта ще видят предишната версия на картината, тъй като тя е била кеширана при тях.

Решението на проблема, както вече знаете, е добавянето на хеш в името на файла. Webpack позволява копирането на файлове с ресурси в папката на сборката, добавяйки им хешове и, което е най-важно, променяйки всички пътища към тези ресурси във всички файлове на нови.

В Webpack работата с ассети се извършва чрез специални модули за ассети. Те са четири типа: 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' // тип модул
    }
  ]
},