Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
Check
in English

Bootstrap & Webpack

Zvanični vodič o tome kako uključiti i povezati Bootstrap-ov CSS i JavaScript u svoj projekat koristeći Webpack.

Na ovoj stranici
Želite li preskočiti do kraja? Preuzmite izvorni kod i radni demo za ovaj vodič iz twbs/examples spremišta . Također možete otvoriti primjer u StackBlitzu za uređivanje uživo.

Postaviti

Gradimo Webpack projekat s Bootstrapom od nule, tako da postoje neki preduvjeti i prvi koraci prije nego što zaista počnemo. Ovaj vodič zahtijeva od vas da imate instaliran Node.js i određeno poznavanje terminala.

  1. Kreirajte direktorij projekta i postavite npm. Kreiraćemo my-projectfasciklu i inicijalizovati npm sa -yargumentom kako bismo izbegli da nam postavlja sva interaktivna pitanja.

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

  2. Instalirajte Webpack. Zatim moramo instalirati naše ovisnosti o razvoju Webpack-a: webpackza jezgru Webpack-a, webpack-clitako da možemo pokrenuti naredbe Webpack-a s terminala i webpack-dev-servertako možemo pokrenuti lokalni razvojni server. Koristimo --save-devda signaliziramo da su ove zavisnosti samo za razvojnu upotrebu, a ne za proizvodnju.

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

  3. Instalirajte Bootstrap. Sada možemo instalirati Bootstrap. Također ćemo instalirati Popper jer naši padajući menii, iskačući oglasi i opisi alata zavise od toga za njihovo pozicioniranje. Ako ne planirate koristiti te komponente, ovdje možete izostaviti Poppera.

    npm i --save bootstrap @popperjs/core

  4. Instalirajte dodatne zavisnosti. Pored Webpack-a i Bootstrapa, potrebno nam je još nekoliko zavisnosti da bismo pravilno uvezli i povezali Bootstrap-ove CSS i JS sa Webpack-om. To uključuje Sass, neke loadere i Autoprefixer.

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

Sada kada imamo instalirane sve potrebne ovisnosti, možemo pristupiti stvaranju projektnih datoteka i uvozu Bootstrapa.

Struktura projekta

Već smo kreirali my-projectfolder i inicijalizirali npm. Sada ćemo također kreirati naše srci distmape kako bismo zaokružili strukturu projekta. Pokrenite sljedeće iz my-project, ili ručno kreirajte mapu i strukturu datoteka prikazanu ispod.

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

Kada završite, vaš kompletan projekat bi trebao izgledati ovako:

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

U ovom trenutku, sve je na pravom mjestu, ali Webpack neće raditi jer još nismo popunili svoj webpack.config.js.

Konfigurišite Webpack

Uz instalirane ovisnosti i našu mapu projekta koja je spremna za početak kodiranja, sada možemo konfigurirati Webpack i pokrenuti naš projekt lokalno.

  1. Otvorite webpack.config.jsu svom uređivaču. Pošto je prazan, moraćemo da mu dodamo neku šablonsku konfiguraciju kako bismo mogli da pokrenemo naš server. Ovaj dio konfiguracije govori Webpack-u da traži JavaScript našeg projekta, gdje će izvesti kompajlirani kod u ( dist) i kako bi se razvojni server trebao ponašati (povlačenje iz distmape s vrućim ponovnim učitavanjem).

    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. Zatim popunjavamo naše dist/index.html. Ovo je HTML stranica koju će Webpack učitati u pretraživač kako bi koristio CSS i JS koji ćemo joj dodati u kasnijim koracima. Prije nego što to možemo učiniti, moramo mu dati nešto za renderiranje i uključiti outputJS iz prethodnog 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>

    Ovdje uključujemo malo Bootstrap stila sa div class="container"i <button>tako da vidimo kada je Bootstrapov CSS učitan od strane Webpack-a.

  3. Sada nam je potrebna npm skripta za pokretanje Webpack-a. Otvorite package.jsoni dodajte startskriptu prikazanu ispod (trebalo bi da već imate testnu skriptu). Koristit ćemo ovu skriptu za pokretanje našeg lokalnog Webpack dev servera.

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

  4. I konačno, možemo pokrenuti Webpack. Iz my-projectfoldera na vašem terminalu pokrenite tu novododatu npm skriptu:

    npm start
    Webpack dev server radi

U sljedećem i posljednjem odjeljku ovog vodiča, mi ćemo postaviti učitavače Webpack-a i uvesti sav Bootstrap-ov CSS i JavaScript.

Import Bootstrap

Uvoz Bootstrapa u Webpack zahtijeva učitače koje smo instalirali u prvom dijelu. Instalirali smo ih pomoću npm-a, ali sada Webpack mora biti konfiguriran da ih koristi.

  1. Postavite utovarivače u webpack.config.js. Vaša konfiguracijska datoteka je sada završena i trebala bi odgovarati isječku ispod. Jedini novi dio ovdje je moduleodjeljak.

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

    Evo rezimea zašto su nam potrebni svi ovi utovarivači. style-loaderubacuje CSS u <style>element na <head>HTML stranici, css-loaderpomaže u korištenju @importi url(), postcss-loaderpotreban je za Autoprefixer i sass-loaderomogućava nam korištenje Sass-a.

  2. Sada, hajde da uvezemo Bootstrap-ov CSS. Dodajte sljedeće u src/scss/styles.scssda uvezete sav izvorni Sass Bootstrapa.

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

    Također možete uvesti naše stilove pojedinačno ako želite. Pročitajte naše Sass uvozne dokumente za detalje.

  3. Zatim učitavamo CSS i uvozimo Bootstrap-ov JavaScript. Dodajte sljedeće u src/js/main.jsda učitate CSS i uvezete sav Bootstrap-ov JS. Popper će biti automatski uvezen putem Bootstrapa.

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

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

    Također možete uvesti JavaScript dodatke pojedinačno po potrebi kako biste smanjili veličinu paketa:

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

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

    Pročitajte naše JavaScript dokumente za više informacija o tome kako koristiti Bootstrap dodatke.

  4. I gotovi ste! 🎉 Kada su izvorni Sass i JS Bootstrap potpuno učitani, vaš lokalni razvojni server bi sada trebao izgledati ovako.

    Webpack dev server radi sa Bootstrapom

    Sada možete početi da dodajete sve komponente Bootstrapa koje želite da koristite. Obavezno provjerite kompletan Webpack projekt za primjer kako da uključite dodatni prilagođeni Sass i optimizirate svoju konstrukciju uvozom samo dijelova Bootstrap-ovog CSS-a i JS-a koji su vam potrebni.

Optimizacije proizvodnje

Ovisno o vašoj postavci, možda ćete htjeti implementirati neke dodatne optimizacije sigurnosti i brzine korisne za pokretanje projekta u proizvodnji. Imajte na umu da se ove optimizacije ne primjenjuju na primjer Webpack projekta i na vama je da implementirate.

Ekstrakcija CSS-a

Gore style-loadersmo konfigurisali zgodno emituje CSS u paket tako da ručno učitavanje CSS datoteke dist/index.htmlnije potrebno. Međutim, ovaj pristup možda neće funkcionirati sa strogom politikom sigurnosti sadržaja i može postati usko grlo u vašoj aplikaciji zbog velike veličine paketa.

Da odvojite CSS tako da ga možemo učitati direktno iz dist/index.html, koristite mini-css-extract-loaderdodatak Webpack.

Prvo instalirajte dodatak:

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

Zatim instancirajte i koristite dodatak u konfiguraciji Webpack-a:

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

Nakon npm run buildponovnog pokretanja, pojavit će se nova datoteka dist/main.csskoja će sadržavati sav CSS uvezen od strane src/js/main.js. Ako dist/index.htmlsada pogledate u svom pretraživaču, stil će nedostajati, kao što je sada u dist/main.css. Možete uključiti generirani CSS na sljedeći način dist/index.html:

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

Ekstrahovanje SVG fajlova

Bootstrap-ov CSS uključuje višestruke reference na SVG datoteke putem inline data:URI-ja. Ako definišete Politiku sigurnosti sadržaja za svoj projekat koja blokira data:URI-je za slike, onda se ove SVG datoteke neće učitati. Ovaj problem možete zaobići tako što ćete izdvojiti ugrađene SVG datoteke koristeći Webpack-ovu funkciju modula sredstava.

Konfigurirajte Webpack za izdvajanje inline SVG fajlova na sljedeći način:

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

Nakon npm run buildponovnog pokretanja, naći ćete SVG datoteke ekstrahirane u dist/iconsCSS i ispravno referencirane iz CSS-a.

Vidite ovdje nešto pogrešno ili zastarjelo? Molimo otvorite problem na GitHubu . Trebate pomoć u rješavanju problema? Pretražite ili započnite diskusiju na GitHubu.