Spring til hovedindhold Spring til dokumentnavigation
Check
in English

Bootstrap & Webpack

Den officielle guide til, hvordan du inkluderer og bundter Bootstraps CSS og JavaScript i dit projekt ved hjælp af Webpack.

På denne side
Vil du springe til slutningen? Download kildekoden og arbejdsdemoen til denne vejledning fra twbs/eksempel-lageret . Du kan også åbne eksemplet i StackBlitz for live redigering.

Opsætning

Vi er ved at bygge et Webpack-projekt med Bootstrap fra bunden, så der er nogle forudsætninger og forhåndstrin, før vi rigtig kan komme i gang. Denne vejledning kræver, at du har Node.js installeret og en vis fortrolighed med terminalen.

  1. Opret en projektmappe og opsæt npm. Vi opretter my-projectmappen og initialiserer npm med -yargumentet for at undgå, at det stiller os alle de interaktive spørgsmål.

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

  2. Installer Webpack. Dernæst skal vi installere vores Webpack-udviklingsafhængigheder: webpackfor kernen af ​​Webpack, webpack-cliså vi kan køre Webpack-kommandoer fra terminalen, og webpack-dev-serverså vi kan køre en lokal udviklingsserver. Vi bruger --save-devtil at signalere, at disse afhængigheder kun er til udviklingsbrug og ikke til produktion.

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

  3. Installer Bootstrap. Nu kan vi installere Bootstrap. Vi vil også installere Popper, da vores dropdowns, popovers og værktøjstip afhænger af det for deres placering. Hvis du ikke planlægger at bruge disse komponenter, kan du udelade Popper her.

    npm i --save bootstrap @popperjs/core

  4. Installer yderligere afhængigheder. Ud over Webpack og Bootstrap har vi brug for et par flere afhængigheder for korrekt at importere og bundle Bootstraps CSS og JS med Webpack. Disse omfatter Sass, nogle læssere og Autoprefixer.

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

Nu hvor vi har alle de nødvendige afhængigheder installeret, kan vi komme i gang med at oprette projektfilerne og importere Bootstrap.

Projektets struktur

Vi har allerede oprettet my-projectmappen og initialiseret npm. Nu vil vi også oprette vores srcog distmapper for at afrunde projektstrukturen. Kør følgende fra my-project, eller opret manuelt mappen og filstrukturen vist nedenfor.

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

Når du er færdig, skal dit komplette projekt se sådan ud:

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

På dette tidspunkt er alt på det rigtige sted, men Webpack virker ikke, fordi vi ikke har udfyldt vores webpack.config.jsendnu.

Konfigurer Webpack

Med afhængigheder installeret og vores projektmappe klar til, at vi kan begynde at kode, kan vi nu konfigurere Webpack og køre vores projekt lokalt.

  1. Åbn webpack.config.jsi din editor. Da det er tomt, bliver vi nødt til at tilføje nogle boilerplate-konfigurationer til det, så vi kan starte vores server. Denne del af konfigurationen fortæller, at Webpack skulle lede efter vores projekts JavaScript, hvor den kompilerede kode skal udlæses ( dist), og hvordan udviklingsserveren skal opføre sig (trække fra distmappen med 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. Dernæst udfylder vi vores dist/index.html. Dette er HTML-siden, som Webpack vil indlæse i browseren for at bruge den medfølgende CSS og JS, som vi tilføjer til den i senere trin. Før vi kan gøre det, skal vi give det noget at gengive og inkludere outputJS fra det forrige trin.

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

    Vi inkluderer en lille smule Bootstrap-styling her med div class="container"og <button>, så vi kan se, hvornår Bootstraps CSS er indlæst af Webpack.

  3. Nu har vi brug for et npm-script for at køre Webpack. Åbn package.jsonog tilføj startscriptet vist nedenfor (du burde allerede have testscriptet). Vi bruger dette script til at starte vores lokale Webpack-udviklerserver.

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

  4. Og endelig kan vi starte Webpack. Kør det nyligt tilføjede npm-script fra my-projectmappen i din terminal:

    npm start
    Webpack-udviklerserver kører

I det næste og sidste afsnit af denne vejledning opsætter vi Webpack-indlæserne og importerer alle Bootstraps CSS og JavaScript.

Importer Bootstrap

Import af Bootstrap til Webpack kræver de indlæsere, vi installerede i den første sektion. Vi har installeret dem med npm, men nu skal Webpack konfigureres til at bruge dem.

  1. Sæt læsserne op i webpack.config.js. Din konfigurationsfil er nu færdig og bør matche uddraget nedenfor. Den eneste nye del her er moduleafsnittet.

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

    Her er en opsummering af, hvorfor vi har brug for alle disse læssere. style-loaderinjicerer CSS'en i et <style>element i <head>HTML-siden, css-loaderhjælper med at bruge @importog url(), postcss-loaderer påkrævet for Autoprefixer og sass-loadergiver os mulighed for at bruge Sass.

  2. Lad os nu importere Bootstraps CSS. Tilføj følgende til src/scss/styles.scssfor at importere hele Bootstraps kilde Sass.

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

    Du kan også importere vores stylesheets individuelt, hvis du ønsker det. Læs vores Sass-importdokumenter for detaljer.

  3. Dernæst indlæser vi CSS'en og importerer Bootstraps JavaScript. Tilføj følgende til src/js/main.jsfor at indlæse CSS og importere alle Bootstraps JS. Popper importeres automatisk gennem Bootstrap.

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

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

    Du kan også importere JavaScript-plugins individuelt efter behov for at holde bundtstørrelserne nede:

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

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

    Læs vores JavaScript -dokumenter for mere information om, hvordan du bruger Bootstraps plugins.

  4. Og du er færdig! 🎉 Med Bootstraps kilde Sass og JS fuldt indlæst, skulle din lokale udviklingsserver nu se sådan ud.

    Webpack-udviklerserver, der kører med Bootstrap

    Nu kan du begynde at tilføje alle Bootstrap-komponenter, du vil bruge. Sørg for at tjekke det komplette Webpack-eksempelprojekt for, hvordan du inkluderer yderligere tilpasset Sass og optimerer din build ved kun at importere de dele af Bootstraps CSS og JS, du har brug for.

Produktionsoptimeringer

Afhængigt af din opsætning vil du måske implementere nogle yderligere sikkerheds- og hastighedsoptimeringer, der er nyttige til at køre projektet i produktion. Bemærk, at disse optimeringer ikke anvendes på Webpack-eksempelprojektet og er op til dig at implementere.

Udpakning af CSS

Det style-loader, vi konfigurerede ovenfor, udsender bekvemt CSS i bundtet, så det dist/index.htmlikke er nødvendigt at indlæse en CSS-fil manuelt. Denne tilgang virker muligvis ikke med en streng indholdssikkerhedspolitik, og den kan blive en flaskehals i din applikation på grund af den store bundtstørrelse.

For at adskille CSS'en, så vi kan indlæse den direkte fra dist/index.html, skal du bruge mini-css-extract-loaderWebpack-plugin'et.

Installer først pluginnet:

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

Foretag og brug derefter pluginnet i Webpack-konfigurationen:

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

Efter at have kørt npm run buildigen, vil der være en ny fil dist/main.css, som vil indeholde al CSS importeret af src/js/main.js. Hvis du ser dist/index.htmli din browser nu, vil stilen mangle, da den nu er i dist/main.css. Du kan inkludere den genererede CSS i dist/index.htmlsådan her:

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

Udpakning af SVG-filer

Bootstraps CSS indeholder flere referencer til SVG-filer via inline- data:URI'er. Hvis du definerer en indholdssikkerhedspolitik for dit projekt, der blokerer data:URI'er for billeder, indlæses disse SVG-filer ikke. Du kan omgå dette problem ved at udpakke de indbyggede SVG-filer ved hjælp af Webpacks aktivmoduler.

Konfigurer Webpack til at udpakke inline SVG-filer som dette:

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

Efter at have kørt npm run buildigen, vil du finde SVG-filerne udtrukket i dist/iconsog korrekt refereret fra CSS.

Ser du noget forkert eller forældet her? Åbn venligst et problem på GitHub . Har du brug for hjælp til fejlfinding? Søg eller start en diskussion på GitHub.