Bootstrap & Webpack

Ρύθμιση

Δημιουργούμε ένα έργο Webpack με το Bootstrap από την αρχή, επομένως υπάρχουν ορισμένες προϋποθέσεις και τα πρώτα βήματα για να μπορέσουμε να ξεκινήσουμε πραγματικά. Αυτός ο οδηγός απαιτεί να έχετε εγκαταστήσει το Node.js και κάποια εξοικείωση με το τερματικό.

1. Δημιουργήστε ένα φάκελο έργου και ρυθμίστε το npm. Θα δημιουργήσουμε τον my-projectφάκελο και θα αρχικοποιήσουμε το npm με το -yόρισμα για να μην μας κάνει όλες τις διαδραστικές ερωτήσεις.

   mkdir my-project && cd my-project
   npm init -y
   

2. Εγκαταστήστε το Webpack. Στη συνέχεια, πρέπει να εγκαταστήσουμε τις εξαρτήσεις ανάπτυξης Webpack: webpackγια τον πυρήνα του Webpack, webpack-cliώστε να μπορούμε να εκτελέσουμε εντολές Webpack από το τερματικό και webpack-dev-serverέτσι να μπορούμε να τρέξουμε έναν τοπικό διακομιστή ανάπτυξης. Χρησιμοποιούμε --save-devγια να σηματοδοτήσουμε ότι αυτές οι εξαρτήσεις προορίζονται μόνο για αναπτυξιακή χρήση και όχι για παραγωγή.

   npm i --save-dev webpack webpack-cli webpack-dev-server
   

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

   npm i --save bootstrap @popperjs/core
   

4. Εγκαταστήστε πρόσθετες εξαρτήσεις. Εκτός από το Webpack και το Bootstrap, χρειαζόμαστε μερικές ακόμη εξαρτήσεις για να εισαγάγουμε και να συνδυάσουμε σωστά το CSS και το JS του Bootstrap με το Webpack. Αυτά περιλαμβάνουν το Sass, ορισμένα προγράμματα φόρτωσης και το Autoprefixer.

   npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
   

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

Δομή έργου

Έχουμε ήδη δημιουργήσει το my-projectφάκελο και έχουμε προετοιμάσει το npm. Τώρα θα δημιουργήσουμε επίσης τους φακέλους μας srcκαι distγια να ολοκληρώσουμε τη δομή του έργου. Εκτελέστε τα παρακάτω από το my-projectή δημιουργήστε με μη αυτόματο τρόπο τη δομή φακέλου και αρχείου που φαίνεται παρακάτω.

mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js

Όταν τελειώσετε, το πλήρες έργο σας θα πρέπει να μοιάζει με αυτό:

my-project/
├── dist/
│   └── index.html
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js

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

Διαμόρφωση πακέτου Web

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

1. Ανοίξτε webpack.config.jsστον επεξεργαστή σας. Δεδομένου ότι είναι κενό, θα χρειαστεί να προσθέσουμε κάποια διαμόρφωση boilerplate σε αυτό για να μπορέσουμε να ξεκινήσουμε τον διακομιστή μας. Αυτό το μέρος της διαμόρφωσης λέει στο Webpack ότι έπρεπε να αναζητήσει το JavaScript του έργου μας, πού να εξάγει τον μεταγλωττισμένο κώδικα στο ( dist) και πώς πρέπει να συμπεριφέρεται ο διακομιστής ανάπτυξης (τράβηγμα από το distφάκελο με επανάληψη φόρτωσης).

   const path = require('path')
   
   module.exports = {
     entry: './src/js/main.js',
     output: {
       filename: 'main.js',
       path: path.resolve(__dirname, 'dist')
     },
     devServer: {
       static: path.resolve(__dirname, 'dist'),
       port: 8080,
       hot: true
     }
   }
   

2. Στη συνέχεια συμπληρώνουμε τα dist/index.html. Αυτή είναι η σελίδα HTML που θα φορτώσει το Webpack στο πρόγραμμα περιήγησης για να χρησιμοποιήσει το πακέτο CSS και JS που θα προσθέσουμε σε αυτό στα επόμενα βήματα. Προτού μπορέσουμε να το κάνουμε αυτό, πρέπει να του δώσουμε κάτι για απόδοση και να συμπεριλάβουμε το outputJS από το προηγούμενο βήμα.

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Bootstrap w/ Webpack</title>
     </head>
     <body>
       <div class="container py-4 px-3 mx-auto">
         <h1>Hello, Bootstrap and Webpack!</h1>
         <button class="btn btn-primary">Primary button</button>
       </div>
       <script src="./main.js"></script>
     </body>
   </html>
   

   Περιλαμβάνουμε εδώ ένα μικρό στυλ Bootstrap με το div class="container"και <button>έτσι ώστε να βλέπουμε πότε φορτώνεται το CSS του Bootstrap από το Webpack.

3. Τώρα χρειαζόμαστε ένα σενάριο npm για να τρέξουμε το Webpack. Ανοίξτε package.jsonκαι προσθέστε το startσενάριο που φαίνεται παρακάτω (θα πρέπει να έχετε ήδη το σενάριο δοκιμής). Θα χρησιμοποιήσουμε αυτό το σενάριο για να ξεκινήσουμε τον τοπικό διακομιστή προγραμματιστών Webpack.

   {
     // ...
     "scripts": {
       "start": "webpack serve --mode development",
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     // ...
   }
   

4. Και τέλος, μπορούμε να ξεκινήσουμε το Webpack. Από το my-projectφάκελο στο τερματικό σας, εκτελέστε αυτό το σενάριο npm που προστέθηκε πρόσφατα:

   npm start
   

   

Στην επόμενη και τελευταία ενότητα αυτού του οδηγού, θα ρυθμίσουμε τα προγράμματα φόρτωσης Webpack και θα εισαγάγουμε όλα τα CSS και JavaScript του Bootstrap.

Εισαγωγή Bootstrap

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

1. Ρυθμίστε τους φορτωτές στο webpack.config.js. Το αρχείο διαμόρφωσής σας έχει πλέον ολοκληρωθεί και θα πρέπει να ταιριάζει με το παρακάτω απόσπασμα. Το μόνο νέο μέρος εδώ είναι η moduleενότητα.

   const path = require('path')
   
   module.exports = {
     entry: './src/js/main.js',
     output: {
       filename: 'main.js',
       path: path.resolve(__dirname, 'dist')
     },
     devServer: {
       static: path.resolve(__dirname, 'dist'),
       port: 8080,
       hot: true
     },
     module: {
       rules: [
         {
           test: /\.(scss)$/,
           use: [
             {
               loader: 'style-loader'
             },
             {
               loader: 'css-loader'
             },
             {
               loader: 'postcss-loader',
               options: {
                 postcssOptions: {
                   plugins: () => [
                     require('autoprefixer')
                   ]
                 }
               }
             },
             {
               loader: 'sass-loader'
             }
           ]
         }
       ]
     }
   }
   

   Ακολουθεί μια ανακεφαλαίωση του γιατί χρειαζόμαστε όλους αυτούς τους φορτωτές. style-loaderεισάγει το CSS σε ένα <style>στοιχείο στη <head>σελίδα HTML, css-loaderβοηθά στη χρήση @importκαι url(), postcss-loaderαπαιτείται για το Autoprefixer και sass-loaderμας επιτρέπει να χρησιμοποιούμε Sass.

2. Τώρα, ας εισάγουμε το CSS του Bootstrap. Προσθέστε τα παρακάτω για src/scss/styles.scssνα εισαγάγετε όλη την πηγή Sass του Bootstrap.

   // Import all of Bootstrap's CSS
   @import "~bootstrap/scss/bootstrap";
   

   Μπορείτε επίσης να εισάγετε τα φύλλα στυλ μας μεμονωμένα, αν θέλετε. Διαβάστε τα έγγραφα εισαγωγής Sass για λεπτομέρειες.

3. Στη συνέχεια, φορτώνουμε το CSS και εισάγουμε το JavaScript του Bootstrap. Προσθέστε τα παρακάτω για src/js/main.jsνα φορτώσετε το CSS και να εισαγάγετε όλα τα JS του Bootstrap. Το Popper θα εισαχθεί αυτόματα μέσω του Bootstrap.

   // Import our custom CSS
   import '../scss/styles.scss'
   
   // Import all of Bootstrap's JS
   import * as bootstrap from 'bootstrap'
   

   Μπορείτε επίσης να εισαγάγετε προσθήκες JavaScript μεμονωμένα, όπως απαιτείται, για να διατηρήσετε τα μεγέθη των δεσμίδων:

   import Alert from 'bootstrap/js/dist/alert'
   
   // or, specify which plugins you need:
   import { Tooltip, Toast, Popover } from 'bootstrap'
   

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

4. Και τελείωσες! 🎉 Με την πηγή Sass και το JS του Bootstrap πλήρως φορτωμένο, ο τοπικός διακομιστής ανάπτυξης θα πρέπει τώρα να μοιάζει με αυτό.

   

   Τώρα μπορείτε να αρχίσετε να προσθέτετε οποιαδήποτε στοιχεία Bootstrap θέλετε να χρησιμοποιήσετε. Βεβαιωθείτε ότι έχετε ελέγξει το πλήρες παράδειγμα έργου Webpack για το πώς να συμπεριλάβετε πρόσθετο προσαρμοσμένο Sass και να βελτιστοποιήσετε την κατασκευή σας εισάγοντας μόνο τα μέρη του CSS και του JS του Bootstrap που χρειάζεστε.

Βελτιστοποιήσεις παραγωγής

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

Εξαγωγή CSS

Το style-loaderπου διαμορφώσαμε παραπάνω εκπέμπει βολικά το CSS στη δέσμη, έτσι ώστε να dist/index.htmlμην είναι απαραίτητη η μη αυτόματη φόρτωση ενός αρχείου CSS. Ωστόσο, αυτή η προσέγγιση ενδέχεται να μην λειτουργεί με μια αυστηρή Πολιτική Ασφάλειας Περιεχομένου και μπορεί να γίνει εμπόδιο στην εφαρμογή σας λόγω του μεγάλου μεγέθους του πακέτου.

Για να διαχωρίσουμε το CSS ώστε να μπορούμε να το φορτώσουμε απευθείας από dist/index.htmlτο , χρησιμοποιήστε το mini-css-extract-loaderπρόσθετο Webpack.

Πρώτα, εγκαταστήστε το πρόσθετο:

npm install --save-dev mini-css-extract-plugin

Στη συνέχεια, δημιουργήστε και χρησιμοποιήστε την προσθήκη στη διαμόρφωση του Webpack:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
 
 module.exports = {
   mode: 'development',
   entry: './src/js/main.js',
+  plugins: [new miniCssExtractPlugin()],
   output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
         test: /\.(scss)$/,
         use: [
           {
-            // Adds CSS to the DOM by injecting a `<style>` tag
-            loader: 'style-loader'
+            // Extracts CSS for each JS file that includes CSS
+            loader: miniCssExtractPlugin.loader
           },
           {

Μετά την npm run buildεκ νέου εκτέλεση, θα υπάρχει ένα νέο αρχείο dist/main.css, το οποίο θα περιέχει όλο το CSS που έχει εισαχθεί από το src/js/main.js. Εάν προβάλλετε dist/index.htmlτώρα στο πρόγραμμα περιήγησής σας, το στυλ θα λείπει, όπως είναι τώρα στο dist/main.css. Μπορείτε να συμπεριλάβετε το CSS που δημιουργήθηκε dist/index.htmlως εξής:

--- a/webpack/dist/index.html
+++ b/webpack/dist/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./main.css">
     <title>Bootstrap w/ Webpack</title>
   </head>
   <body>

Εξαγωγή αρχείων SVG

Το CSS του Bootstrap περιλαμβάνει πολλαπλές αναφορές σε αρχεία SVG μέσω ενσωματωμένων data:URI. Εάν ορίσετε μια Πολιτική Ασφάλειας Περιεχομένου για το έργο σας που αποκλείει τα data:URI για εικόνες, τότε αυτά τα αρχεία SVG δεν θα φορτωθούν. Μπορείτε να αντιμετωπίσετε αυτό το πρόβλημα εξάγοντας τα ενσωματωμένα αρχεία SVG χρησιμοποιώντας τη δυνατότητα λειτουργικών μονάδων στοιχείων του Webpack.

Διαμορφώστε το Webpack για εξαγωγή ενσωματωμένων αρχείων SVG ως εξής:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        mimetype: 'image/svg+xml',
+        scheme: 'data',
+        type: 'asset/resource',
+        generator: {
+          filename: 'icons/[hash].svg'
+        }
+      },
       {
         test: /\.(scss)$/,
         use: [

Αφού εκτελέσετε npm run buildξανά, θα βρείτε τα αρχεία SVG που έχουν εξαχθεί dist/iconsκαι αναφέρονται σωστά από το CSS.

Βλέπετε κάτι λάθος ή ξεπερασμένο εδώ; Ανοίξτε ένα θέμα στο GitHub . Χρειάζεστε βοήθεια για την αντιμετώπιση προβλημάτων; Αναζητήστε ή ξεκινήστε μια συζήτηση στο GitHub.