Loaders στο Webpack
Για την επέκταση των δυνατοτήτων του Webpack χρησιμοποιούνται επίσης loaders. Επιτρέπουν τη λήψη αρχείων ενός συγκεκριμένου τύπου και την εκτέλεση συγκεκριμένων λειτουργιών πάνω τους.
Για παράδειγμα, μπορείτε να πάρετε όλα τα αρχεία με επέκταση
.less, να μετατρέψετε το κείμενό τους σε CSS,
στη συνέχεια να ελαχιστοποιήσετε το CSS που προκύπτει
και να το αποθηκεύσετε σε ένα κοινό αρχείο.
Ας δούμε το γενικό σχήμα εργασίας με ένα loader χρησιμοποιώντας το παράδειγμα δύο φανταστικών loaders.
Ας εγκαταστήσουμε τον πρώτο loader:
npm install test-loader1 --save-dev
Ας εγκαταστήσουμε τον δεύτερο loader:
npm install test-loader2 --save-dev
Μετά την εγκατάσταση των loaders μπορούμε να τους χρησιμοποιήσουμε στο αρχείο ρυθμίσεων (δεν χρειάζεται να τους εισαγάγετε). Δείτε τη σύνταξη:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i, // τύπος αρχείου
use: ['test-loader1', 'test-loader2'], // loaders
},
],
},
};
Τα στοιχεία του πίνακα μπορούν να γραφτούν όχι σε γραμμή, αλλά σε στήλη:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i,
use: [
'test-loader1',
'test-loader2'
],
},
],
},
};
Για διαφορετικούς τύπους αρχείων μπορούν να γραφτούν διαφορετικοί κανόνες:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.sass$/i,
use: [
'test-loader1',
'test-loader2'
],
},
{
test: /\.less$/i,
use: [
'test-loader3',
'test-loader4'
],
},
],
},
};
Οι loaders εκτελούνται με σειρά. Σε αυτήν την περίπτωση, η σειρά ξεκινά από το τέλος του πίνακα. Δηλαδή, πρώτα εκτελείται ο loader που καθορίζεται από το τελευταίο στοιχείο του πίνακα, μετά το προτελευταίο και ούτω καθεξής.
