Assets во 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' // тип на модул
    }
  ]
},