Bootstrap & Webpack

Den offisielle veiledningen for hvordan du inkluderer og pakker Bootstraps CSS og JavaScript i prosjektet ditt ved å bruke Webpack.

På denne siden

Vil du hoppe til slutten? Last ned kildekoden og arbeidsdemoen for denne veiledningen fra twbs/eksempel-depotet . Du kan også åpne eksemplet i StackBlitz for live redigering.

Oppsett

Vi bygger et Webpack-prosjekt med Bootstrap fra bunnen av, så det er noen forutsetninger og fremgangsmåter før vi virkelig kan komme i gang. Denne veiledningen krever at du har Node.js installert og litt kjennskap til terminalen.

Opprett en prosjektmappe og sett opp npm. Vi oppretter my-projectmappen og initialiserer npm med -yargumentet for å unngå at det stiller oss alle de interaktive spørsmålene.
```
mkdir my-project && cd my-project
npm init -y
```
Installer Webpack. Deretter må vi installere Webpack-utviklingsavhengighetene våre: webpackfor kjernen av Webpack, webpack-clislik at vi kan kjøre Webpack-kommandoer fra terminalen, og webpack-dev-serverslik at vi kan kjøre en lokal utviklingsserver. Vi bruker --save-devå signalisere at disse avhengighetene kun er for utviklingsbruk og ikke for produksjon.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Installer Bootstrap. Nå kan vi installere Bootstrap. Vi vil også installere Popper siden rullegardinlistene, popovers og verktøytipsene våre avhenger av den for deres plassering. Hvis du ikke planlegger å bruke disse komponentene, kan du utelate Popper her.
```
npm i --save bootstrap @popperjs/core
```
Installer flere avhengigheter. I tillegg til Webpack og Bootstrap, trenger vi noen flere avhengigheter for å kunne importere og samle Bootstraps CSS og JS med Webpack. Disse inkluderer Sass, noen lastere og Autoprefixer.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Nå som vi har alle nødvendige avhengigheter installert, kan vi begynne å jobbe med å lage prosjektfilene og importere Bootstrap.

Prosjektstruktur

Vi har allerede opprettet my-projectmappen og initialisert npm. Nå skal vi også lage våre srcog distmapper for å avrunde prosjektstrukturen. Kjør følgende fra my-project, eller lag mappen og filstrukturen som vises nedenfor manuelt.

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 ferdig, skal hele prosjektet ditt se slik ut:

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

På dette tidspunktet er alt på rett plass, men Webpack vil ikke fungere fordi vi ikke har fylt ut vår webpack.config.jsennå.

Konfigurer Webpack

Med avhengigheter installert og prosjektmappen vår klar til at vi kan begynne kodingen, kan vi nå konfigurere Webpack og kjøre prosjektet vårt lokalt.

Åpne webpack.config.jsi redigeringsprogrammet. Siden den er tom, må vi legge til noen boilerplate-konfigurasjon til den slik at vi kan starte serveren vår. Denne delen av konfigurasjonen forteller at Webpack skulle se etter prosjektets JavaScript, hvor den kompilerte koden skal sendes til ( dist), og hvordan utviklingsserveren skal oppføre seg (trekker 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
  }
}
```

Deretter fyller vi ut vår dist/index.html. Dette er HTML-siden Webpack vil laste inn i nettleseren for å bruke den medfølgende CSS og JS vi legger til i senere trinn. Før vi kan gjøre det, må vi gi den noe å gjengi og inkludere outputJS fra forrige trinn.

<!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 litt Bootstrap-styling her med div class="container"og <button>slik at vi ser når Bootstraps CSS lastes av Webpack.

Nå trenger vi et npm-skript for å kjøre Webpack. Åpne package.jsonog legg til startskriptet vist nedenfor (du bør allerede ha testskriptet). Vi bruker dette skriptet til å starte vår lokale Webpack-utviklerserver.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Og endelig kan vi starte Webpack. Fra my-projectmappen i terminalen din, kjør det nylig lagt til npm-skriptet:
```
npm start
```

I den neste og siste delen av denne veiledningen vil vi sette opp Webpack-lasterne og importere alle Bootstraps CSS og JavaScript.

Importer Bootstrap

Import av Bootstrap til Webpack krever lasterne vi installerte i den første delen. Vi har installert dem med npm, men nå må Webpack konfigureres for å bruke dem.

Sett opp lasterne i webpack.config.js. Konfigurasjonsfilen din er nå fullført og skal samsvare med kodebiten nedenfor. Den eneste nye delen her er moduledelen.

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 oppsummering av hvorfor vi trenger alle disse lasterne. style-loaderinjiserer CSS-en i et <style>element i <head>HTML-siden, css-loaderhjelper med å bruke @importog url(), postcss-loaderkreves for Autoprefixer, og sass-loaderlar oss bruke Sass.

La oss nå importere Bootstraps CSS. Legg til følgende for src/scss/styles.scsså importere hele Bootstraps kilde Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Du kan også importere stilarkene våre individuelt hvis du vil. Les våre Sass-importdokumenter for detaljer.
Deretter laster vi inn CSS og importerer Bootstraps JavaScript. Legg til følgende for src/js/main.jså laste CSS og importere alle Bootstraps JS. Popper vil bli importert automatisk gjennom 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 etter behov for å holde pakkestørrelsene nede:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Les våre JavaScript-dokumenter for mer informasjon om hvordan du bruker Bootstraps plugins.
Og du er ferdig! 🎉 Med Bootstraps kilde Sass og JS fullastet, skal din lokale utviklingsserver nå se slik ut.

Nå kan du begynne å legge til alle Bootstrap-komponenter du vil bruke. Sørg for å sjekke ut det komplette Webpack-eksempelprosjektet for hvordan du inkluderer ekstra tilpasset Sass og optimaliserer bygget ved å importere bare delene av Bootstraps CSS og JS du trenger.

Produksjonsoptimaliseringer

Avhengig av oppsettet ditt, kan det være lurt å implementere noen ekstra sikkerhets- og hastighetsoptimaliseringer som er nyttige for å kjøre prosjektet i produksjon. Merk at disse optimaliseringene ikke brukes på Webpack-eksempelprosjektet og er opp til deg å implementere.

Pakker ut CSS

Den style-loadervi konfigurerte ovenfor sender beleilig CSS inn i pakken, slik at det ikke er nødvendig å laste inn en CSS-fil manuelt dist/index.html. Denne tilnærmingen fungerer kanskje ikke med en streng innholdssikkerhetspolicy, og den kan bli en flaskehals i applikasjonen din på grunn av den store pakkestørrelsen.

For å skille CSS-en slik at vi kan laste den direkte fra dist/index.html, bruk mini-css-extract-loaderWebpack-plugin.

Installer først plugin:

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

Deretter instansierer og bruker plugin-en i Webpack-konfigurasjonen:

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

Etter å ha kjørt npm run buildigjen, vil det være en ny fil dist/main.csssom vil inneholde all CSS importert av src/js/main.js. Hvis du ser dist/index.htmli nettleseren din nå, vil stilen mangle, som den er nå i dist/main.css. Du kan inkludere den genererte CSS-en på dist/index.htmldenne måten:

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

Pakk ut SVG-filer

Bootstraps CSS inkluderer flere referanser til SVG-filer via innebygde data:URIer. Hvis du definerer en innholdssikkerhetspolicy for prosjektet ditt som blokkerer data:URIer for bilder, vil ikke disse SVG-filene lastes. Du kan omgå dette problemet ved å trekke ut de innebygde SVG-filene ved å bruke Webpacks funksjon for aktivamoduler.

Konfigurer Webpack for å trekke ut innebygde 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: [

Etter å ha kjørt på npm run buildnytt, vil du finne SVG-filene som er pakket ut dist/iconsog referert til fra CSS.

Ser du noe galt eller utdatert her? Vennligst åpne et problem på GitHub . Trenger du hjelp til feilsøking? Søk eller start en diskusjon på GitHub.