Webpack-ի ասսետները
Յուրաքանչյուր նախագծում կան որոշակի ռեսուրսներ կամ ասսետներ (assets): Այս ասսետները ներառում են նկարներ, տառատեսակների ֆայլեր և նմանատիպ այլ բաներ:
Որպես կանոն, մենք ուզում ենք պարզապես տեղափոխել ռեսուրսները նախագծի պանակից դեպի հավաքման պանակ: Բայց կրկին առաջանում է քեշավորման խնդիր: Օրինակ, բրաուզերը քեշավորում է նկարները: Սա նշանակում է, որ եթե մենք փոխենք նկարի պարունակությունը՝ չփոխելով դրա ֆայլի անունը, ապա կայքի օգտատերերը կտեսնեն նկարի նախորդ տարբերակը, քանի որ այն նրանց մոտ քեշավորվել է:
Խնդրի լուծումը, ինչպես արդեն գիտեք, ֆայլի անվան մեջ հեշ ավելացնելն է: Webpack-ը թույլ է տալիս պատճենել ռեսուրսների ֆայլերը հավաքման պանակ, ավելացնելով դրանց համար հեշ և, ամենակարևորը, փոխելով բոլոր ֆայլերում այդ ռեսուրսների հասցեները նորերի:
Webpack-ում ասսետների հետ աշխատանքը իրականացվում է
հատուկ assets-մոդուլների միջոցով:
Դրանք չորս տեսակի են՝ asset/resource,
asset/inline, asset/source,
asset:
asset/resource մոդուլը պատճենում է ֆայլերը
նախագծի պանակից դեպի հավաքման պանակ և փոխարինում
դրանց հասցեները նորերով:
asset/inline մոդուլը վերցնում է ֆայլերը
նախագծի պանակից և հավաքման կոդում
փոխարինում ֆայլերի հասցեները base64-ով:
asset/source մոդուլը վերցնում է ֆայլերը
նախագծի պանակից և վերադարձնում դրանք
տեքստային տողի տեսքով:
asset մոդուլը ինքն է ընտրում՝ պատճենել
ֆայլը հավաքման պանակ, թե վերածել այն
base64-ի: Ընտրությունը կատարվում է կախված
ֆայլի չափից: Լռելյայնորեն ֆայլերը,
որոնք գերազանցում են 8kb-ը, հավաքվում են որպես առանձին ֆայլեր:
Այս մոդուլների կիրառման ընդհանուր սխեման ներկայացված է հետևյալ կերպ.
module: {
rules: [
{
test: /\.png$/, // ֆայլեր
type: 'asset/resource' // մոդուլի տեսակ
}
]
},
Պատմեք, թե ինչ է հասկացվում ասսետներ տերմինի տակ:
Որոնեք ինտերնետում, թե ինչ է base64-ը և ինչպես է այն օգտագործվում CSS-ում:
Թվարկեք ասսետների համար նախատեսված 4 տեսակի մոդուլները:
Պատմեք, թե ինչ նպատակով են ստեղծված
4 տեսակի մոդուլներից յուրաքանչյուրը:
