Αρχή λειτουργίας του συλλέκτη Webpack

Συνήθως, κατά την ανάπτυξη, έχουμε πολλά αρχεία JavaScript που περιέχουν διάφορα τμήματα κώδικα. Αυτά μπορεί να είναι μέρη του δικού μας κώδικα ή βιβλιοθήκες τρίτων. Αυτό σημαίνει ότι κάθε τέτοιο αρχείο πρέπει να το συνδέσουμε στο αρχείο HTML μέσω της ετικέτας script.

Αυτό δεν είναι πολύ καλό, καθώς πολλά συνδεδεμένα αρχεία επιβραδύνουν την ταχύτητα φόρτωσης του site. Επομένως, για να επιταχυνθεί η φόρτωση, είναι απαραίτητος ο συνδυασμός ολόκληρου του κώδικα σε ένα αρχείο.

Ωστόσο, η ανάπτυξη κώδικα σε ένα κοινό αρχείο επίσης δεν είναι πολύ βολική. Για αυτό σήμερα εφαρμόζεται η ακόλουθη προσέγγιση: ο κώδικας αναπτύσσεται σε ξεχωριστά αρχεία και στη συνέχεια, με τη βοήθεια ενός συλλέκτη, συλλέγεται σε ένα κοινό αρχείο, το οποίο και συνδέεται στο αρχείο HTML.

Τα μεμονωμένα αρχεία αντιπροσωπεύουν ES modules. Αυτά τα modules συνδέονται με άλλα αρχεία μέσω της εντολής import.

Συνήθως δημιουργείται ένα βασικό αρχείο, στο οποίο συνδέονται τα υπόλοιπα αρχεία. Αυτό το αρχείο ονομάζεται entry point.

Ο συλλέκτης μπαίνει στο entry point, βλέπει ποια modules είναι συνδεδεμένα σε αυτό. Σε αυτά τα modules μπορεί επίσης να είναι συνδεδεμένα άλλα modules. Ο συλλέκτης ακολουθεί όλες τις συνδέσεις και συλλέγει όλο τον κώδικα σε ένα αρχείο. Αυτό το αρχείο ονομάζεται bundle.

Συνήθως, ο κώδικας που γράφει ο προγραμματιστής, βρίσκεται σε φάκελο src, ενώ ο συλλεγμένος κώδικας τοποθετείται σε φάκελο dist.