JavaScript-ում Webpack-ի աշխատանքի սկզբունքը
Որպես կանոն, մշակման ընթացքում մենք
ստանում ենք բազմաթիվ JavaScript ֆայլեր,
որոնք պարունակում են կոդի տարբեր հատվածներ:
Դրանք կարող են լինել մեր կոդի մասեր
կամ երրորդ կողմի գրադարաններ:
Ստացվում է, որ յուրաքանչյուր այդպիսի ֆայլ
մենք պետք է միացնենք HTML ֆայլին
script թեգի միջոցով:
Սա այնքան էլ լավ չէ, քանի որ շատ միացված ֆայլերը դանդաղեցնում են կայքի բեռնման արագությունը: Ուստի բեռնման արագությունը մեծացնելու համար անհրաժեշտ է ամբողջ կոդը հավաքել մեկ ֆայլում:
Սակայն, կոդը մեկ ընդհանուր ֆայլում մշակելը նույնպես այնքան հարմար չէ: Ուստի ներկայումս գործածվում է հետևյալ մոտեցումը. կոդը մշակվում է առանձին ֆայլերում, ապա, կառուցիչի միջոցով հավաքվում է մեկ ընդհանուր ֆայլի մեջ, որը և միացվում է HTML ֆայլին:
Առանձին ֆայլերը ES մոդուլներ են:
Այս մոդուլները միացվում են այլ ֆայլերին
import հրամանի միջոցով:
Սովորաբար ստեղծվում է ինչ-որ հիմնական ֆայլ, որին միացվում են մնացած ֆայլերը: Այս ֆայլը կոչվում է մուտքի կետ:
Կառուցիչը մտնում է մուտքի կետ, նայում է, թե որ մոդուլներն են միացված դրան: Այդ մոդուլներին նույնպես կարող են միացված լինել այլ մոդուլներ: Կառուցիչը հետևում է բոլոր կապերին և հավաքում է ամբողջ կոդը մեկ ֆայլում: Այս ֆայլը կոչվում է բանդլ:
Որպես կանոն, ծրագրավորողի գրած
կոդը տեղակայված է
src պանակում, իսկ հավաքված կոդը տեղադրվում է
dist պանակում:
Կառուցիչը նաև թույլ է տալիս կարգավորել
հավաքման ռեժիմը: 'development' ռեժիմը
նախատեսված է մշակման գործընթացի համար:
Այն հավաքում է կոդը մշակման համար հարմար
տեսքով: 'production' ռեժիմը նախատեսված է
վերջնական կոդի համար, որը կտեղադրվի
աշխատանքի մեջ: Այս ռեժիմում
կոդը կմինիֆիկացվի, որպեսզի
նվազեցվի դրա չափը և մեծացվի
բեռնման արագությունը:
Պատմեք, թե ինչ է բանդլը:
Պատմեք, թե ինչ է մուտքի կետը:
Պատմեք, թե ինչ հավաքման ռեժիմներ կան:
