Assets Webpack

Katrā projektā ir daži resursi vai assets (assets). Šie assets ir attēli, fontu faili un tamlīdzīgas lietas.

Parasti mēs vēlamies vienkārši pārnest resursus no projekta mapes uz build mapi. Bet atkal rodas kešatmiņas problēma. Piemēram, pārlūkprogramma kešo attēlus. Tas nozīmē, ka, ja mēs mainām attēlu, nemainot tā faila nosaukumu, tad vietnes lietotāji redzēs iepriekšējo attēla versiju, jo tas viņiem ir iekēšots.

Problēmas risinājums, kā jūs jau zināt, ir hash pievienošana faila nosaukumam. Webpack ļauj kopēt resursu failus build mapē, pievienojot tiem hash, un, pats galvenais, mainot visos failos ceļus uz šiem resursiem uz jaunajiem.

Webpack darbs ar assets tiek veikts izmantojot speciālus asset moduļus. Ir četri veidi: asset/resource, asset/inline, asset/source, asset.

Modulis asset/resource kopē failus no projekta mapes uz build mapi un aizstāj ceļus uz tiem ar jaunajiem. Modulis asset/inline paņem failus no projekta mapes un build kodā aizstāj failu ceļus ar base64. Modulis asset/source paņem failus no projekta mapes un atgriež tos teksta virknes veidā. Modulis asset pats izvēlas, vai kopēt failu build mapē vai pārvērst to par base. Izvēle tiek veikta atkarībā no faila izmēra. Pēc noklusējuma faili lielāki par 8kb tiek savākti kā faili.

Vispārīgā šo moduļu pielietošanas shēma izskatās šādi:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // faili
      type: 'asset/resource' // moduļa tips
    }
  ]
},