Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
Check
in English

Bootstrap & Webpack

Uradni vodnik za vključitev in povezovanje Bootstrapovega CSS in JavaScripta v vaš projekt s pomočjo Webpacka.

Na tej strani
Želite preskočiti na konec? Prenesite izvorno kodo in delujočo predstavitev za ta vodnik iz repozitorija twbs/examples . Primer lahko odprete tudi v StackBlitzu za urejanje v živo.

Nastaviti

Projekt Webpack z Bootstrapom gradimo od začetka, tako da obstaja nekaj predpogojev in začetnih korakov, preden lahko zares začnemo. Ta priročnik zahteva, da imate nameščen Node.js in nekaj znanja o terminalu.

  1. Ustvarite mapo projekta in nastavite npm. Ustvarili bomo my-projectmapo in inicializirali npm z -yargumentom, da se izognemo postavljanju vseh interaktivnih vprašanj.

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

  2. Namestite Webpack. Nato moramo namestiti naše razvojne odvisnosti Webpack: webpackza jedro Webpacka, webpack-clida lahko izvajamo ukaze Webpack s terminala in webpack-dev-serverda lahko izvajamo lokalni razvojni strežnik. Uporabljamo --save-devza signaliziranje, da so te odvisnosti samo za razvojno uporabo in ne za proizvodnjo.

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

  3. Namestite Bootstrap. Zdaj lahko namestimo Bootstrap. Namestili bomo tudi Popper, saj so naši spustni meniji, pojavna okna in opisi orodij odvisni od tega za njihovo pozicioniranje. Če teh komponent ne nameravate uporabljati, lahko Popperja tukaj izpustite.

    npm i --save bootstrap @popperjs/core

  4. Namestite dodatne odvisnosti. Poleg Webpacka in Bootstrapa potrebujemo še nekaj odvisnosti za pravilen uvoz in povezovanje Bootstrapovega CSS in JS s Webpackom. Sem spadajo Sass, nekateri nalagalniki in Autoprefixer.

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

Zdaj, ko imamo nameščene vse potrebne odvisnosti, lahko začnemo ustvarjati projektne datoteke in uvažati Bootstrap.

Struktura projekta

Mapo smo že ustvarili my-projectin inicializirali npm. Zdaj bomo ustvarili tudi naše srcin distmape, da zaokrožimo strukturo projekta. Zaženite naslednje iz my-projectali ročno ustvarite strukturo map in datotek, prikazano spodaj.

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

Ko končate, bi moral vaš celoten projekt izgledati takole:

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

Na tej točki je vse na pravem mestu, vendar Webpack ne bo deloval, ker še nismo izpolnili našega webpack.config.js.

Konfigurirajte Webpack

Z nameščenimi odvisnostmi in našo projektno mapo, pripravljeno za začetek kodiranja, lahko zdaj konfiguriramo Webpack in izvajamo naš projekt lokalno.

  1. Odprite webpack.config.jsv urejevalniku. Ker je prazen, mu bomo morali dodati nekaj standardne konfiguracije, da bomo lahko zagnali naš strežnik. Ta del konfiguracije pove Webpacku, naj poišče JavaScript našega projekta, kam naj izpiše prevedeno kodo v ( dist) in kako naj se obnaša razvojni strežnik (vlečenje iz distmape z vročim ponovnim nalaganjem).

    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. Nato izpolnimo našo dist/index.html. To je stran HTML, ki jo bo Webpack naložil v brskalnik za uporabo združenih CSS in JS, ki ji jih bomo dodali v kasnejših korakih. Preden lahko to storimo, mu moramo dati nekaj za upodabljanje in vključiti outputJS iz prejšnjega koraka.

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

    Tu smo vključili delček Bootstrapovega sloga z div class="container"in <button>tako, da vidimo, kdaj Webpack naloži Bootstrapov CSS.

  3. Zdaj potrebujemo skript npm za zagon Webpacka. Odprite package.jsonin dodajte startskript, prikazan spodaj (preskusni skript bi morali že imeti). Ta skript bomo uporabili za zagon našega lokalnega razvijalskega strežnika Webpack.

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

  4. In končno lahko zaženemo Webpack. Iz my-projectmape v vašem terminalu zaženite ta na novo dodan skript npm:

    npm start
    Strežnik Webpack Dev deluje

V naslednjem in zadnjem razdelku tega vodnika bomo nastavili nalagalnike Webpack in uvozili vse Bootstrapove CSS in JavaScript.

Uvozi Bootstrap

Za uvoz Bootstrapa v Webpack so potrebni nalagalniki, ki smo jih namestili v prvem razdelku. Namestili smo jih z npm, zdaj pa je treba Webpack konfigurirati za njihovo uporabo.

  1. Nastavite nakladalce v webpack.config.js. Vaša konfiguracijska datoteka je zdaj dokončana in bi se morala ujemati s spodnjim delčkom. Edini nov del tukaj je modulerazdelek.

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

    Tukaj je povzetek, zakaj potrebujemo vse te nakladalce. style-loadervstavi CSS v <style>element na <head>strani HTML, css-loaderpomaga pri uporabi @importin url(), postcss-loaderje potreben za Autoprefixer in sass-loadernam omogoča uporabo Sass.

  2. Zdaj pa uvozimo Bootstrapov CSS. src/scss/styles.scssČe želite uvoziti vse Bootstrapove izvorne kode Sass, dodajte naslednje .

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

    Naše slogovne tabele lahko uvozite tudi posamično, če želite. Za podrobnosti preberite naše dokumente o uvozu Sass .

  3. Nato naložimo CSS in uvozimo Bootstrapov JavaScript. Dodajte naslednje, src/js/main.jsda naložite CSS in uvozite vse Bootstrapove JS. Popper bo samodejno uvožen prek programa Bootstrap.

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

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

    Po potrebi lahko uvozite tudi vtičnike JavaScript posamično, da zmanjšate velikost paketov:

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

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

    Preberite naše dokumente JavaScript za več informacij o uporabi vtičnikov Bootstrap.

  4. In končali ste! 🎉 Ko sta izvorna koda Bootstrap Sass in JS v celoti naložena, bi moral vaš lokalni razvojni strežnik videti takole.

    Strežnik za razvijalce Webpack deluje z Bootstrapom

    Zdaj lahko začnete dodajati vse komponente Bootstrap, ki jih želite uporabiti. Prepričajte se, da si ogledate celoten primer projekta Webpack za vključitev dodatnih Sass po meri in optimiziranje vaše gradnje z uvozom samo delov Bootstrapovega CSS in JS, ki jih potrebujete.

Optimizacije proizvodnje

Odvisno od vaše nastavitve boste morda želeli implementirati nekaj dodatnih varnostnih in hitrostnih optimizacij, ki so uporabne za izvajanje projekta v produkciji. Upoštevajte, da te optimizacije niso uporabljene na vzorčnem projektu Webpack in je odvisno od vas, da jih implementirate.

Ekstrahiranje CSS

Zgoraj style-loadersmo konfigurirali priročno oddaja CSS v sveženj, tako da ročno nalaganje datoteke CSS dist/index.htmlni potrebno. Ta pristop morda ne bo deloval s strogim pravilnikom o varnosti vsebine in lahko postane ozko grlo v vaši aplikaciji zaradi velike velikosti svežnja.

Če želite ločiti CSS, tako da ga lahko naložimo neposredno iz dist/index.html, uporabite mini-css-extract-loadervtičnik Webpack.

Najprej namestite vtičnik:

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

Nato ustvarite in uporabite vtičnik v konfiguraciji Webpack:

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

Po ponovnem zagonu npm run buildbo na voljo nova datoteka dist/main.css, ki bo vsebovala vse CSS, ki jih je uvozil src/js/main.js. Če si dist/index.htmlzdaj ogledate v brskalniku, bo slog manjkal, kot je zdaj v dist/main.css. Ustvarjeni CSS lahko vključite dist/index.htmltakole:

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

Ekstrahiranje datotek SVG

Bootstrapov CSS vključuje več sklicev na datoteke SVG prek vgrajenih data:URI-jev. Če za svoj projekt določite pravilnik o varnosti vsebine, ki blokira data:URI-je za slike, se te datoteke SVG ne bodo naložile. To težavo lahko rešite tako, da ekstrahirate vgrajene datoteke SVG s funkcijo modulov sredstev Webpack.

Konfigurirajte Webpack za ekstrahiranje vgrajenih datotek SVG, kot je ta:

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

Po ponovnem zagonu npm run buildboste našli datoteke SVG, ekstrahirane v dist/iconsCSS in nanje pravilno navedene.

Vidite tukaj nekaj narobe ali zastarelo? Odprite vprašanje na GitHubu . Potrebujete pomoč pri odpravljanju težav? Iščite ali začnite razpravo na GitHubu.