Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
Check
in English

Bootstrap & Webpack

Den offiziellen Guide fir wéi Dir Bootstrap's CSS a JavaScript an Ärem Projet mat Webpack enthält a bündelt.

Op dëser Säit
Wëllt Dir bis zum Schluss sprangen? Luet de Quellcode an d'Aarbechtsdemo fir dëse Guide aus dem twbs/examples Repository erof . Dir kënnt och d'Beispill am StackBlitz fir Live Redaktioun opmaachen.

Ageriicht

Mir bauen e Webpack-Projet mat Bootstrap vun Null un, sou datt et e puer Viraussetzungen a Virausschrëtt sinn ier mer wierklech kënne starten. Dëse Guide erfuerdert datt Dir Node.js installéiert hutt an e bësse Bekanntschaft mam Terminal.

  1. Erstellt e Projet Dossier a setup npm. Mir erstellen den my-projectDossier an initialiséieren npm mam -yArgument fir ze vermeiden datt et eis all interaktiv Froen stellt.

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

  2. Installéiert Webpack. Als nächst musse mir eis Webpack Entwécklungsabhängegkeeten installéieren: webpackfir de Kär vum Webpack, webpack-clisou datt mir Webpack Kommandoen vum Terminal lafen, a webpack-dev-serversou kënne mir e lokalen Entwécklungsserver lafen. Mir benotze --save-devfir ze signaliséieren datt dës Ofhängegkeete nëmme fir Entwécklungsnotzung sinn an net fir Produktioun.

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

  3. Installéiert Bootstrap. Elo kënne mir Bootstrap installéieren. Mir wäerten och Popper installéieren well eis Dropdowns, Popovers, an Tooltips dovun ofhänken fir hir Positionéierung. Wann Dir net plangt dës Komponenten ze benotzen, kënnt Dir de Popper hei ausgoen.

    npm i --save bootstrap @popperjs/core

  4. Installéiert zousätzlech Ofhängegkeeten. Zousätzlech zum Webpack a Bootstrap brauche mir e puer méi Ofhängegkeete fir de Bootstrap's CSS an JS mat Webpack richteg z'importéieren an ze bündelen. Dozou gehéiert Sass, e puer loaders, an Autoprefixer.

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

Elo datt mir all déi néideg Ofhängegkeeten installéiert hunn, kënne mir schaffen fir d'Projetdateien ze kreéieren an Bootstrap z'importéieren.

Projet Struktur

Mir hunn den my-projectDossier schonn erstallt an npm initialiséiert. Elo wäerte mir och eis srcan distOrdner erstellen fir d'Projetstruktur ofzeschléissen. Fëllt déi folgend aus my-project, oder erstellt den Dossier an d'Dateistruktur manuell hei ënnen.

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

Wann Dir fäerdeg sidd, sollt Äre komplette Projet esou ausgesinn:

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

Zu dësem Zäitpunkt ass alles op der richteger Plaz, awer Webpack funktionnéiert net well mir eis nach net ausgefëllt webpack.config.jshunn.

Webpack konfiguréieren

Mat Ofhängegkeeten installéiert an eisem Projet Dossier prett fir eis Kodéierung unzefänken, kënne mir elo Webpack konfiguréieren an eise Projet lokal lafen.

  1. Open webpack.config.jsan Ärem Editor. Well et eidel ass, musse mir e puer Boilerplate Configuratioun derbäi addéieren fir datt mir eise Server starten. Dësen Deel vun der Configuratioun erzielt Webpack fir de JavaScript vun eisem Projet ze sichen, wou de kompiléierte Code op ( dist) ausgëtt a wéi den Entwécklungsserver sech soll behuelen (zitt aus dem distDossier mat waarme Reload).

    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. Als nächst fëllen mir eis dist/index.html. Dëst ass d'HTML Säit Webpack wäert am Browser lued fir de gebündelte CSS an JS ze benotzen, déi mir a spéider Schrëtt derbäi addéieren. Ier mir dat kënne maachen, musse mir et eppes ginn ze maachen an de outputJS vum virege Schrëtt enthalen.

    <!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>

    Mir enthalen e bësse Bootstrap Styling hei mat der div class="container"a <button>sou datt mir gesinn wéini Bootstrap's CSS vum Webpack gelueden gëtt.

  3. Elo brauche mir en npm Skript fir Webpack ze lafen. Öffnen package.jsona füügt de startSkript hei ënnen un (Dir sollt schonn den Testskript hunn). Mir benotzen dëse Skript fir eise lokalen Webpack Dev Server ze starten.

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

  4. A schliisslech kënne mir Webpack starten. Aus dem my-projectDossier an Ärem Terminal, lafen dat neit addéierten npm Skript:

    npm start
    Webpack Dev Server leeft

An der nächster a leschter Sektioun zu dësem Guide setzen mir d'Webpack Loader op an importéieren all Bootstrap's CSS a JavaScript.

Import Bootstrap

Bootstrap importéieren an Webpack erfuerdert d'Loader déi mir an der éischter Sektioun installéiert hunn. Mir hunn se mat npm installéiert, awer elo muss Webpack konfiguréiert sinn fir se ze benotzen.

  1. Ariichten der loaders an webpack.config.js. Är Konfiguratiounsdatei ass elo fäerdeg a soll dem Snippet hei drënner passen. Deen eenzegen neien Deel hei ass d' moduleSektioun.

    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'
          }
        ]
      }
    ]
  }
}

    Hei ass e Réckbléck firwat mir all dës Luede brauchen. style-loadersprëtzen d'CSS an en <style>Element an <head>der HTML Säit, css-loaderhëlleft mat @importan url(), postcss-loaderass néideg fir Autoprefixer, an sass-loadererlaabt eis Sass ze benotzen.

  2. Elo, loosst eis Bootstrap's CSS importéieren. Füügt déi folgend fir src/scss/styles.scssall Bootstrap's Quell Sass z'importéieren.

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

    Dir kënnt eis Stylesheeten och individuell importéieren wann Dir wëllt. Liest eis Sass Import Dokumenter fir Detailer.

  3. Als nächst luede mir d'CSS an importéieren Bootstrap's JavaScript. Füügt déi folgend fir src/js/main.jsden CSS ze lueden an all Bootstrap's JS z'importéieren. Popper gëtt automatesch duerch Bootstrap importéiert.

    // Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

    Dir kënnt och JavaScript Plugins individuell importéieren wéi néideg fir Bündelgréissten erof ze halen:

    import Alert from 'bootstrap/js/dist/alert'

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

    Liest eis JavaScript Dokumenter fir méi Informatioun iwwer wéi Dir Bootstrap's Plugins benotzt.

  4. An Dir sidd fäerdeg! 🎉 Mat Bootstrap Quell Sass a JS voll gelueden, sollt Äre lokalen Entwécklungsserver elo esou ausgesinn.

    Webpack Dev Server leeft mat Bootstrap

    Elo kënnt Dir ufänken all Bootstrap Komponenten ze addéieren déi Dir benotze wëllt. Gitt sécher de komplette Webpack Beispillprojet ze kucken fir wéi Dir zousätzlech personaliséiert Sass enthält an Äre Bau optiméiert andeems Dir nëmmen déi Deeler vum Bootstrap's CSS an JS importéiert déi Dir braucht.

Produktioun optimizations

Ofhängeg vun Ärem Setup, wëllt Dir vläicht e puer zousätzlech Sécherheets- a Geschwindegkeetsoptimiséierungen ëmsetzen, nëtzlech fir de Projet an der Produktioun ze lafen. Notéiert datt dës Optimisatiounen net am Webpack Beispillprojet applizéiert ginn a sinn un Iech fir ëmzesetzen.

CSS extrahéieren

Déi style-loadermir uewe konfiguréiert emittéiert bequem CSS an de Bündel sou datt manuell eng CSS Datei gelueden dist/index.htmlass net néideg ass. Dës Approche kann awer net mat enger strikter Inhaltssécherheetspolitik funktionnéieren, an et kann e Flaschenhals an Ärer Applikatioun ginn wéinst der grousser Bündelgréisst.

Fir d'CSS ze trennen, fir datt mir se direkt aus laden kënnen dist/index.html, benotzt de mini-css-extract-loaderWebpack Plugin.

Als éischt, installéiert de Plugin:

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

Dann instantiéiert a benotzt de Plugin an der Webpack Konfiguratioun:

--- 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
           },
           {

Nodeems et npm run builderëm gelaf ass, gëtt et eng nei Datei dist/main.css, déi all CSS enthält importéiert vun src/js/main.js. Wann Dir dist/index.htmlelo an Ärem Browser kuckt, wäert de Stil fehlen, wéi et elo an dist/main.css. Dir kënnt de generéierte CSS dist/index.htmlesou enthalen:

--- 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 Dateien extrahéieren

Bootstrap's CSS enthält verschidde Referenzen op SVG Dateien iwwer Inline data:URIs. Wann Dir eng Inhaltssécherheetspolitik fir Äre Projet definéiert déi data:URIs fir Biller blockéiert, da lueden dës SVG Dateien net. Dir kënnt dëse Problem ëmgoen andeems Dir d'Inline SVG Dateien extrahéiert mat der Webpack Asset Moduler Feature.

Webpack konfiguréieren fir inline SVG Dateien esou ze extrahieren:

--- 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: [

Nodeems Dir nach eng npm run buildKéier gelaf ass, fannt Dir d'SVG Dateien extrahéiert an dist/iconsa richteg referenzéiert vun CSS.

Gesinn eppes falsch oder aktuell hei? Maacht w.e.g. en Thema op GitHub op . Braucht Dir Hëllef fir Probleemer ze léisen? Sicht oder start eng Diskussioun op GitHub.