Η αρχή λειτουργίας του Webpack στο JavaScript

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

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

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

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

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

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

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

Ο συλλέκτης επιτρέπει επίσης τη ρύθμιση της λειτουργίας δόμησης (build mode). Η λειτουργία 'development' προορίζεται για τη διαδικασία ανάπτυξης. Συλλέγει τον κώδικα με έναν τρόπο βολικό για ανάπτυξη. Η λειτουργία 'production' προορίζεται για τον τελικό κώδικα, ο οποίος θα τεθεί σε λειτουργία. Σε αυτή τη λειτουργία ο κώδικας θα είναι minified, ώστε να μειωθεί το μέγεθός του και να αυξηθεί η ταχύτητα φόρτωσης.