Parimi i Funksionimit të Mbledhësit Webpack në JavaScript

Si rregull, gjatë zhvillimit kemi shumë skedarë JavaScript, që përmbajnë copa të ndryshme kodi. Këto mund të jenë pjesë të kodit tonë, ose librari të palëve të treta. Kjo do të thotë se çdo skedar i tillë duhet ta lidhim me skedarin HTML përmes tagut script.

Kjo nuk është shumë e mirë, pasi shumë skedarë të lidhur ngadalësojnë shpejtësinë e ngarkimit të faqes. Prandaj, për të përshpejtuar ngarkimin, është e nevojshme i gjithë kodi të vendoset në një skedar të vetëm.

Sidoqoftë, zhvillimi i kodit në një skedar të përbashkët të vetëm gjithashtu nuk është shumë i përshtatshëm. Prandaj aktualisht praktikohet qasja e mëposhtme: kodi zhvillohet në skedarë të veçantë, e më pas me ndihmën e një mbledhësi mbledhet në një skedar të përbashkët, i cili lidhet me skedarin HTML.

Skedarët e veçantë përfaqësojnë module ES. Këto module lidhen me skedarë të tjerë përmes komandës import.

Zakonisht krijohet një skedar kryesor, me të cilin lidhen skedarët e tjerë. Ky skedar quhet pika e hyrjes.

Mbledhësi hyn në pikën e hyrjes, shikon se cilës module janë lidhur me të. Këtyre moduleve gjithashtu mund të lidhen module të tjera. Mbledhësi ndjek të gjitha lidhjet dhe mbledh të gjithë kodin në një skedar. Ky skedar quhet bundle.

Si rregull, kodi që shkruan programuesi, ndodhet në dosjen src, ndërsa kodi i mbledhur vendoset në dosjen dist.

Mbledhësi gjithashtu lejon rregullimin e mënyrës së mbledhjes. Mënyra 'development' është menduar për procesin e zhvillimit. Ai mbledh kodin në mënyrë të përshtatshme për zhvillim. Mënyra 'production' është menduar për kodin përfundimtar, i cili do të ngarkohet në punë. Në këtë mënyrë kodi do të miniaturizohet, për të zvogëluar madhësinë e tij dhe për të rritur shpejtësinë e ngarkimit.