Saltar al contingut principal Saltar a la navegació de documents
Check
in English

Bootstrap i Webpack

La guia oficial sobre com incloure i agrupar CSS i JavaScript de Bootstrap al vostre projecte mitjançant Webpack.

En aquesta pàgina
Vols saltar fins al final? Baixeu el codi font i la demostració de treball d'aquesta guia des del dipòsit twbs/examples . També podeu obrir l'exemple a StackBlitz per editar-lo en directe.

Configuració

Estem construint un projecte Webpack amb Bootstrap des de zero, de manera que hi ha alguns requisits previs i passos inicials abans de poder començar realment. Aquesta guia requereix que tingueu instal·lat Node.js i una mica de familiaritat amb el terminal.

  1. Creeu una carpeta de projecte i configureu npm. Crearem la my-projectcarpeta i inicialitzarem npm amb l' -yargument per evitar que ens faci totes les preguntes interactives.

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

  2. Instal·leu Webpack. A continuació, hem d'instal·lar les nostres dependències de desenvolupament Webpack: webpackper al nucli de Webpack, webpack-cliperquè puguem executar ordres Webpack des del terminal, i webpack-dev-serveraixí poder executar un servidor de desenvolupament local. Utilitzem --save-devper indicar que aquestes dependències només són per al desenvolupament i no per a la producció.

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

  3. Instal·leu Bootstrap. Ara podem instal·lar Bootstrap. També instal·larem Popper, ja que els nostres menús desplegables, finestres emergents i informació sobre eines en depenen per al seu posicionament. Si no teniu previst utilitzar aquests components, podeu ometre Popper aquí.

    npm i --save bootstrap @popperjs/core

  4. Instal·leu dependències addicionals. A més de Webpack i Bootstrap, necessitem unes quantes dependències més per importar i agrupar correctament el CSS i el JS de Bootstrap amb Webpack. Aquests inclouen Sass, alguns carregadors i Autoprefixer.

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

Ara que tenim totes les dependències necessàries instal·lades, podem posar-nos a treballar creant els fitxers del projecte i important Bootstrap.

Estructura del projecte

Ja hem creat la my-projectcarpeta i hem inicialitzat npm. Ara també crearem les nostres carpetes srci per completar l'estructura del projecte. distExecuteu el següent des de my-project, o creeu manualment la carpeta i l'estructura de fitxers que es mostren a continuació.

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

Quan hàgiu acabat, el vostre projecte complet hauria de ser així:

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

En aquest moment, tot està al lloc correcte, però Webpack no funcionarà perquè encara no hem omplert el nostre webpack.config.js.

Configura Webpack

Amb les dependències instal·lades i la nostra carpeta de projectes preparada perquè comencem a codificar, ara podem configurar Webpack i executar el nostre projecte localment.

  1. Obre webpack.config.jsal teu editor. Com que està en blanc, haurem d'afegir-hi una configuració general perquè puguem iniciar el nostre servidor. Aquesta part de la configuració indica que Webpack havia de buscar el JavaScript del nostre projecte, on sortir el codi compilat a ( dist) i com hauria de comportar-se el servidor de desenvolupament (extraient de la distcarpeta amb la recàrrega en calent).

    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. A continuació omplim el nostre dist/index.html. Aquesta és la pàgina HTML que Webpack carregarà al navegador per utilitzar el CSS i el JS que hi afegirem en passos posteriors. Abans de poder fer-ho, hem de donar-li alguna cosa per renderitzar i incloure el outputJS del pas 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>

    Estem inclòs una mica d'estil de Bootstrap aquí amb div class="container"i <button>perquè vegem quan Webpack carrega el CSS de Bootstrap.

  3. Ara necessitem un script npm per executar Webpack. Obriu package.jsoni afegiu l' startscript que es mostra a continuació (ja hauríeu de tenir l'script de prova). Utilitzarem aquest script per iniciar el nostre servidor de desenvolupament Webpack local.

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

  4. I finalment, podem iniciar Webpack. Des de la my-projectcarpeta del vostre terminal, executeu aquest nou script npm afegit:

    npm start
    Servidor de desenvolupament Webpack en execució

A la següent i darrera secció d'aquesta guia, configurarem els carregadors de Webpack i importarem tots els CSS i JavaScript de Bootstrap.

Importa Bootstrap

La importació de Bootstrap a Webpack requereix els carregadors que hem instal·lat a la primera secció. Els hem instal·lat amb npm, però ara cal configurar Webpack per utilitzar-los.

  1. Configura els carregadors a webpack.config.js. El vostre fitxer de configuració s'ha completat i hauria de coincidir amb el fragment següent. L'única part nova aquí és la modulesecció.

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

    Aquí teniu un resum de per què necessitem tots aquests carregadors. style-loaderinjecta el CSS en un <style>element <head>de la pàgina HTML, css-loaderajuda a utilitzar @importi url(), postcss-loaderés necessari per a l'Autoprefixer i sass-loaderens permet utilitzar Sass.

  2. Ara, importem el CSS de Bootstrap. Afegiu el següent a src/scss/styles.scssper importar tot el Sass d'origen de Bootstrap.

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

    També podeu importar els nostres fulls d'estil individualment si voleu. Llegiu els nostres documents d'importació de Sass per obtenir més informació.

  3. A continuació, carreguem el CSS i importem el JavaScript de Bootstrap. Afegiu el següent a src/js/main.jsper carregar el CSS i importar tots els JS de Bootstrap. Popper s'importarà automàticament mitjançant Bootstrap.

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

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

    També podeu importar connectors de JavaScript individualment segons sigui necessari per reduir les mides dels paquets:

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

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

    Llegiu els nostres documents de JavaScript per obtenir més informació sobre com utilitzar els connectors de Bootstrap.

  4. I ja has acabat! 🎉 Amb la font Sass i JS de Bootstrap completament carregades, ara el vostre servidor de desenvolupament local hauria de tenir aquest aspecte.

    Servidor de desenvolupament Webpack que s'executa amb Bootstrap

    Ara podeu començar a afegir qualsevol component Bootstrap que vulgueu utilitzar. Assegureu-vos de consultar el projecte d'exemple Webpack complet per saber com incloure Sass personalitzat addicional i optimitzar la vostra compilació important només les parts del CSS i JS de Bootstrap que necessiteu.

Optimitzacions de producció

Depenent de la vostra configuració, és possible que vulgueu implementar algunes optimitzacions addicionals de seguretat i velocitat útils per executar el projecte en producció. Tingueu en compte que aquestes optimitzacions no s'apliquen al projecte d'exemple de Webpack i que les podeu implementar.

Extracció de CSS

El style-loaderque hem configurat anteriorment emet còmodament CSS al paquet, de manera que dist/index.htmlno cal carregar manualment un fitxer CSS. Tanmateix, és possible que aquest enfocament no funcioni amb una política de seguretat de contingut estricta i pot convertir-se en un coll d'ampolla a la vostra aplicació a causa de la gran mida del paquet.

Per separar el CSS de manera que el puguem carregar directament des de dist/index.html, utilitzeu el mini-css-extract-loaderconnector Webpack.

Primer, instal·leu el connector:

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

A continuació, instància i utilitzeu el connector a la configuració de 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
           },
           {

Després d'executar -se de npm run buildnou, hi haurà un fitxer nou dist/main.css, que contindrà tots els CSS importats per src/js/main.js. Si visualitzeu dist/index.htmlara al vostre navegador, faltarà l'estil, tal com està ara a dist/main.css. Podeu incloure el CSS generat de la dist/index.htmlsegüent manera:

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

Extracció de fitxers SVG

El CSS de Bootstrap inclou diverses referències a fitxers SVG mitjançant data:URIs en línia. Si definiu una política de seguretat de contingut per al vostre projecte que bloqueja els data:URI de les imatges, aquests fitxers SVG no es carregaran. Podeu solucionar aquest problema extraient els fitxers SVG en línia mitjançant la funció de mòduls d'actius de Webpack.

Configureu Webpack per extreure fitxers SVG en línia com aquest:

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

Després d'executar -se de npm run buildnou, trobareu els fitxers SVG extrets dist/iconsi referenciats correctament de CSS.

Veus alguna cosa malament o no actualitzada? Obriu un problema a GitHub . Necessites ajuda per resoldre problemes? Cerca o inicia una discussió a GitHub.