Salta al contenuto principale Passa alla navigazione dei documenti
Check
in English

Bootstrap e Webpack

La guida ufficiale su come includere e raggruppare CSS e JavaScript di Bootstrap nel tuo progetto usando Webpack.

Su questa pagina
Vuoi saltare alla fine? Scarica il codice sorgente e la demo funzionante per questa guida dal repository twbs/examples . Puoi anche aprire l'esempio in StackBlitz per la modifica dal vivo.

Impostare

Stiamo costruendo da zero un progetto Webpack con Bootstrap, quindi ci sono alcuni prerequisiti e passaggi preliminari prima di poter davvero iniziare. Questa guida richiede l'installazione di Node.js e una certa familiarità con il terminale.

  1. Crea una cartella di progetto e imposta npm. Creeremo la my-projectcartella e inizializzeremo npm con l' -yargomento per evitare che ci pongano tutte le domande interattive.

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

  2. Installa Webpack. Quindi dobbiamo installare le nostre dipendenze di sviluppo Webpack: webpackper il nucleo di Webpack, webpack-clipossiamo eseguire i comandi Webpack dal terminale e webpack-dev-serverquindi possiamo eseguire un server di sviluppo locale. Usiamo --save-devper segnalare che queste dipendenze sono solo per uso di sviluppo e non per la produzione.

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

  3. Installa Bootstrap. Ora possiamo installare Bootstrap. Installeremo anche Popper poiché i nostri menu a discesa, popover e suggerimenti dipendono da esso per il loro posizionamento. Se non prevedi di utilizzare questi componenti, puoi omettere Popper qui.

    npm i --save bootstrap @popperjs/core

  4. Installa dipendenze aggiuntive. Oltre a Webpack e Bootstrap, abbiamo bisogno di alcune dipendenze in più per importare e raggruppare correttamente CSS e JS di Bootstrap con Webpack. Questi includono Sass, alcuni caricatori e Autoprefixer.

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

Ora che abbiamo installato tutte le dipendenze necessarie, possiamo metterci al lavoro creando i file di progetto e importando Bootstrap.

Struttura del progetto

Abbiamo già creato la my-projectcartella e inizializzato npm. Ora creeremo anche le nostre cartelle srce per completare la struttura del progetto. distEseguire quanto segue da my-projecto creare manualmente la struttura di cartelle e file mostrata di seguito.

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

Quando hai finito, il tuo progetto completo dovrebbe assomigliare a questo:

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

A questo punto, tutto è al posto giusto, ma Webpack non funzionerà perché non abbiamo ancora compilato il nostro webpack.config.js.

Configura Webpack

Con le dipendenze installate e la nostra cartella del progetto pronta per iniziare la codifica, ora possiamo configurare Webpack ed eseguire il nostro progetto in locale.

  1. Apri webpack.config.jsnel tuo editor. Dal momento che è vuoto, dovremo aggiungere alcune configurazioni standard ad esso in modo da poter avviare il nostro server. Questa parte della configurazione dice a Webpack di cercare JavaScript del nostro progetto, dove inviare il codice compilato in ( dist) e come dovrebbe comportarsi il server di sviluppo (estrazione dalla distcartella con ricarica a caldo).

    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. Successivamente riempiamo il nostro dist/index.html. Questa è la pagina HTML che Webpack caricherà nel browser per utilizzare CSS e JS in bundle che aggiungeremo ad essa nei passaggi successivi. Prima di poterlo fare, dobbiamo dargli qualcosa per il rendering e includere il outputJS dal passaggio precedente.

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

    Stiamo includendo un po' di stile Bootstrap qui con div class="container"e <button>in modo da vedere quando il CSS di Bootstrap viene caricato da Webpack.

  3. Ora abbiamo bisogno di uno script npm per eseguire Webpack. Apri package.jsone aggiungi lo startscript mostrato di seguito (dovresti già avere lo script di test). Useremo questo script per avviare il nostro server di sviluppo Webpack locale.

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

  4. E infine, possiamo avviare Webpack. Dalla my-projectcartella nel tuo terminale, esegui lo script npm appena aggiunto:

    npm start
    Server di sviluppo Webpack in esecuzione

Nella prossima e ultima sezione di questa guida, imposteremo i caricatori Webpack e importeremo tutti i CSS e JavaScript di Bootstrap.

Importa Bootstrap

L'importazione di Bootstrap in Webpack richiede i caricatori installati nella prima sezione. Li abbiamo installati con npm, ma ora Webpack deve essere configurato per utilizzarli.

  1. Configura i caricatori in webpack.config.js. Il tuo file di configurazione è ora completo e dovrebbe corrispondere allo snippet di seguito. L'unica parte nuova qui è la modulesezione.

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

    Ecco un riepilogo del motivo per cui abbiamo bisogno di tutti questi caricatori. style-loaderinietta il CSS in un <style>elemento nella <head>pagina HTML, css-loaderaiuta con l'uso di @importe url(), postcss-loaderè richiesto per Autoprefixer e sass-loaderci permette di usare Sass.

  2. Ora importiamo il CSS di Bootstrap. Aggiungi quanto segue a src/scss/styles.scssper importare tutti i sorgenti Sass di Bootstrap.

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

    Puoi anche importare i nostri fogli di stile singolarmente, se lo desideri. Leggi i nostri documenti di importazione Sass per i dettagli.

  3. Quindi carichiamo il CSS e importiamo JavaScript di Bootstrap. Aggiungi quanto segue per src/js/main.jscaricare il CSS e importare tutto il JS di Bootstrap. Popper verrà importato automaticamente tramite Bootstrap.

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

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

    Puoi anche importare i plug-in JavaScript individualmente secondo necessità per ridurre le dimensioni dei pacchetti:

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

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

    Leggi i nostri documenti JavaScript per ulteriori informazioni su come utilizzare i plugin di Bootstrap.

  4. E hai finito! 🎉 Con i sorgenti Sass e JS di Bootstrap completamente caricati, il tuo server di sviluppo locale dovrebbe ora avere questo aspetto.

    Server di sviluppo Webpack in esecuzione con Bootstrap

    Ora puoi iniziare ad aggiungere qualsiasi componente Bootstrap che desideri utilizzare. Assicurati di controllare il progetto di esempio Webpack completo per come includere Sass personalizzato aggiuntivo e ottimizzare la tua build importando solo le parti di CSS e JS di Bootstrap di cui hai bisogno.

Ottimizzazioni della produzione

A seconda della configurazione, potresti voler implementare alcune ottimizzazioni di sicurezza e velocità aggiuntive utili per eseguire il progetto in produzione. Si noti che queste ottimizzazioni non vengono applicate al progetto di esempio Webpack e l'implementazione spetta all'utente.

Estrazione CSS

La style-loaderconfigurazione precedente emette convenientemente CSS nel pacchetto in modo che dist/index.htmlnon sia necessario caricare manualmente un file CSS. Tuttavia, questo approccio potrebbe non funzionare con una politica di sicurezza dei contenuti rigorosa e potrebbe diventare un collo di bottiglia nell'applicazione a causa delle grandi dimensioni del pacchetto.

Per separare il CSS in modo da poterlo caricare direttamente da dist/index.html, usa il mini-css-extract-loaderplugin Webpack.

Innanzitutto, installa il plug-in:

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

Quindi istanziare e utilizzare il plug-in nella configurazione del 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
           },
           {

Dopo l'esecuzione di npm run buildnuovo, ci sarà un nuovo file dist/main.css, che conterrà tutti i CSS importati da src/js/main.js. Se visualizzi dist/index.htmlora nel tuo browser, lo stile mancherà, poiché ora è in dist/main.css. Puoi includere il CSS generato in dist/index.htmlquesto modo:

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

Estrazione di file SVG

Il CSS di Bootstrap include più riferimenti ai file SVG tramite data:URI inline. Se definisci una politica di sicurezza dei contenuti per il tuo progetto che blocca data:gli URI per le immagini, questi file SVG non verranno caricati. Puoi aggirare questo problema estraendo i file SVG in linea utilizzando la funzione dei moduli di risorse di Webpack.

Configura Webpack per estrarre i file SVG inline come questo:

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

Dopo aver eseguito di npm run buildnuovo, troverai i file SVG estratti dist/iconse correttamente referenziati da CSS.

Vedi qualcosa che non va o non è aggiornato qui? Si prega di aprire un problema su GitHub . Hai bisogno di aiuto per la risoluzione dei problemi? Cerca o avvia una discussione su GitHub.