Ξεκινώντας με το Webpack [Με το Project Project]

Webpack είναι ένα module bundler που διευκολύνει την κατασκευή σύνθετων εφαρμογών JavaScript. Έχει κερδίσει σοβαρή έλξη από τη στιγμή που η κοινότητα της React την επέλεξε ως το κύριο εργαλείο κατασκευής της. Το Webpack είναι ούτε ένας διαχειριστής πακέτων ούτε ένας δρομέας εργασιών καθώς χρησιμοποιεί μια διαφορετική (πιο προηγμένη) προσέγγιση, αλλά στόχος της είναι επίσης δημιουργήστε μια δυναμική διαδικασία δημιουργίας.

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

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

Webpack εναντίον δρομείς εργασίας εναντίον Browserify

Λοιπόν, πώς συσσωρεύεται το Webpack σε σύγκριση με άλλα εργαλεία κατασκευής όπως Grunt, Gulp ή Browserify?

Η Grunt και η Gulp είναι καθηγητές. Στο αρχείο ρυθμίσεών τους, εσείς καθορίστε τις εργασίες, και ο δρομέας εργασιών τους εκτελεί. ο ροή εργασίας ενός δρομέα εργασιών βασικά μοιάζει με αυτό:

Ωστόσο, το Webpack είναι α module bundler που αναλύει ολόκληρο το έργο, δημιουργεί ένα δέντρο εξάρτησης, και δημιουργεί ένα πακέτο αρχείου JavaScript ότι εξυπηρετεί το πρόγραμμα περιήγησης.

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

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

Ο Andrew Ray Webpack: Πότε να χρησιμοποιήσετε και γιατί στο δικό του ιστολόγιο
Cory House's Περιηγηθείτε στο Webpack στο freeCodeCamp (με εκπληκτικές εικόνες)

Οι δύο παραπάνω εικόνες είναι από το Τα υλικά Webpack του εγχειριδίου Pro React, έναν άλλο πόρο που αξίζει να δούμε.

Τέσσερις βασικές έννοιες του Webpack

Το Webpack έχει τέσσερις κύριες επιλογές διαμόρφωσης που ονομάζονται “βασικές έννοιες” ότι θα πρέπει να καθορίσετε στη διαδικασία ανάπτυξης:

Είσοδος - ο αφετηρία του γραφήματος εξάρτησης (ένα ή περισσότερα αρχεία JavaScript).
Παραγωγή - το αρχείο που θέλετε παραγωγή που πρέπει να συνδυαστεί με (ένα αρχείο JavaScript).
Φορτωτές - μεταβολές των περιουσιακών στοιχείων που μετατρέψτε τα σε ενότητες Webpack έτσι ώστε να μπορούν να είναι προστίθεται στο γράφημα εξάρτησης. Για παράδειγμα, css-φορτωτής χρησιμοποιείται για την εισαγωγή αρχείων CSS.
Plugins - προσαρμοσμένες ενέργειες και λειτουργίες που εκτελείται στη δέσμη. Για παράδειγμα, το i18n-webpack-plugin ενσωματώνει τον εντοπισμό στην δέσμη.

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

Εγκαταστήστε το Webpack

Προς το εγκαταστήστε το Webpack, ανοίξτε τη γραμμή εντολών, μεταβείτε στο φάκελο του έργου και εκτελέστε την ακόλουθη εντολή:

 npm init

Εάν δεν θέλετε να κάνετε τη διαμόρφωση μόνοι σας, μπορείτε να κάνετε npm γεμίστε το package.json αρχείο με τις προεπιλεγμένες τιμές με την ακόλουθη εντολή:

 npm init -y

Στη συνέχεια, εγκαταστήστε το Webpack:

 npm εγκαταστήστε webpack --save-dev

Εάν έχετε χρησιμοποιήσει τις προεπιλεγμένες τιμές, αυτό είναι το πώς σας package.json το αρχείο θα πρέπει να μοιάζει τώρα (οι ιδιότητες μπορεί να είναι σε διαφορετική σειρά):

 "όνομα": "_tests", "έκδοση": "1.0.0", "περιγραφή": "", "main": "webpack.config.js", "dependencies": "webpack" .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " test ":" echo \ ": []," συγγραφέας ":" "," άδεια ":" ISC "

Δημιουργήστε το αρχείο ρυθμίσεων

Πρέπει να δημιουργήσετε ένα webpack.config.js αρχείο στο ριζικό φάκελο του έργου. Αυτό το αρχείο διαμόρφωσης έχει έναν κεντρικό ρόλο, καθώς αυτό είναι όπου θα το κάνετε καθορίζουν τις τέσσερις βασικές έννοιες (σημεία εισόδου, εξόδου, φορτωτές, plugins).

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

1. Δημιουργία του (των) σημείου (ων) εισόδου

Μπορείς να έχεις ένα ή περισσότερα σημεία εισόδου. Πρέπει να τα ορίσετε στο είσοδος ιδιοκτησία.

Εισάγετε το ακόλουθο απόσπασμα κώδικα στο webpack.config.js αρχείο. Το καθορίζει ένα σημείο εισόδου:

 module.exports = καταχώρηση: "./src/script.js".

Για να καθορίσετε περισσότερα από ένα σημεία εισόδου που μπορείτε να χρησιμοποιήσετε είτε τη συστοιχία είτε τη σύνταξη αντικειμένου.

Στον φάκελο του έργου, δημιούργησε ένα νέο src ντοσιέ και ένα script.js αρχείο μέσα σε αυτό. Αυτό θα είναι το δικό σου σημείο εισόδου. Για λόγους ελέγχου, απλά τοποθετήστε μια συμβολοσειρά μέσα σε αυτό. Χρησιμοποίησα την ακόλουθη (ωστόσο, μπορείτε επίσης να χρησιμοποιήσετε ένα πιο ενδιαφέρον):

 const χαιρετισμός = "Γεια σου, είμαι ένα πρόγραμμα εκκίνησης Webpack." document.write (χαιρετισμός);

2. Καθορίστε την έξοδο

Μπορείς να έχεις μόνο ένα αρχείο εξόδου. Το Webpack συνδέει όλα τα στοιχεία σε αυτό το αρχείο. Πρέπει να διαμορφώσετε το παραγωγή ακινήτων με τον ακόλουθο τρόπο:

 const path = require ("path"). module.exports = entry: "./src/script.js", έξοδος: όνομα_αρχείου: "bundle.js", path: path.resolve (__ dirname, 'dist');

ο όνομα αρχείου ιδιότητα ορίζει το όνομα του δεσμευμένου αρχείου, ενώ το μονοπάτι ιδιοκτησία καθορίζει το όνομα του καταλόγου. Το παραπάνω παράδειγμα θα δημιουργήσει το /dist/bundle.js αρχείο.

Παρόλο που δεν είναι υποχρεωτικό, είναι καλύτερο να Χρησιμοποιήστε το path.resolve () μέθοδος όταν καθορίζετε το μονοπάτι ιδιοκτησία, όπως αυτό εξασφαλίζει την ακριβή ανάλυση της μονάδας (η απόλυτη πορεία της παραγωγής δημιουργείται σύμφωνα με διαφορετικούς κανόνες σε διαφορετικά περιβάλλοντα, η ανάλυση ενότητας λύει αυτήν την ασυμφωνία). Εάν χρησιμοποιείτε path.resolve, πρέπει να απαιτώ ο μονοπάτι Μονάδα κόμβου στην κορυφή του webpack.config.js αρχείο.

3. Προσθέστε τους φορτωτές

Προς το προσθέστε τους φορτωτές, πρέπει να ορίσετε το μονάδα μέτρησης ιδιοκτησία. Παρακάτω, προσθέτουμε το babel-loader που σας επιτρέπει να χρησιμοποιήστε με ασφάλεια τις λειτουργίες ECMAScript 6 στα αρχεία JS:

 const path = require ("path"). (εξόδου): test: test module_exports = entry: "./src/script.js", εξόδου: filename: bundle.js : /\.js$/, εξαιρέστε: / (node_modules | bower_components) /, χρησιμοποιήστε: loader: "babel-loader", επιλογές: presets: ["env"]];

Το config μπορεί να φαίνεται δύσκολο, αλλά είναι απλά copy-pasted Τεκμηρίωση φορτωτή Babel. Οι περισσότεροι φορτωτές έρχονται είτε με ένα αρχείο readme είτε με κάποιο είδος τεκμηρίωσης, έτσι ώστε να μπορείτε (σχεδόν) να γνωρίζετε πάντα πώς να τα ρυθμίσετε σωστά. Και, τα έγγραφα του Webpack έχουν επίσης μια σελίδα που εξηγεί πώς να διαμορφώσετε modules.rules.

Μπορείς να προσθέσεις όπως πολλοί φορτωτές που χρειάζεστε, εδώ είναι ο πλήρης κατάλογος. Σημειώστε ότι πρέπει επίσης να το κάνετε εγκαταστήστε κάθε φορτωτή με npm για να λειτουργήσουν. Για τον φορτωτή Babel, πρέπει να εγκαταστήσετε τα απαραίτητα πακέτα Node με npm:

 npm εγκαταστήστε --save-dev babel-φορτωτής babel-core babel-preset-env webpack

Αν ρίξετε μια ματιά στο δικό σας package.json αρχείο, θα δείτε ότι npm πρόσθεσε τρία πακέτα που σχετίζονται με τη Βαβέλ στο devDependencies ιδιοκτησία, αυτά θα φροντίσουν για την κατάρτιση του ES6.

4. Προσθέστε τα plugins

Προς το προσθέστε τις προσθήκες, πρέπει να καθορίσετε το plugins ιδιοκτησία. Επιπλέον, πρέπει επίσης απαιτώ τα πρόσθετα ένα προς ένα, καθώς είναι εξωτερικές ενότητες.

Στο παράδειγμά μας, προσθέτουμε δύο plugins Webpack: το HTML Webpack plugin και το Προεγκατάσταση προσθήκης Webpack. Το Webpack έχει ένα ωραίο οικοσύστημα plugin, μπορείτε να περιηγηθείτε στην πλήρη λίστα εδώ.

Να απαιτούνται τα plugins ως μονάδες κόμβων, δημιουργήστε δύο νέες σταθερές: HtmlWebpackPlugin και PreloadWebpackPlugin και Χρησιμοποιήστε το απαιτώ() λειτουργία.

 const path = require ("path"). const HtmlWebpackPlugin = απαιτεί ("html-webpack-plugin"); const PreloadWebpackPlugin = απαιτεί ("preload-webpack-plugin"); (εξόδου): test: test module_exports = entry: "./src/script.js", εξόδου: filename: bundle.js : / / node_modules | bower_components), χρησιμοποιήστε: loader: "babel-loader", επιλογές: presets: ["env"]], plugins: [new HtmlWebpackPlugin (), το νέο PreloadWebpackPlugin ()].

Όπως και στην περίπτωση των φορτωτών, πρέπει επίσης εγκαταστήστε τα plugins Webpack με npm. Για να εγκαταστήσετε τις δύο προσθήκες στο παράδειγμα, εκτελέστε τις ακόλουθες δύο εντολές στη γραμμή εντολών:

 npm εγκατάσταση html-webpack-plugin -save-dev npm εγκατάσταση -save-dev preload-webpack-plugin

Αν ελέγξετε το σας package.json αρχείο τώρα, θα δείτε ότι npm πρόσθεσε τις δύο προσθήκες στο devDependencies ιδιοκτησία.

Εκτελέστε Webpack

Προς το δημιουργήστε το δέντρο εξάρτησης και εξάγετε τη δέσμη, εκτελέστε την ακόλουθη εντολή στη γραμμή εντολών:

 webpack

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

Αν όλα πήγαν δεξιά Webpack δημιούργησε ένα dist ντοσιέ στη ρίζα του έργου σας και τα δύο δεσμευμένα αρχεία (bundle.js και index.html) μέσα σε αυτό.

Github repo

Αν θέλετε να ελέγξετε, να κατεβάσετε ή να περάσετε ολόκληρο το έργο, ρίξτε μια ματιά στο Github repo.