Treci la conținutul principal Treceți la navigarea documentelor
Check
in English

Bootstrap și Webpack

Ghidul oficial despre cum să includeți și să grupați CSS și JavaScript din Bootstrap în proiectul dvs. folosind Webpack.

Pe aceasta pagina
Vrei să sari până la sfârșit? Descărcați codul sursă și demonstrația de lucru pentru acest ghid din depozitul twbs/examples . De asemenea, puteți deschide exemplul în StackBlitz pentru editare live.

Înființat

Construim un proiect Webpack cu Bootstrap de la zero, așa că există câteva cerințe preliminare și pași inițiali înainte de a putea începe cu adevărat. Acest ghid necesită să aveți instalat Node.js și să fiți familiarizat cu terminalul.

  1. Creați un folder de proiect și configurați npm. Vom crea my-projectfolderul și vom inițializa npm cu -yargumentul pentru a evita ca acesta să ne pună toate întrebările interactive.

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

  2. Instalați Webpack. Apoi, trebuie să instalăm dependențele noastre de dezvoltare Webpack: webpackpentru nucleul Webpack, webpack-cliastfel încât să putem rula comenzi Webpack de la terminal și webpack-dev-serverastfel să putem rula un server de dezvoltare local. Folosim --save-devsă semnalăm că aceste dependențe sunt doar pentru dezvoltare și nu pentru producție.

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

  3. Instalați Bootstrap. Acum putem instala Bootstrap. De asemenea, vom instala Popper, deoarece meniurile noastre derulante, popover-urile și sfaturile de instrumente depind de el pentru poziționarea lor. Dacă nu intenționați să utilizați acele componente, puteți omite Popper aici.

    npm i --save bootstrap @popperjs/core

  4. Instalați dependențe suplimentare. Pe lângă Webpack și Bootstrap, avem nevoie de încă câteva dependențe pentru a importa și a combina corect CSS și JS Bootstrap cu Webpack. Acestea includ Sass, unele încărcătoare și Autoprefixer.

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

Acum că avem toate dependențele necesare instalate, ne putem pune pe treabă creând fișierele de proiect și importând Bootstrap.

Structura proiectului

Am creat deja my-projectfolderul și am inițializat npm. Acum vom crea srcși distfolderele noastre și pentru a completa structura proiectului. Rulați următoarele din my-project, sau creați manual folderul și structura fișierelor prezentate mai jos.

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

Când ați terminat, proiectul dvs. complet ar trebui să arate astfel:

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

În acest moment, totul este la locul potrivit, dar Webpack nu va funcționa deoarece nu am completat webpack.config.jsîncă.

Configurați Webpack

Cu dependențele instalate și folderul nostru de proiect gata pentru ca noi să începem codificarea, acum putem configura Webpack și rula proiectul nostru local.

  1. Deschideți webpack.config.jsîn editorul dvs. Deoarece este gol, va trebui să îi adăugăm niște configurații standard, astfel încât să putem porni serverul nostru. Această parte a configurației spune Webpack-ului să caute JavaScript-ul proiectului nostru, unde să scoată codul compilat către ( dist) și cum ar trebui să se comporte serverul de dezvoltare (trag din distfolderul cu reîncărcare la cald).

    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. În continuare completăm dist/index.html. Aceasta este pagina HTML pe care Webpack-ul va fi încărcat în browser pentru a utiliza CSS și JS pe care îl vom adăuga în pașii ulterioare. Înainte de a putea face asta, trebuie să îi dăm ceva pentru a reda și să includem outputJS-ul de la pasul anterior.

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

    Includem un pic de stil Bootstrap aici cu div class="container"și , <button>astfel încât să vedem când CSS-ul Bootstrap este încărcat de Webpack.

  3. Acum avem nevoie de un script npm pentru a rula Webpack. Deschideți package.jsonși adăugați startscriptul afișat mai jos (ar trebui să aveți deja scriptul de testare). Vom folosi acest script pentru a porni serverul nostru local de dezvoltare Webpack.

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

  4. Și, în sfârșit, putem porni Webpack. Din my-projectfolderul din terminalul dvs., rulați acel script npm nou adăugat:

    npm start
    Serverul de dezvoltare Webpack rulează

În următoarea și ultima secțiune a acestui ghid, vom configura încărcătoarele Webpack și vom importa toate CSS și JavaScript din Bootstrap.

Import Bootstrap

Importarea Bootstrap în Webpack necesită încărcătoarele pe care le-am instalat în prima secțiune. Le-am instalat cu npm, dar acum Webpack trebuie configurat pentru a le folosi.

  1. Configurați încărcătoarele în webpack.config.js. Fișierul dvs. de configurare este acum complet și ar trebui să se potrivească cu fragmentul de mai jos. Singura parte nouă aici este modulesecțiunea.

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

    Iată o recapitulare a motivului pentru care avem nevoie de toate aceste încărcătoare. style-loaderinjectează CSS într-un <style>element din <head>pagina HTML, css-loaderajută la utilizarea @importși url(), postcss-loadereste necesar pentru Autoprefixer și sass-loaderne permite să folosim Sass.

  2. Acum, să importăm CSS-ul Bootstrap. Adăugați următoarele la src/scss/styles.scsspentru a importa toate sursele Bootstrap Sass.

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

    De asemenea, puteți importa foile noastre de stil individual dacă doriți. Citiți documentele noastre de import Sass pentru detalii.

  3. Apoi încărcăm CSS și importăm JavaScript-ul Bootstrap. Adăugați următoarele pentru src/js/main.jsa încărca CSS-ul și a importa toate JS-urile Bootstrap. Popper va fi importat automat prin Bootstrap.

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

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

    De asemenea, puteți importa pluginuri JavaScript individual, după cum este necesar, pentru a menține dimensiunile pachetelor mai mici:

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

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

    Citiți documentele noastre JavaScript pentru mai multe informații despre cum să utilizați pluginurile Bootstrap.

  4. Și ai terminat! 🎉 Cu sursa Bootstrap Sass și JS complet încărcate, serverul tău de dezvoltare local ar trebui acum să arate așa.

    Serverul de dezvoltare Webpack rulează cu Bootstrap

    Acum puteți începe să adăugați orice componente Bootstrap pe care doriți să le utilizați. Asigurați-vă că consultați exemplul de proiect Webpack complet pentru a afla cum să includeți Sass personalizat suplimentar și să vă optimizați construcția importând numai părțile CSS și JS Bootstrap de care aveți nevoie.

Optimizări de producție

În funcție de configurația dvs., este posibil să doriți să implementați câteva optimizări suplimentare de securitate și viteză utile pentru rularea proiectului în producție. Rețineți că aceste optimizări nu sunt aplicate pe proiectul exemplu Webpack și sunt la latitudinea dvs. să le implementați.

Extragerea CSS

Configurația style-loaderpe care am configurat-o mai sus emite CSS în mod convenabil în pachet, astfel încât să nu fie necesară încărcarea manuală a unui fișier CSS dist/index.html. Cu toate acestea, această abordare poate să nu funcționeze cu o politică strictă de securitate a conținutului și poate deveni un blocaj în aplicația dvs. din cauza dimensiunii mari a pachetului.

Pentru a separa CSS-ul astfel încât să îl putem încărca direct din dist/index.html, utilizați mini-css-extract-loaderpluginul Webpack.

Mai întâi, instalați pluginul:

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

Apoi instanțiați și utilizați pluginul în configurația 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
           },
           {

După rularea npm run builddin nou, va exista un fișier nou dist/main.css, care va conține toate CSS-urile importate de src/js/main.js. Dacă vizualizați dist/index.htmlacum în browser, stilul va lipsi, așa cum este acum în dist/main.css. Puteți include CSS-ul generat dist/index.htmlastfel:

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

Extragerea fișierelor SVG

CSS-ul Bootstrap include mai multe referințe la fișiere SVG prin intermediul data:URI-urilor inline. Dacă definiți o politică de securitate a conținutului pentru proiectul dvs. care blochează data:URI-urile pentru imagini, atunci aceste fișiere SVG nu se vor încărca. Puteți rezolva această problemă extragând fișierele SVG în linie utilizând caracteristica modulelor de active ale Webpack.

Configurați Webpack pentru a extrage fișiere SVG inline astfel:

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

După ce rulați npm run builddin nou, veți găsi fișierele SVG extrase dist/iconsși referite corect din CSS.

Vedeți ceva în neregulă sau depășit aici? Vă rugăm să deschideți o problemă pe GitHub . Aveți nevoie de ajutor pentru depanare? Căutați sau începeți o discuție pe GitHub.