Webpack-ի ասսետները

Յուրաքանչյուր նախագծում կան որոշակի ռեսուրսներ կամ ասսետներ (assets): Այս ասսետները ներառում են նկարներ, տառատեսակների ֆայլեր և նմանատիպ այլ բաներ:

Որպես կանոն, մենք ուզում ենք պարզապես տեղափոխել ռեսուրսները նախագծի պանակից դեպի հավաքման պանակ: Բայց կրկին առաջանում է քեշավորման խնդիր: Օրինակ, բրաուզերը քեշավորում է նկարները: Սա նշանակում է, որ եթե մենք փոխենք նկարի պարունակությունը՝ չփոխելով դրա ֆայլի անունը, ապա կայքի օգտատերերը կտեսնեն նկարի նախորդ տարբերակը, քանի որ այն նրանց մոտ քեշավորվել է:

Խնդրի լուծումը, ինչպես արդեն գիտեք, ֆայլի անվան մեջ հեշ ավելացնելն է: Webpack-ը թույլ է տալիս պատճենել ռեսուրսների ֆայլերը հավաքման պանակ, ավելացնելով դրանց համար հեշ և, ամենակարևորը, փոխելով բոլոր ֆայլերում այդ ռեսուրսների հասցեները նորերի:

Webpack-ում ասսետների հետ աշխատանքը իրականացվում է հատուկ assets-մոդուլների միջոցով: Դրանք չորս տեսակի են՝ asset/resource, asset/inline, asset/source, asset:

asset/resource մոդուլը պատճենում է ֆայլերը նախագծի պանակից դեպի հավաքման պանակ և փոխարինում դրանց հասցեները նորերով: asset/inline մոդուլը վերցնում է ֆայլերը նախագծի պանակից և հավաքման կոդում փոխարինում ֆայլերի հասցեները base64-ով: asset/source մոդուլը վերցնում է ֆայլերը նախագծի պանակից և վերադարձնում դրանք տեքստային տողի տեսքով: asset մոդուլը ինքն է ընտրում՝ պատճենել ֆայլը հավաքման պանակ, թե վերածել այն base64-ի: Ընտրությունը կատարվում է կախված ֆայլի չափից: Լռելյայնորեն ֆայլերը, որոնք գերազանցում են 8kb-ը, հավաքվում են որպես առանձին ֆայլեր:

Այս մոդուլների կիրառման ընդհանուր սխեման ներկայացված է հետևյալ կերպ.

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // ֆայլեր
      type: 'asset/resource' // մոդուլի տեսակ
    }
  ]
},