Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

Bootstrap & Paquet ya Web

Guide officiel ya ndenge ya ko kotisa pe ko bundle CSS na JavaScript ya Bootstrap na projet na yo na nzela ya Webpack.

Na lokasa oyo
Olingi kopumbwa tii na nsuka? Télécharger code source na démonstration ya mosala pona guide oyo na dépôt ya twbs/exemples . Okoki pe kofungola ndakisa na StackBlitz pona édition en direct.

Kobongisa

Tozali kotonga projet ya Webpack na Bootstrap à partir ya zéro, yango wana ezali na mwa ba conditions préalables mpe na ba étapes ya liboso avant tokoka vraiment kobanda. Guide oyo esengi ozala na Node.js installé pe mua familiarité na terminal.

  1. Bosala dossier ya projet pe bo setup npm. Tokosala my-projectdossier pe toko initialiser npm na -yargument po e éviter etuna biso ba questions interactives nionso.

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

  2. Botia Webpack na esika na yango. Na sima esengeli to installer ba dépendances na biso ya développement ya Webpack : webpackpona noyau ya Webpack, webpack-clipo tosala ba commandes ya Webpack depuis terminal, pe webpack-dev-serverpo to tambuisa serveur ya développement local. Tosalelaka --save-devpona kopesa signal que ba dépendances wana ezali kaka pona usage ya développement et non pona production.

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

  3. Botia na esika bakomi Bootstrap. Sikoyo tokoki ko installer Bootstrap. Toko installer pe Popper puisque ba dropdowns na biso, ba popovers, na ba outils e dépend na yango pona positionnement na bango. Soki ozali na plan te ya kosalela ba composants wana, okoki ko omiter Popper awa.

    npm i --save bootstrap @popperjs/core

  4. Botia ba dépendances ya kobakisa. En plus ya Webpack na Bootstrap, toza na besoin ya mua ba dépendances mosusu pona ko importer pe ko bundle correctement CSS na JS ya Bootstrap na Webpack. Yango ezali na kati ya Sass, ba chargeurs mosusu, mpe Autoprefixer.

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

Sikoyo lokola tozali na ba dépendances nionso esengeli installé, tokoki kozua mosala ya kosala ba fichiers ya projet mpe ko importer Bootstrap.

Bokeli ya mosala

Tosi tosala my-projectdossier pe to initialiser npm. Sikoyo tokosala pe ba srcdossiers na biso na distpona ko arrondir structure ya projet. Salá oyo elandi uta na my-project, to sala na mabɔkɔ ebongiseli ya dosyé mpe ya fisyé oyo emonisami awa na nse.

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

Ntango osilisi, mosala na yo mobimba esengeli kozala boye:

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

Na esika oyo, makambo nyonso ezali na esika oyo ebongi, kasi Webpack ekosala te mpo totondisi webpack.config.jsnaino te oyo ya biso.

Bobongisa Webpack

Na ba dépendances installées mpe dossier ya projet na biso prêt mpo tobanda kosala codage, tokoki sikoyo ko configurer Webpack mpe ko tambuisa projet na biso localement.

  1. Fungola webpack.config.jsna éditeur na yo. Lokola ezali vide, ekosenga tobakisa mwa config ya boilerplate na yango mpo tokoka kobanda serveur na biso. Eteni oyo ya config eyebisi Webpack bazalaki koluka JavaScript ya projet na biso, esika nini kobimisa code compilé na ( dist), mpe ndenge nini serveur ya développement esengeli e se comporter (kobenda na distdossier na recharge ya moto).

    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. Na nsima tozali kotondisa dist/index.html. Oyo ezali page HTML Webpack eko charger na navigateur pona ko utiliser CSS na JS bundled toko bakisa na yango na ba étapes ya sima. Yambo tosala yango, esengeli topesa yango eloko ya ko rendre mpe totia outputJS oyo ewutaki na étape oyo eleki.

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

    Tozali ko inclure mua styling ya Bootstrap awa na div class="container"pe <button>po to mona tango CSS ya Bootstrap ezo charger na Webpack.

  3. Sikoyo tozali na besoin ya script ya npm pona ko tambuisa Webpack. Fungola package.jsonmpe bakisa startscript oyo elakisami awa na nse (esengeli ozala déjà na script ya test). Tokosalela script oyo mpo na kobanda serveur ya dev ya Webpack ya esika na biso.

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

  4. Mpe na nsuka, tokoki kobanda Webpack. Na my-projectdossier na terminal na yo, sala script wana ya sika ya npm oyo ebakisami:

    npm start
    Webpack dev serveur ezali kosala

Na eteni elandi mpe ya nsuka ya buku oyo, tokobongisa ba chargeurs ya Webpack mpe tokokɔtisa CSS mpe JavaScript nyonso ya Bootstrap.

Kokɔtisa na Bootstrap

Ko kotisa Bootstrap na Webpack esengaka ba chargeurs oyo to installaki na eteni ya liboso. To installer bango na npm, mais sikoyo Webpack esengeli ezala configuré po esalela bango.

  1. Bobongisa ba chargeurs na webpack.config.js. Fisyé ya bobongisi na yo esili sikawa mpe esengeli kokokana na eteni oyo ezali awa na nse. Eteni ya sika kaka moko awa ezali moduleeteni.

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

    Tala recap ya pourquoi toza na besoin ya ba chargeurs oyo nionso. style-loaderinjectaka CSS na <style>élément moko na <head>ya ya page HTML, css-loaderesalisaka na kosalela @importmpe url(), postcss-loaderesengeli mpo na Autoprefixer, mpe sass-loaderepesaka biso nzela ya kosalela Sass.

  2. Sikoyo, to importer CSS ya Bootstrap. Bakisa oyo elandi na mpo src/scss/styles.scssna kokɔtisa nyonso ya Bootstrap ya source Sass.

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

    Okoki pe ko importer ba feuilles de style na biso moko moko soki olingi. Tanga ba docs na biso ya import ya Sass pona ba détails.

  3. Na sima to charger CSS pe to importer JavaScript ya Bootstrap. Bakisa oyo elandi na src/js/main.jsmpo na kozwa CSS mpe kokɔtisa JS nyonso ya Bootstrap. Popper ekozala importé automatiquement na nzela ya Bootstrap.

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

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

    Okoki mpe kokɔtisa ba plugins ya JavaScript mokomoko soki esengeli mpo na kobatela bonene ya ba paquets na nse:

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

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

    Tanga ba docs na biso ya JavaScript pona ba informations ebele na ndenge ya kosalela ba plugins ya Bootstrap.

  4. Mpe osilisi! 🎉 Na source ya Bootstrap Sass na JS entièrement chargé, serveur ya développement local na yo esengeli sikoyo ezala boye.

    Serveur dev ya Webpack oyo ezali kosala na Bootstrap

    Sikoyo okoki kobanda kobakisa ba composants nionso ya Bootstrap oyo olingi kosalela. Bozala sûr ya kotala projet ya exemple ya Webpack mobimba pona ndenge ya ko inclure Sass personnalisé ya kobakisa pe ko optimiser build na yo en important kaka ba parties ya CSS na JS ya Bootstrap oyo oza na besoin na yango.

Ba optimisations ya production

En fonction ya configuration na yo, okoki kolinga ko mettre en œuvre mua ba optimisations ya sécurité na vitesse ya kobakisa oyo ezali utile pona ko diriger projet na production. Yeba ete ba optimisations oyo esalemi te na projet ya ndakisa ya Webpack mpe ezali na yo mpo na kosalela.

Kobimisa CSS

The style-loaderto configuré likolo convenablement ebimisaka CSS na kati ya bundle mpo manuellement ko charger fichier CSS na dist/index.htmlezali na ntina te. Ndenge oyo ekoki kosala te na Politiki ya Bobateli ya Makambo ya makasi, nzokande, mpe ekoki kokóma likambo ya kokangama na programɛ na yo mpo na bonene ya liboke ya monene.

Mpo na kokabola CSS mpo ete tokoka kokɔtisa yango mbala moko na dist/index.html, salelá mini-css-extract-loaderplugin ya Webpack.

Ya liboso, tyá plugin yango:

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

Na nsima, salá ndakisa mpe salelá plugin yango na configuration ya 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
           },
           {

Nsima ya kosala npm run buildlisusu, ekozala na fisyé ya sika dist/main.css, oyo ekozala na CSS nyonso oyo ekotisami na src/js/main.js. Soki otali dist/index.htmlna navigateur na yo sikoyo, style ekozala te, ndenge ezali sikoyo na dist/main.css. Okoki kokɔtisa CSS oyo esalemi na dist/index.htmlndenge oyo:

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

Kobimisa ba fichiers SVG

CSS ya Bootstrap ezali na ba références ebele na ba fichiers SVG na nzela ya ba data:URI ya kati. Soki olimboli Politiki ya Bobateli ya Makambo mpo na mosala na yo oyo ekangaka data:ba URI mpo na bilili, boye ba fisyé oyo ya SVG ekozwa te. Okoki koleka na mokakatano oyo na kobimisaka ba fichiers SVG ya kati na nzela ya fonctionnalité ya ba modules ya biloko ya Webpack.

Configurer Webpack pona kobimisa ba fichiers SVG inline boye:

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

Sima ya kosala npm run buildlisusu, okokuta ba fichiers SVG oyo ezuami na kati dist/iconsmpe e référencé malamu na CSS.

Omoni eloko moko ya mabe to esi esila awa? Svp fungola likambo moko na GitHub . Ozali na mposa ya lisalisi mpo na kosilisa mikakatano? Luka to banda lisolo na GitHub.