Ga naar hoofdinhoud Ga naar navigatie in documenten
Check
in English

Bootstrap & Webpack

De officiële gids voor het opnemen en bundelen van Bootstrap's CSS en JavaScript in uw project met behulp van Webpack.

Op deze pagina
Wil je naar het einde springen? Download de broncode en werkende demo voor deze handleiding uit de twbs/examples-repository . U kunt het voorbeeld ook openen in StackBlitz voor live bewerking.

Opstelling

We bouwen vanaf het begin een Webpack-project met Bootstrap, dus er zijn enkele vereisten en stappen vooraf voordat we echt aan de slag kunnen. Deze handleiding vereist dat u Node.js hebt geïnstalleerd en enige bekendheid met de terminal.

  1. Maak een projectmap en stel npm in. We zullen de my-projectmap maken en npm initialiseren met het -yargument om te voorkomen dat het ons alle interactieve vragen stelt.

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

  2. Installeer Webpack. Vervolgens moeten we onze Webpack-ontwikkelingsafhankelijkheden installeren: webpackvoor de kern van Webpack, webpack-clizodat we Webpack-commando's kunnen uitvoeren vanaf de terminal, en webpack-dev-serverzodat we een lokale ontwikkelingsserver kunnen draaien. We gebruiken --save-devom aan te geven dat deze afhankelijkheden alleen voor ontwikkelingsgebruik zijn en niet voor productie.

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

  3. Installeer Bootstrap. Nu kunnen we Bootstrap installeren. We zullen Popper ook installeren omdat onze dropdowns, popovers en tooltips ervan afhankelijk zijn voor hun positionering. Als u niet van plan bent deze componenten te gebruiken, kunt u Popper hier weglaten.

    npm i --save bootstrap @popperjs/core

  4. Installeer extra afhankelijkheden. Naast Webpack en Bootstrap hebben we nog een paar afhankelijkheden nodig om de CSS en JS van Bootstrap correct te importeren en te bundelen met Webpack. Deze omvatten Sass, sommige laders en Autoprefixer.

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

Nu we alle benodigde afhankelijkheden hebben geïnstalleerd, kunnen we aan de slag met het maken van de projectbestanden en het importeren van Bootstrap.

Projectstructuur

We hebben de my-projectmap al gemaakt en npm geïnitialiseerd. Nu zullen we ook onze srcen distmappen maken om de projectstructuur af te ronden. Voer het volgende uit vanaf my-project, of maak handmatig de onderstaande map en bestandsstructuur aan.

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

Als u klaar bent, ziet uw volledige project er als volgt uit:

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

Op dit moment staat alles op de goede plek, maar Webpack werkt niet omdat we onze nog niet hebben ingevuld webpack.config.js.

Webpack configureren

Nu afhankelijkheden zijn geïnstalleerd en onze projectmap klaar is om te beginnen met coderen, kunnen we nu Webpack configureren en ons project lokaal uitvoeren.

  1. Openen webpack.config.jsin je editor. Omdat het leeg is, moeten we er een standaardconfiguratie aan toevoegen, zodat we onze server kunnen starten. Dit deel van de configuratie vertelt Webpack dat het moet zoeken naar het JavaScript van ons project, waar de gecompileerde code moet worden uitgevoerd ( dist), en hoe de ontwikkelserver zich moet gedragen (uit de distmap halen met hot 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. Vervolgens vullen we onze dist/index.html. Dit is de HTML-pagina die Webpack in de browser laadt om de gebundelde CSS en JS te gebruiken die we er in latere stappen aan zullen toevoegen. Voordat we dat kunnen doen, moeten we het iets geven om te renderen en de outputJS van de vorige stap opnemen.

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

    We voegen hier een klein beetje Bootstrap-styling toe met de div class="container"en <button>zodat we kunnen zien wanneer Bootstrap's CSS wordt geladen door Webpack.

  3. Nu hebben we een npm-script nodig om Webpack uit te voeren. Open package.jsonen voeg het startonderstaande script toe (u zou het testscript al moeten hebben). We gebruiken dit script om onze lokale Webpack-ontwikkelserver te starten.

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

  4. En tot slot kunnen we Webpack starten. Voer vanuit de my-projectmap in uw terminal dat nieuw toegevoegde npm-script uit:

    npm start
    Webpack-ontwikkelserver actief

In het volgende en laatste deel van deze handleiding zullen we de Webpack-laders instellen en alle CSS en JavaScript van Bootstrap importeren.

Bootstrap importeren

Voor het importeren van Bootstrap in Webpack zijn de laders vereist die we in de eerste sectie hebben geïnstalleerd. We hebben ze met npm geïnstalleerd, maar nu moet Webpack worden geconfigureerd om ze te gebruiken.

  1. Stel de laders in in webpack.config.js. Uw configuratiebestand is nu compleet en moet overeenkomen met het onderstaande fragment. Het enige nieuwe deel hier is de modulesectie.

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

    Hier is een samenvatting van waarom we al deze laders nodig hebben. style-loaderinjecteert de CSS in een <style>element in <head>de HTML-pagina, css-loaderhelpt bij het gebruik @importen url(), postcss-loaderis vereist voor Autoprefixer en sass-loaderstelt ons in staat Sass te gebruiken.

  2. Laten we nu de CSS van Bootstrap importeren. Voeg het volgende toe aan src/scss/styles.scssom alle Sass-bronnen van Bootstrap te importeren.

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

    U kunt onze stylesheets ook afzonderlijk importeren als u dat wilt. Lees onze Sass-importdocumenten voor meer informatie.

  3. Vervolgens laden we de CSS en importeren we Bootstrap's JavaScript. Voeg het volgende toe src/js/main.jsaan om de CSS te laden en alle JS van Bootstrap te importeren. Popper wordt automatisch geïmporteerd via Bootstrap.

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

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

    U kunt indien nodig ook afzonderlijk JavaScript-plug-ins importeren om de bundelgroottes laag te houden:

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

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

    Lees onze JavaScript-documenten voor meer informatie over het gebruik van de plug-ins van Bootstrap.

  4. En je bent klaar! 🎉 Met de bron Sass en JS van Bootstrap volledig geladen, zou uw lokale ontwikkelingsserver er nu zo uit moeten zien.

    Webpack-ontwikkelserver met Bootstrap

    Nu kunt u beginnen met het toevoegen van alle Bootstrap-componenten die u wilt gebruiken. Zorg ervoor dat u het volledige Webpack-voorbeeldproject bekijkt om te zien hoe u extra aangepaste Sass kunt opnemen en uw build kunt optimaliseren door alleen de delen van Bootstrap's CSS en JS te importeren die u nodig hebt.

Productie optimalisaties

Afhankelijk van je setup, wil je misschien wat extra beveiliging en snelheidsoptimalisaties implementeren die nuttig zijn voor het uitvoeren van het project in productie. Houd er rekening mee dat deze optimalisaties niet worden toegepast op het Webpack-voorbeeldproject en dat u ze zelf moet implementeren.

CSS extraheren

De style-loaderhierboven geconfigureerde CSS verzendt gemakkelijk CSS naar de bundel, zodat het handmatig laden van een CSS-bestand dist/index.htmlniet nodig is. Deze aanpak werkt echter mogelijk niet met een strikt beleid voor inhoudsbeveiliging en kan een knelpunt in uw toepassing worden vanwege de grote bundelgrootte.

dist/index.htmlGebruik de mini-css-extract-loaderWebpack-plug- in om de CSS te scheiden zodat we deze rechtstreeks vanuit kunnen laden .

Installeer eerst de plug-in:

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

Instantieer en gebruik vervolgens de plug-in in de Webpack-configuratie:

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

Nadat het npm run buildopnieuw is uitgevoerd, is er een nieuw bestand dist/main.css, dat alle CSS bevat die is geïmporteerd door src/js/main.js. Als u dist/index.htmlnu in uw browser bekijkt, zal de stijl ontbreken, zoals deze nu in dist/main.css. U kunt de gegenereerde CSS dist/index.htmlals volgt opnemen:

--- 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-bestanden uitpakken

De CSS van Bootstrap bevat meerdere verwijzingen naar SVG-bestanden via inline data:URI's. Als u een inhoudsbeveiligingsbeleid voor uw project definieert dat data:URI's voor afbeeldingen blokkeert, worden deze SVG-bestanden niet geladen. U kunt dit probleem omzeilen door de inline SVG-bestanden uit te pakken met behulp van de functie voor activamodules van Webpack.

Configureer Webpack om inline SVG-bestanden als volgt uit te pakken:

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

Nadat u het npm run buildopnieuw hebt uitgevoerd, vindt u de SVG-bestanden die zijn geëxtraheerd in dist/iconsen waarnaar op de juiste manier wordt verwezen vanuit CSS.

Zie je hier iets mis of verouderd? Open een probleem op GitHub . Hulp nodig bij het oplossen van problemen? Zoek of start een discussie op GitHub.