Κοινή χρήση τεχνολογίας

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Front-end engineering: Οδηγός διαμόρφωσης Webpack

Φίλοι front-end, σήμερα θα μιλήσουμε για το Webpack που οι άνθρωποι αγαπούν και μισούν. Ναι, είναι το εργαλείο κατασκευής που έχει διαμορφωθεί για να σας κάνει να θέλετε να σπάσετε το πληκτρολόγιό σας, αλλά δεν μπορείτε να ζήσετε χωρίς αυτό. Μην ανησυχείτε, ακολουθήστε με και σας εγγυώμαι ότι θα μετατραπείτε από αρχάριος στο Webpack σε κύριο ρυθμίσεων!

Τι είναι το Webpack;

Με απλά λόγια, το Webpack είναι ένα στατικό εργαλείο συσκευασίας μονάδων για σύγχρονες εφαρμογές JavaScript. Όταν το Webpack επεξεργάζεται μια εφαρμογή, δημιουργεί εσωτερικά ένα γράφημα εξαρτήσεων που αντιστοιχίζει κάθε λειτουργική μονάδα που απαιτείται από το έργο και δημιουργεί ένα ή περισσότερα πακέτα.

Ακούγεται υψηλό; Στην πραγματικότητα, πρόκειται να οργανώσετε και να συσκευάσετε τα ακατάστατα αρχεία κώδικα σε αρχεία που το πρόγραμμα περιήγησης μπορεί να κατανοήσει και να τρέξει. Είναι σαν μια εξαιρετικά σκληρά εργαζόμενη καθαρίστρια που κρατάει όλα τα ρούχα, τα βιβλία και τα παιχνίδια του σπιτιού σου σε τάξη.

Βασική διαμόρφωση

Αρχικά, ας ρίξουμε μια ματιά στη βασική διαμόρφωση του Webpack.Δημιουργώwebpack.config.js Αρχείο, αυτή είναι η βάση διαμόρφωσής μας:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
1
2
3
4
5
6
7
8
9

εδώ,entry καθορίζει το σημείο εισόδου της εφαρμογής,output Λέει στο Webpack πού να εξάγει τα πακέτα που δημιουργεί και πώς να ονομάσετε αυτά τα αρχεία.

Loader: Αφήστε το Webpack να κατανοήσει διάφορα αρχεία

Το ίδιο το Webpack κατανοεί μόνο αρχεία JavaScript και JSON. Τα προγράμματα φόρτωσης επιτρέπουν στο Webpack να επεξεργάζεται άλλους τύπους αρχείων και να τα μετατρέπει σε έγκυρες λειτουργικές μονάδες για χρήση από εφαρμογές.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

είδες; Λέμε στο Webpack: "Γεια σου, αδερφέ, χρησιμοποιήστε style-loader και css-loader για να επεξεργαστείτε αρχεία .css και χρησιμοποιήστε το file-loader για την επεξεργασία εικόνων."

Πρόσθετα: Η μαγεία του Webpack

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

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '我的超酷网页',
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12

Εδώ χρησιμοποιούμε το CleanWebpackPlugin για καθαρισμό /dist φάκελο και HtmlWebpackPlugin για να δημιουργήσετε ένα αρχείο HTML. Είναι σαν να εγκαθιστάτε δύο δεξιούς βοηθούς για το Webpack, ο ένας υπεύθυνος για τον καθαρισμό και ο άλλος υπεύθυνος για τη διακόσμηση του δωματίου.

Τρόπος: ανάπτυξη ή παραγωγή;

Το Webpack παρέχει mode Επιλογές διαμόρφωσης που λένε στο Webpack να χρησιμοποιεί τις ενσωματωμένες βελτιστοποιήσεις για την αντίστοιχη λειτουργία:

module.exports = {
  mode: 'production', // 或者 'development'
  // ...
};
1
2
3
4

Όταν οριστεί σε «παραγωγή», το Webpack θα ενεργοποιήσει αυτόματα μια δέσμη προσθηκών βελτιστοποίησης, όπως η συμπίεση κώδικα JS. Η λειτουργία «ανάπτυξης» εστιάζει σε γρήγορες κατασκευές και μια εξαιρετική εμπειρία ανάπτυξης. Είναι σαν να βάζετε δύο καπέλα για το Webpack, το ένα είναι καπέλο εργασίας και το άλλο καπέλο διακοπών.

Διακομιστής ανάπτυξης: Η συγκίνηση των καυτών ενημερώσεων

Χρησιμοποιήστε το webpack-dev-server για να παρέχετε έναν απλό διακομιστή ιστού που μπορεί να επαναφορτωθεί σε πραγματικό χρόνο:

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};
1
2
3
4
5
6
7

Μετά από αυτήν τη διαμόρφωση, εάν τροποποιήσετε τον κωδικό, το πρόγραμμα περιήγησης θα ανανεωθεί αυτόματα. Είναι σαν να βάζετε έναν υπερσυμπιεστή στη διαδικασία ανάπτυξής σας!

Διαχωρισμός κωδικών: Μην βάζετε όλα τα αυγά σας σε ένα καλάθι

Ο διαχωρισμός κώδικα είναι ένα από τα πιο συναρπαστικά χαρακτηριστικά στο Webpack. Σας επιτρέπει να χωρίσετε τον κώδικά σας σε διάφορα πακέτα, τα οποία στη συνέχεια μπορούν να φορτωθούν κατά παραγγελία ή παράλληλα.

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};
1
2
3
4
5
6
7
8

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

Τίναγμα δέντρου: Τίναγμα που περισσεύει κλαδιά και φύλλα

Το Tree Shaking είναι ένας όρος που χρησιμοποιείται συνήθως για να περιγράψει την αφαίρεση κώδικα χωρίς αναφορά σε ένα περιβάλλον JavaScript.

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};
1
2
3
4
5
6

Αυτή η διαμόρφωση θα ενεργοποιήσει αυτόματα το Tree Shaking στη λειτουργία παραγωγής. Θα αναλύσει τον κώδικά σας για να ανακαλύψει ποιος κωδικός δεν χρησιμοποιείται και στη συνέχεια θα «κλαδέψει» αυτούς τους άχρηστους κωδικούς όπως ένας κηπουρός που κλαδεύει δέντρα.

Συνοψίζω

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

Φυσικά, ο κόσμος του Webpack είναι πολύ περισσότερο από αυτό. Υπάρχουν πιο προηγμένες λειτουργίες που σας περιμένουν να εξερευνήσετε, όπως η τεμπέλης φόρτωση, η προφόρτωση, η προσωρινή αποθήκευση κ.λπ. Ωστόσο, αφού καταλάβετε αυτά τα βασικά, μπορείτε ήδη να πείτε περήφανα: "Είμαι επίσης κύριος διαμόρφωσης του Webpack!"

Τέλος, μην ξεχνάτε να ελέγχετε συχνά την επίσημη τεκμηρίωση του Webpack. Επειδή στον ταχέως μεταβαλλόμενο κόσμο του front-end, αυτή που ήταν η καλύτερη πρακτική χθες μπορεί να είναι ξεπερασμένη σήμερα. Συνεχίστε να μαθαίνετε και να εξερευνάτε, και θα είστε σε θέση να προχωρήσετε όλο και περισσότερο στο δρόμο προς τη μηχανική πρώτης γραμμής.

Τώρα, σηκώστε το πληκτρολόγιό σας και ξεκινήστε το ταξίδι διαμόρφωσης του πακέτου Web! Θυμηθείτε, κάθε λάθος είναι ένα σκαλοπάτι στο δρόμο σας για να γίνετε κύριος. Άντε, χτυπήστε τους εργάτες!

Μίνι πρόγραμμα συνέντευξης Haima

Περιλαμβάνει την πιο πρόσφατη ανταλλαγή εμπειριών συνέντευξης, ανάλυση πραγματικών ερωτήσεων συνέντευξης, τράπεζα ερωτήσεων 2000+ και λεπτομερείς επεξηγήσεις για τεχνικά εγχειρίδια συνέντευξης στο front-end και στο back-end, είτε παίρνετε συνέντευξη για πρόσληψη σχολείου ή κοινωνική πρόσληψη ή θέλετε για να βελτιώσετε τις προγραμματιστικές σας δεξιότητες, μπορείτε να το αντιμετωπίσετε ήρεμα~

ενός πεζοδρομίου. Άντε, χτυπήστε τους εργάτες!

Μίνι πρόγραμμα συνέντευξης Haima

Περιλαμβάνει την πιο πρόσφατη ανταλλαγή εμπειριών συνέντευξης, ανάλυση πραγματικών ερωτήσεων συνέντευξης, τράπεζα ερωτήσεων 2000+ και λεπτομερείς επεξηγήσεις για τεχνικά εγχειρίδια συνέντευξης στο front-end και στο back-end, είτε παίρνετε συνέντευξη για πρόσληψη σχολείου ή κοινωνική πρόσληψη ή θέλετε για να βελτιώσετε τις προγραμματιστικές σας δεξιότητες, μπορείτε να το αντιμετωπίσετε ήρεμα~

[Οι εικόνες του εξωτερικού συνδέσμου μεταφέρονται...(img-LBHUGtbe-1720689041341)]