Bootstrap & Webpack

Le guide officiel pour savoir comment inclure et regrouper les CSS et JavaScript de Bootstrap dans votre projet à l'aide de Webpack.

Sur cette page

Vous voulez sauter à la fin ? Téléchargez le code source et la démonstration de travail de ce guide à partir du référentiel twbs/examples . Vous pouvez également ouvrir l'exemple dans StackBlitz pour l'édition en direct.

Installer

Nous construisons un projet Webpack avec Bootstrap à partir de zéro, il y a donc des prérequis et des étapes préalables avant de pouvoir vraiment commencer. Ce guide nécessite que vous ayez installé Node.js et que vous soyez familiarisé avec le terminal.

Créez un dossier de projet et configurez npm. Nous allons créer le my-projectdossier et initialiser npm avec l' -yargument pour éviter qu'il ne nous pose toutes les questions interactives.
```
mkdir my-project && cd my-project
npm init -y
```
Installez Webpack. Ensuite, nous devons installer nos dépendances de développement Webpack : webpackpour le cœur de Webpack, webpack-cliafin que nous puissions exécuter les commandes Webpack à partir du terminal, et webpack-dev-serverainsi nous pouvons exécuter un serveur de développement local. Nous utilisons --save-devpour signaler que ces dépendances sont uniquement destinées au développement et non à la production.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Installez Bootstrap. Nous pouvons maintenant installer Bootstrap. Nous allons également installer Popper puisque nos listes déroulantes, popovers et infobulles en dépendent pour leur positionnement. Si vous ne prévoyez pas d'utiliser ces composants, vous pouvez omettre Popper ici.
```
npm i --save bootstrap @popperjs/core
```
Installez des dépendances supplémentaires. En plus de Webpack et Bootstrap, nous avons besoin de quelques dépendances supplémentaires pour importer et regrouper correctement les CSS et JS de Bootstrap avec Webpack. Ceux-ci incluent Sass, certains chargeurs et Autoprefixer.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Maintenant que toutes les dépendances nécessaires sont installées, nous pouvons commencer à créer les fichiers de projet et à importer Bootstrap.

Structuration du projet

Nous avons déjà créé le my-projectdossier et initialisé npm. Maintenant, nous allons également créer nos dossiers srcet pour compléter la structure du projet. distExécutez ce qui suit à partir de my-projectou créez manuellement la structure de dossiers et de fichiers indiquée ci-dessous.

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

Lorsque vous avez terminé, votre projet complet devrait ressembler à ceci :

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

À ce stade, tout est au bon endroit, mais Webpack ne fonctionnera pas car nous n'avons pas webpack.config.jsencore rempli le nôtre.

Configurer Webpack

Avec les dépendances installées et notre dossier de projet prêt pour que nous commencions à coder, nous pouvons maintenant configurer Webpack et exécuter notre projet localement.

Ouvrez webpack.config.jsdans votre éditeur. Comme il est vide, nous devrons y ajouter une configuration passe-partout afin de pouvoir démarrer notre serveur. Cette partie de la configuration indique à Webpack de rechercher le JavaScript de notre projet, où sortir le code compilé vers ( dist) et comment le serveur de développement doit se comporter (extraire du distdossier avec rechargement à chaud).
```
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
  }
}
```
Ensuite, nous remplissons notre dist/index.html. Il s'agit de la page HTML que Webpack chargera dans le navigateur pour utiliser le CSS et le JS fournis que nous y ajouterons dans les étapes ultérieures. Avant de pouvoir faire cela, nous devons lui donner quelque chose à rendre et inclure le outputJS de l'étape précédente.
```
<!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>
```
Nous incluons ici un peu de style Bootstrap avec le div class="container"et <button>pour que nous puissions voir quand le CSS de Bootstrap est chargé par Webpack.
Nous avons maintenant besoin d'un script npm pour exécuter Webpack. Ouvrez package.jsonet ajoutez le startscript ci-dessous (vous devriez déjà avoir le script de test). Nous utiliserons ce script pour démarrer notre serveur de développement Webpack local.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Et enfin, nous pouvons démarrer Webpack. Depuis le my-projectdossier de votre terminal, exécutez ce script npm nouvellement ajouté :
```
npm start
```

Dans la prochaine et dernière section de ce guide, nous allons configurer les chargeurs Webpack et importer tous les CSS et JavaScript de Bootstrap.

Importer le bootstrap

L'importation de Bootstrap dans Webpack nécessite les chargeurs que nous avons installés dans la première section. Nous les avons installés avec npm, mais Webpack doit maintenant être configuré pour les utiliser.

Configurez les chargeurs dans webpack.config.js. Votre fichier de configuration est maintenant terminé et doit correspondre à l'extrait ci-dessous. La seule nouvelle partie ici est la modulesection.

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

Voici un récapitulatif des raisons pour lesquelles nous avons besoin de tous ces chargeurs. style-loaderinjecte le CSS dans un <style>élément <head>de la page HTML, css-loaderaide à utiliser @importet url(), postcss-loaderest requis pour Autoprefixer et sass-loadernous permet d'utiliser Sass.

Maintenant, importons le CSS de Bootstrap. Ajoutez ce qui suit pour src/scss/styles.scssimporter toutes les sources Sass de Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Vous pouvez également importer nos feuilles de style individuellement si vous le souhaitez. Lisez nos documents d'importation Sass pour plus de détails.
Ensuite, nous chargeons le CSS et importons le JavaScript de Bootstrap. Ajoutez ce qui suit pour src/js/main.jscharger le CSS et importer tout le JS de Bootstrap. Popper sera importé automatiquement via Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Vous pouvez également importer des plugins JavaScript individuellement selon vos besoins pour limiter la taille des bundles :
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lisez nos documents JavaScript pour plus d'informations sur l'utilisation des plugins de Bootstrap.
Et tu as fini! 🎉 Avec les sources Sass et JS de Bootstrap entièrement chargées, votre serveur de développement local devrait maintenant ressembler à ceci.

Vous pouvez maintenant commencer à ajouter tous les composants Bootstrap que vous souhaitez utiliser. Assurez-vous de consulter l'exemple de projet Webpack complet pour savoir comment inclure des Sass personnalisés supplémentaires et optimiser votre build en important uniquement les parties du CSS et du JS de Bootstrap dont vous avez besoin.

Optimisations de production

En fonction de votre configuration, vous souhaiterez peut-être implémenter des optimisations de sécurité et de vitesse supplémentaires utiles pour exécuter le projet en production. Notez que ces optimisations ne sont pas appliquées sur le projet d'exemple Webpack et qu'il vous appartient de les implémenter.

Extraction CSS

Le style-loaderque nous avons configuré ci-dessus émet commodément CSS dans le bundle afin que le chargement manuel d'un fichier CSS dist/index.htmlne soit pas nécessaire. Cependant, cette approche peut ne pas fonctionner avec une politique de sécurité du contenu stricte et elle peut devenir un goulot d'étranglement dans votre application en raison de la taille importante de l'ensemble.

Pour séparer le CSS afin que nous puissions le charger directement depuis dist/index.html, utilisez le mini-css-extract-loaderplugin Webpack.

Tout d'abord, installez le plugin :

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

Ensuite, instanciez et utilisez le plugin dans la configuration 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
           },
           {

Après une npm run buildnouvelle exécution, il y aura un nouveau fichier dist/main.css, qui contiendra tous les CSS importés par src/js/main.js. Si vous visualisez dist/index.htmldans votre navigateur maintenant, le style sera manquant, car il est maintenant dans dist/main.css. Vous pouvez inclure le CSS généré dist/index.htmlcomme ceci :

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

Extraction de fichiers SVG

Le CSS de Bootstrap inclut plusieurs références aux fichiers SVG via des data:URI en ligne. Si vous définissez une politique de sécurité du contenu pour votre projet qui bloque data:les URI des images, ces fichiers SVG ne se chargeront pas. Vous pouvez contourner ce problème en extrayant les fichiers SVG en ligne à l'aide de la fonction de modules d'actifs de Webpack.

Configurez Webpack pour extraire les fichiers SVG intégrés comme ceci :

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

Après avoir exécuté npm run buildà nouveau, vous trouverez les fichiers SVG extraits dist/iconset correctement référencés à partir de CSS.

Vous voyez quelque chose d'erroné ou d'obsolète ici ? Veuillez ouvrir un problème sur GitHub . Besoin d'aide pour le dépannage ? Recherchez ou démarrez une discussion sur GitHub.