Assets στο Webpack

Σε κάθε project υπάρχουν ορισμένοι πόροι ή assets (assets). Αυτά τα assets μπορεί να είναι εικόνες, αρχεία γραμματοσειρών και παρόμοια πράγματα.

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

Η λύση στο πρόβλημα, όπως ήδη γνωρίζετε, είναι η προσθήκη hash στο όνομα του αρχείου. Το Webpack επιτρέπει την αντιγραφή αρχείων πόρων στον φάκελο του build, προσθέτοντας hash και, το πιο σημαντικό, αλλάζοντας σε όλα τα αρχεία τις διαδρομές προς αυτούς τους πόρους σε νέες.

Στο Webpack η εργασία με assets πραγματοποιείται χρησιμοποιώντας ειδικά assets modules. Υπάρχουν τέσσερις τύποι: asset/resource, asset/inline, asset/source, asset.

Το module asset/resource αντιγράφει αρχεία από το φάκελο του project στο φάκελο του build και αντικαθιστά τις διαδρομές προς αυτά με νέες. Το module asset/inline παίρνει αρχεία από το φάκελο του project και στον κώδικα του build αντικαθιστά τις διαδρομές προς τα αρχεία με base64. Το module asset/source παίρνει αρχεία από το φάκελο του project και τα επιστρέφει σε μορφή κειμένου. Το module asset επιλέγει μόνο του, αν θα αντιγράψει το αρχείο στο φάκελο του build ή αν θα το μετατρέψει σε base. Η επιλογή γίνεται ανάλογα με το μέγεθος του αρχείου. Από προεπιλογή, αρχεία μεγαλύτερα από 8kb γίνονται αρχεία.

Το γενικό σχήμα εφαρμογής αυτών των modules είναι το εξής: