Přejít na hlavní obsah Přejít na navigaci v dokumentech
Check
in English

Bootstrap & Webpack

Oficiální průvodce, jak zahrnout a sbalit CSS a JavaScript Bootstrapu do vašeho projektu pomocí Webpacku.

Na této straně
Chcete přeskočit na konec? Stáhněte si zdrojový kód a pracovní demo pro tuto příručku z úložiště twbs/examples . Můžete také otevřít příklad v StackBlitz pro živé úpravy.

Založit

Vytváříme projekt Webpack s Bootstrap od nuly, takže před tím, než můžeme skutečně začít, existují určité předpoklady a kroky. Tato příručka vyžaduje, abyste měli nainstalovaný Node.js a určitou znalost terminálu.

  1. Vytvořte složku projektu a nastavte npm. Vytvoříme my-projectsložku a inicializujeme npm s -yargumentem, aby nám nekladl všechny interaktivní otázky.

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

  2. Nainstalujte Webpack. Dále musíme nainstalovat naše vývojové závislosti Webpacku: webpackpro jádro Webpacku, webpack-cliabychom mohli spouštět příkazy Webpacku z terminálu a webpack-dev-serverabychom mohli spouštět místní vývojový server. Používáme --save-devk signalizaci, že tyto závislosti jsou pouze pro vývojové použití a ne pro výrobu.

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

  3. Nainstalujte Bootstrap. Nyní můžeme nainstalovat Bootstrap. Nainstalujeme také Popper, protože na něm závisí umístění našich rozevíracích seznamů, vyskakovacích oken a popisků. Pokud tyto komponenty neplánujete používat, můžete zde Popper vynechat.

    npm i --save bootstrap @popperjs/core

  4. Nainstalujte další závislosti. Kromě Webpacku a Bootstrapu potřebujeme několik dalších závislostí, abychom správně importovali a sbalili CSS a JS Bootstrapu s Webpackem. Patří mezi ně Sass, některé zavaděče a Autoprefixer.

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

Nyní, když máme nainstalované všechny potřebné závislosti, můžeme se pustit do vytváření souborů projektu a importu Bootstrapu.

Struktura projektu

Již jsme vytvořili my-projectsložku a inicializovali npm. Nyní také vytvoříme složky srca distpro doplnění struktury projektu. Spusťte následující z my-project, nebo ručně vytvořte strukturu složek a souborů zobrazenou níže.

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

Až budete hotovi, váš kompletní projekt by měl vypadat takto:

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

V tuto chvíli je vše na správném místě, ale Webpack nebude fungovat, protože jsme ještě nevyplnili naše webpack.config.js.

Nakonfigurujte webový balíček

S nainstalovanými závislostmi a naší projektovou složkou připravenou k zahájení kódování můžeme nyní nakonfigurovat Webpack a spustit náš projekt lokálně.

  1. Otevřete webpack.config.jsv editoru. Protože je prázdný, budeme do něj muset přidat nějakou standardní konfiguraci, abychom mohli spustit náš server. Tato část konfigurace říká Webpacku, aby hledal JavaScript našeho projektu, kam vyvést zkompilovaný kód do ( dist) a jak se má chovat vývojový server (stahování ze distsložky 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. Dále vyplníme naše dist/index.html. Toto je stránka HTML, kterou Webpack načte do prohlížeče, aby využil přibalené CSS a JS, které k ní přidáme v pozdějších krocích. Než to uděláme, musíme mu dát něco k vykreslení a zahrnout outputJS z předchozího 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>

    Zahrnuli jsme sem trochu stylů Bootstrapu s div class="container"a <button>, abychom viděli, kdy je CSS Bootstrapu načteno Webpackem.

  3. Nyní potřebujeme skript npm ke spuštění Webpacku. Otevřete package.jsona přidejte startskript zobrazený níže (měli byste již mít testovací skript). Tento skript použijeme ke spuštění našeho místního dev serveru Webpack.

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

  4. A konečně můžeme spustit Webpack. Ze my-projectsložky v terminálu spusťte nově přidaný skript npm:

    npm start
    Webpack dev server běží

V další a poslední části této příručky nastavíme zavaděče Webpack a importujeme všechny CSS a JavaScript Bootstrapu.

Importujte Bootstrap

Import Bootstrapu do Webpacku vyžaduje zavaděče, které jsme nainstalovali v první sekci. Nainstalovali jsme je pomocí npm, ale nyní je třeba nakonfigurovat Webpack, aby je používal.

  1. Nastavte nakladače v webpack.config.js. Váš konfigurační soubor je nyní kompletní a měl by odpovídat úryvku níže. Jedinou novou částí je zde modulesekce.

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

    Zde je rekapitulace toho, proč potřebujeme všechny tyto nakladače. style-loadervkládá CSS do <style>prvku na <head>stránce HTML, css-loaderpomáhá s používáním @importa url(), postcss-loaderje vyžadováno pro Autoprefixer a sass-loaderumožňuje nám používat Sass.

  2. Nyní importujme CSS Bootstrapu. src/scss/styles.scssChcete -li importovat všechny zdrojové Sass Bootstrapu, přidejte následující .

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

    Pokud chcete, můžete také importovat naše šablony stylů jednotlivě. Podrobnosti najdete v našich dokumentech k importu Sass .

  3. Dále načteme CSS a importujeme JavaScript Bootstrapu. src/js/main.jsChcete -li načíst CSS a importovat všechny JS Bootstrapu, přidejte následující . Popper bude automaticky importován přes Bootstrap.

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

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

    Zásuvné moduly JavaScript můžete také importovat jednotlivě podle potřeby, abyste snížili velikost balíků:

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

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

    Přečtěte si naše dokumenty JavaScript pro více informací o tom, jak používat pluginy Bootstrap.

  4. A máte hotovo! 🎉 S plně načteným zdrojovým kódem Sass a JS Bootstrapu by váš místní vývojový server měl nyní vypadat takto.

    Webpack dev server běžící s Bootstrap

    Nyní můžete začít přidávat jakékoli komponenty Bootstrap, které chcete použít. Nezapomeňte se podívat na kompletní ukázkový projekt Webpack, kde najdete, jak zahrnout další vlastní Sass a optimalizovat své sestavení importováním pouze částí CSS a JS Bootstrapu, které potřebujete.

Optimalizace výroby

V závislosti na vašem nastavení možná budete chtít implementovat některé další optimalizace zabezpečení a rychlosti užitečné pro spuštění projektu v produkci. Všimněte si, že tyto optimalizace nejsou aplikovány na ukázkový projekt Webpack a je na vás, abyste je implementovali.

Extrahování CSS

Výše nakonfigurovaná funkce pohodlně vysílá CSS do balíčku, takže není nutné style-loaderruční načítání souboru CSS . dist/index.htmlTento přístup však nemusí fungovat s přísnými zásadami zabezpečení obsahu a může se stát překážkou ve vaší aplikaci kvůli velké velikosti balíčku.

K oddělení CSS, abychom je mohli načíst přímo z dist/index.html, použijte mini-css-extract-loaderplugin Webpack.

Nejprve nainstalujte plugin:

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

Poté vytvořte instanci a použijte plugin v konfiguraci 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ětovném spuštění npm run buildbude nový soubor dist/main.css, který bude obsahovat všechny CSS importované pomocí src/js/main.js. Pokud nyní prohlížíte dist/index.htmlve svém prohlížeči, styl bude chybět, protože je nyní v dist/main.css. Vygenerovaný CSS můžete zahrnout 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>

Extrahování souborů SVG

CSS Bootstrapu obsahuje více odkazů na soubory SVG prostřednictvím vložených data:URI. Pokud pro svůj projekt definujete zásady zabezpečení obsahu, které blokují data:identifikátory URI pro obrázky, tyto soubory SVG se nenačtou. Tento problém můžete obejít extrahováním vložených souborů SVG pomocí funkce modulů aktiv Webpack.

Nakonfigurujte Webpack pro extrahování vložených souborů 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 npm run buildopětovném spuštění najdete soubory SVG extrahované do dist/iconsCSS a správně na ně odkazované.

Vidíte zde něco špatného nebo zastaralého? Otevřete problém na GitHubu . Potřebujete pomoc s odstraňováním problémů? Vyhledejte nebo zahajte diskusi na GitHubu.