Hoppa till huvudinnehållet Hoppa till dokumentnavigering
Check
in English

Bootstrap & Webpack

Den officiella guiden för hur du inkluderar och paketerar Bootstraps CSS och JavaScript i ditt projekt med hjälp av Webpack.

På den här sidan
Vill du hoppa till slutet? Ladda ner källkoden och fungerande demo för den här guiden från twbs/exempelförrådet . Du kan också öppna exemplet i StackBlitz för liveredigering.

Uppstart

Vi bygger ett Webpack-projekt med Bootstrap från grunden, så det finns några förutsättningar och steg i förväg innan vi verkligen kan komma igång. Den här guiden kräver att du har Node.js installerat och att du känner till terminalen.

  1. Skapa en projektmapp och ställ in npm. Vi skapar my-projectmappen och initierar npm med -yargumentet för att undvika att det ställer oss alla interaktiva frågor.

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

  2. Installera Webpack. Därefter måste vi installera våra Webpack-utvecklingsberoenden: webpackför kärnan i Webpack, webpack-cliså att vi kan köra Webpack-kommandon från terminalen, och webpack-dev-serverså att vi kan köra en lokal utvecklingsserver. Vi använder --save-devför att signalera att dessa beroenden endast är för utvecklingsbruk och inte för produktion.

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

  3. Installera Bootstrap. Nu kan vi installera Bootstrap. Vi kommer också att installera Popper eftersom våra rullgardinsmenyer, popovers och verktygstips är beroende av den för deras placering. Om du inte planerar att använda dessa komponenter kan du utelämna Popper här.

    npm i --save bootstrap @popperjs/core

  4. Installera ytterligare beroenden. Förutom Webpack och Bootstrap behöver vi några fler beroenden för att korrekt importera och bunta Bootstraps CSS och JS med Webpack. Dessa inkluderar Sass, vissa lastare och Autoprefixer.

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

Nu när vi har alla nödvändiga beroenden installerade kan vi börja arbeta med att skapa projektfilerna och importera Bootstrap.

Projektets struktur

Vi har redan skapat my-projectmappen och initierat npm. Nu ska vi också skapa våra srcoch distmappar för att avrunda projektstrukturen. Kör följande från my-project, eller skapa manuellt mapp- och filstrukturen som visas nedan.

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 är klar bör ditt kompletta projekt se ut så här:

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

Vid det här laget är allt på rätt plats, men Webpack kommer inte att fungera eftersom vi inte har fyllt i vår webpack.config.jsän.

Konfigurera Webpack

Med beroenden installerade och vår projektmapp redo för oss att börja koda, kan vi nu konfigurera Webpack och köra vårt projekt lokalt.

  1. Öppna webpack.config.jsi din editor. Eftersom den är tom, måste vi lägga till några boilerplate-konfigurationer till den så att vi kan starta vår server. Den här delen av konfigurationen säger att Webpack skulle leta efter vårt projekts JavaScript, var den kompilerade koden ska matas ut till ( dist), och hur utvecklingsservern ska bete sig (dra från 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. Därefter fyller vi i vår dist/index.html. Det här är HTML-sidan som Webpack kommer att ladda i webbläsaren för att använda den medföljande CSS och JS som vi lägger till i senare steg. Innan vi kan göra det måste vi ge det något att rendera och inkludera outputJS från föregående steg.

    <!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 inkluderar lite Bootstrap-styling här med div class="container"och <button>så att vi ser när Bootstraps CSS laddas av Webpack.

  3. Nu behöver vi ett npm-skript för att köra Webpack. Öppna package.jsonoch lägg till startskriptet som visas nedan (du bör redan ha testskriptet). Vi kommer att använda det här skriptet för att starta vår lokala Webpack-dev-server.

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

  4. Och äntligen kan vi starta Webpack. Kör det nyligen tillagda npm-skriptet från my-projectmappen i din terminal:

    npm start
    Webpack utvecklarserver körs

I nästa och sista avsnitt i den här guiden kommer vi att ställa in Webpack-laddare och importera alla Bootstraps CSS och JavaScript.

Importera Bootstrap

Att importera Bootstrap till Webpack kräver de laddare som vi installerade i det första avsnittet. Vi har installerat dem med npm, men nu måste Webpack konfigureras för att använda dem.

  1. Ställ in lastarna i webpack.config.js. Din konfigurationsfil är nu klar och bör matcha kodavsnittet nedan. Den enda nya delen här är moduleavsnittet.

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

    Här är en sammanfattning av varför vi behöver alla dessa lastare. style-loaderinjicerar CSS i ett <style>element i <head>HTML-sidan, css-loaderhjälper till med att använda @importoch url(), postcss-loaderkrävs för Autoprefixer och sass-loaderlåter oss använda Sass.

  2. Låt oss nu importera Bootstraps CSS. Lägg till följande för src/scss/styles.scssatt importera alla Bootstraps käll Sass.

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

    Du kan även importera våra stilmallar individuellt om du vill. Läs våra Sass-importdokument för detaljer.

  3. Därefter laddar vi CSS och importerar Bootstraps JavaScript. Lägg till följande för src/js/main.jsatt ladda CSS och importera alla Bootstraps JS. Popper kommer att importeras automatiskt via Bootstrap.

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

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

    Du kan också importera JavaScript-plugins individuellt efter behov för att hålla nere paketstorlekar:

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

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

    Läs våra JavaScript-dokument för mer information om hur du använder Bootstraps plugins.

  4. Och du är klar! 🎉 Med Bootstraps källkod Sass och JS fulladdat bör din lokala utvecklingsserver nu se ut så här.

    Webpack utvecklarserver som körs med Bootstrap

    Nu kan du börja lägga till alla Bootstrap-komponenter du vill använda. Se till att kolla in det kompletta Webpack-exempelprojektet för att inkludera ytterligare anpassade Sass och optimera din build genom att endast importera de delar av Bootstraps CSS och JS som du behöver.

Produktionsoptimeringar

Beroende på din inställning kanske du vill implementera några ytterligare säkerhets- och hastighetsoptimeringar som är användbara för att köra projektet i produktion. Observera att dessa optimeringar inte tillämpas på Webpack-exempelprojektet och är upp till dig att implementera.

Extraherar CSS

Den style-loadervi konfigurerade ovan skickar bekvämt ut CSS i paketet så att manuell inläsning av en CSS-fil dist/index.htmlinte är nödvändig. Det här tillvägagångssättet kanske inte fungerar med en strikt innehållssäkerhetspolicy, och det kan bli en flaskhals i din applikation på grund av den stora paketstorleken.

För att separera CSS så att vi kan ladda den direkt från dist/index.html, använd mini-css-extract-loaderWebpack-plugin.

Installera först plugin:

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

Instantiera och använd sedan plugin-programmet 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 att ha körts npm run buildigen kommer det att finnas en ny fil dist/main.csssom innehåller all CSS som importerats av src/js/main.js. Om du tittar dist/index.htmli din webbläsare nu kommer stilen att saknas, eftersom den är nu i dist/main.css. Du kan inkludera den genererade CSS i dist/index.htmlså här:

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

Extraherar SVG-filer

Bootstraps CSS innehåller flera referenser till SVG-filer via inline data:URI:er. Om du definierar en innehållssäkerhetspolicy för ditt projekt som blockerar data:URI:er för bilder, kommer dessa SVG-filer inte att laddas. Du kan komma runt det här problemet genom att extrahera de inbyggda SVG-filerna med hjälp av Webpacks funktion för tillgångsmoduler.

Konfigurera Webpack för att extrahera inline SVG-filer så här:

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

När du har kört npm run buildigen hittar du SVG-filerna extraherade i dist/iconsoch korrekt refererade från CSS.

Ser du något fel eller inaktuellt här? Öppna ett problem på GitHub . Behöver du hjälp med felsökning? Sök eller starta en diskussion på GitHub.