Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
Check
in English

Bootstrap & Webpack

Oficiálna príručka, ako zahrnúť a zbaliť CSS a JavaScript Bootstrapu do vášho projektu pomocou Webpacku.

Na tejto stránke
Chcete preskočiť na koniec? Stiahnite si zdrojový kód a pracovné demo pre túto príručku z úložiska twbs/examples . Môžete tiež otvoriť príklad v StackBlitz pre živé úpravy.

Nastaviť

Vytvárame projekt Webpack s Bootstrap od nuly, takže pred tým, ako môžeme skutočne začať, sú potrebné určité predpoklady a prvé kroky. Táto príručka vyžaduje, aby ste mali nainštalovaný súbor Node.js a určitú znalosť terminálu.

  1. Vytvorte priečinok projektu a nastavte npm. Vytvoríme my-projectpriečinok a inicializujeme npm s -yargumentom, aby nám nekládol všetky interaktívne otázky.

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

  2. Nainštalujte Webpack. Ďalej musíme nainštalovať naše vývojové závislosti Webpacku: webpackpre jadro Webpacku, webpack-cliaby sme mohli spúšťať príkazy Webpacku z terminálu a webpack-dev-serveraby sme mohli spustiť lokálny vývojový server. Používame --save-devna signalizáciu, že tieto závislosti sú len na vývojové použitie a nie na výrobu.

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

  3. Nainštalujte Bootstrap. Teraz môžeme nainštalovať Bootstrap. Nainštalujeme aj Popper, pretože naše rozbaľovacie ponuky, kontextové okná a popisy nástrojov závisia od toho, pokiaľ ide o ich umiestnenie. Ak tieto komponenty neplánujete používať, môžete tu Popper vynechať.

    npm i --save bootstrap @popperjs/core

  4. Nainštalujte ďalšie závislosti. Okrem Webpack a Bootstrap potrebujeme niekoľko ďalších závislostí, aby sme správne importovali a spojili CSS a JS Bootstrapu s Webpack. Patria sem Sass, niektoré nakladače a Autoprefixer.

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

Teraz, keď máme nainštalované všetky potrebné závislosti, môžeme začať vytvárať súbory projektu a importovať Bootstrap.

Štruktúra projektu

Už sme vytvorili my-projectpriečinok a inicializovali sme npm. Teraz vytvoríme srcaj distpriečinky a na doplnenie štruktúry projektu. Spustite nasledujúce z my-project, alebo manuálne vytvorte štruktúru priečinkov a súborov zobrazenú nižšie.

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

Keď skončíte, váš kompletný projekt by mal vyzerať takto:

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

V tomto bode je všetko na správnom mieste, ale Webpack nebude fungovať, pretože sme ešte nevyplnili naše webpack.config.js.

Nakonfigurujte webový balík

S nainštalovanými závislosťami a s priečinkom projektu pripraveným na to, aby sme mohli začať kódovať, môžeme teraz nakonfigurovať Webpack a spustiť náš projekt lokálne.

  1. Otvorte webpack.config.jsvo svojom editore. Keďže je prázdny, budeme doň musieť pridať nejakú štandardnú konfiguráciu, aby sme mohli spustiť náš server. Táto časť konfigurácie hovorí, že Webpack má hľadať JavaScript nášho projektu, kam vypísať skompilovaný kód do ( dist) a ako sa má správať vývojový server (sťahovanie z distpriečinka s 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. Ďalej vyplníme naše dist/index.html. Toto je HTML stránka, ktorú Webpack načíta do prehliadača, aby využil pribalený CSS a JS, ktorý k nemu pridáme v neskorších krokoch. Predtým, ako to urobíme, musíme mu dať niečo na vykreslenie a zahrnúť outputJS z predchádzajúceho kroku.

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

    Zahŕňame tu trochu štýlu Bootstrap s div class="container"a <button>, aby sme videli, kedy je CSS Bootstrapu načítané Webpackom.

  3. Teraz potrebujeme skript npm na spustenie Webpacku. Otvorte package.jsona pridajte startskript zobrazený nižšie (testovací skript by ste už mali mať). Tento skript použijeme na spustenie nášho lokálneho servera Webpack dev.

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

  4. A nakoniec môžeme spustiť Webpack. Z my-projectpriečinka vo vašom termináli spustite tento novo pridaný skript npm:

    npm start
    Webpack dev server beží

V ďalšej a poslednej časti tejto príručky nastavíme zavádzače Webpack a importujeme všetky CSS a JavaScript od Bootstrapu.

Importovať Bootstrap

Import Bootstrapu do Webpack vyžaduje zavádzače, ktoré sme nainštalovali v prvej časti. Nainštalovali sme ich pomocou npm, ale teraz je potrebné nakonfigurovať Webpack, aby ich používal.

  1. Nastavte nakladače v webpack.config.js. Váš konfiguračný súbor je teraz kompletný a mal by zodpovedať úryvku nižšie. Jediná nová časť je tu modulesekcia.

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

    Tu je zhrnutie toho, prečo potrebujeme všetky tieto nakladače. style-loadervkladá CSS do <style>prvku na <head>stránke HTML, css-loaderpomáha s používaním @importa url(), postcss-loaderje potrebný pre Autoprefixer a sass-loaderumožňuje nám používať Sass.

  2. Teraz importujme CSS Bootstrapu. src/scss/styles.scssAk chcete importovať všetky zdroje Sass Bootstrapu, pridajte nasledujúce .

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

    Ak chcete, môžete tiež importovať naše šablóny štýlov jednotlivo. Podrobnosti nájdete v našich dokumentoch o importe Sass .

  3. Ďalej načítame CSS a importujeme JavaScript Bootstrapu. Pridajte nasledujúce do src/js/main.js, aby ste načítali CSS a importovali všetky JS Bootstrap. Popper bude importovaný automaticky cez Bootstrap.

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

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

    Doplnky JavaScript môžete podľa potreby importovať aj jednotlivo, aby ste znížili veľkosť balíkov:

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

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

    Prečítajte si naše dokumenty JavaScript , kde nájdete ďalšie informácie o tom, ako používať doplnky Bootstrap.

  4. A hotovo! 🎉 S plne načítaným zdrojom Sass a JS Bootstrapu by váš lokálny vývojový server mal teraz vyzerať takto.

    Webpack dev server beží s Bootstrap

    Teraz môžete začať pridávať komponenty Bootstrap, ktoré chcete použiť. Nezabudnite si pozrieť celý vzorový projekt Webpack, kde nájdete informácie o tom, ako zahrnúť ďalšie vlastné Sass a optimalizovať svoju zostavu importovaním iba častí CSS a JS Bootstrap, ktoré potrebujete.

Optimalizácia výroby

V závislosti od vášho nastavenia možno budete chcieť implementovať niektoré ďalšie optimalizácie zabezpečenia a rýchlosti užitočné na spustenie projektu v produkcii. Upozorňujeme, že tieto optimalizácie nie sú aplikované na vzorovom projekte Webpack a je na vás, aby ste ich implementovali.

Extrahovanie CSS

Vyššie style-loadernakonfigurované zariadenie pohodlne vysiela CSS do balíka, takže nie je potrebné manuálne načítanie súboru CSS dist/index.html. Tento prístup však nemusí fungovať s prísnou politikou zabezpečenia obsahu a môže sa stať prekážkou vo vašej aplikácii z dôvodu veľkej veľkosti balíka.

Na oddelenie CSS, aby sme ho mohli načítať priamo z dist/index.html, použite mini-css-extract-loaderdoplnok Webpack.

Najprv nainštalujte doplnok:

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

Potom vytvorte inštanciu a použite doplnok v konfigurácii 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 opätovnom spustení npm run buildsa vytvorí nový súbor dist/main.css, ktorý bude obsahovať všetky CSS importované pomocou src/js/main.js. Ak si dist/index.htmlteraz prezeráte vo svojom prehliadači, štýl bude chýbať, ako je teraz v dist/main.css. Vygenerovaný CSS môžete zahrnúť dist/index.htmltakto:

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

Extrahovanie súborov SVG

CSS Bootstrapu obsahuje viacero odkazov na súbory SVG prostredníctvom vložených data:URI. Ak pre svoj projekt definujete politiku zabezpečenia obsahu, ktorá blokuje data:identifikátory URI pre obrázky, tieto súbory SVG sa nenačítajú. Tento problém môžete obísť extrahovaním vložených súborov SVG pomocou funkcie modulov aktív Webpack.

Nakonfigurujte Webpack na extrahovanie vložených súborov SVG takto:

--- 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 opätovnom spustení npm run buildnájdete súbory SVG extrahované do dist/iconsCSS a správne na ne odkazované.

Vidíte tu niečo nesprávne alebo neaktuálne? Otvorte problém na GitHub . Potrebujete pomoc pri riešení problémov? Vyhľadajte alebo začnite diskusiu na GitHub.