Εισαγωγή αρχαρίων στο Webpack

Τι είναι το Webpack;

Το Webpack είναι ένα εργαλείο που σας επιτρέπει να μεταγλωττίσετε τις λειτουργικές μονάδες JavaScript. Είναι επίσης γνωστός ως πακέτο μονάδων.

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

Μπορεί να εκτελέσει πολλές λειτουργίες:

  • σας βοηθά να δεσμεύσετε τους πόρους σας.
  • παρακολουθεί τις αλλαγές και εκτελεί εκ νέου τις εργασίες.
  • μπορεί να εκτελέσει τη μετάφραση Babel στο ES5, επιτρέποντάς σας να χρησιμοποιήσετε τις πιο πρόσφατες λειτουργίες JavaScript χωρίς να ανησυχείτε για την υποστήριξη του προγράμματος περιήγησης.
  • μπορεί να μεταφέρει το CoffeeScript σε JavaScript
  • μπορεί να μετατρέψει τις ενσωματωμένες εικόνες σε URI δεδομένων.
  • σας επιτρέπει να χρησιμοποιήσετε το require () για τα αρχεία CSS.
  • μπορεί να τρέξει ένα διακομιστή ανάπτυξης.
  • μπορεί να χειριστεί την αντικατάσταση θερμής μονάδας.
  • μπορεί να χωρίσει τα αρχεία εξόδου σε πολλαπλά αρχεία για να αποφύγει να φορτώσει ένα τεράστιο αρχείο JS για να φορτώσει το πλήκτρο πρώτης σελίδας.
  • μπορεί να κάνει κούνημα δέντρων.

Το Webpack δεν περιορίζεται στην χρήση του στο front-end, αλλά είναι χρήσιμο και στην ανάπτυξη του Backup Node.js.

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

Το Webpack είναι ένα πιο εστιασμένο εργαλείο. Απλώς πρέπει να καθορίσετε ένα σημείο εισόδου στην εφαρμογή σας (μπορεί να είναι και ένα αρχείο HTML με ετικέτες δέσμης ενεργειών) και το webpack αναλύει τα αρχεία και τα συνδέει σε ένα αρχείο εξόδου JavaScript που περιλαμβάνει όλα όσα χρειάζεστε για να εκτελέσετε την εφαρμογή.

Εγκατάσταση του Webpack

Το Webpack μπορεί να εγκατασταθεί παγκοσμίως ή τοπικά για κάθε έργο.

Παγκόσμια εγκατάσταση

Δείτε πώς να το εγκαταστήσετε παγκοσμίως με το νήμα:

παγκόσμιο νήμα προσθέστε webpack webpack-cli

με npm:

npm i -g webpack webpack-cli

Μόλις γίνει αυτό, θα πρέπει να είστε σε θέση να τρέξετε

webpack-cli

Τοπική εγκατάσταση

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

Με Νήματα:

νήματα add webpack web-pack-cli -D

με npm:

npm i webpack webpack-cli -save-dev

Μόλις γίνει αυτό, προσθέστε αυτό στο αρχείο package.json:

{
  // ...
  "δέσμες ενεργειών": {
    "build": "webpack"
  }}
}}

Μόλις γίνει αυτό, μπορείτε να εκτελέσετε Webpack πληκτρολογώντας

κατασκευή νήματος

στη ρίζα του έργου.

Διαμόρφωση παραμέτρων Webpack

Από προεπιλογή, το Webpack (ξεκινώντας από την έκδοση 4) δεν απαιτεί config αν τηρείτε αυτές τις συμβάσεις:

  • το σημείο εισόδου της εφαρμογής σας είναι ./src/index.js
  • η έξοδος τίθεται σε ./dist/main.js.
  • Το Webpack λειτουργεί σε λειτουργία παραγωγής

Μπορείτε να προσαρμόσετε κάθε λίγο Webpack φυσικά, όταν χρειάζεστε. Η διαμόρφωση του Webpack αποθηκεύεται στο αρχείο webpack.config.js, στον ριζικό φάκελο του έργου.

Το σημείο εισόδου

Από προεπιλογή, το σημείο εισόδου είναι ./src/index.js Αυτό το απλό παράδειγμα χρησιμοποιεί το αρχείο ./index.js ως σημείο εκκίνησης:

module.exports = {
  /****/
  είσοδος: './index.js'
  /****/
}}

Η έξοδος

Από προεπιλογή, η έξοδος παράγεται σε ./dist/main.js. Αυτό το παράδειγμα βάζει τη δέσμη εξόδου σε app.js:

module.exports = {
  /****/
  έξοδος: {
    διαδρομή: path.resolve (__ dirname, 'dist'),
    όνομα αρχείου: 'app.js'
  }}
  /****/
}}

Η χρήση του Webpack σάς επιτρέπει να χρησιμοποιείτε εισαγωγικά ή να ζητάτε δηλώσεις στον κώδικα JavaScript όχι μόνο για να συμπεριλάβετε άλλο JavaScript, αλλά οποιοδήποτε είδος αρχείου (για παράδειγμα CSS).

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

Για παράδειγμα, στον κωδικό σας μπορείτε να χρησιμοποιήσετε:

εισαγωγή 'style.css'

χρησιμοποιώντας τη διαμόρφωση του φορτωτή:

module.exports = {
  /****/
  ενότητα: {
    κανόνες: [
      {test: /\.css$/, χρησιμοποιήστε: 'css-loader'},
    }]
  }}
  /****/
}}

Η κανονική έκφραση στοχεύει σε οποιοδήποτε αρχείο CSS.

Ένας φορτωτής μπορεί να έχει επιλογές:

module.exports = {
  /****/
  ενότητα: {
    κανόνες: [
      {
        δοκιμή: /\.css$/,
        χρήση: [
          {
            φορτωτής: 'css-loader',
            επιλογές: {
              modules: true
            }}
          }}
        ]
      }}
    ]
  }}
  /****/
}}

Μπορείτε να απαιτήσετε πολλαπλούς φορτωτές για κάθε κανόνα:

module.exports = {
  /****/
  ενότητα: {
    κανόνες: [
      {
        δοκιμή: /\.css$/,
        χρήση:
          [
            'φορτωτής στυλ',
            'css-loader',
          ]
      }}
    ]
  }}
  /****/
}}

Σε αυτό το παράδειγμα, ο css-loader ερμηνεύει την οδηγία εισαγωγής 'style.css' στο CSS. ο φορτωτής στυλ είναι τότε υπεύθυνος για την έγχυση αυτού του CSS στο DOM, χρησιμοποιώντας μια ετικέτα