Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
Check
in English

Bootstrap & Nyatakakadzraɖoƒe ƒe Akpa

Mɔfiame si dziɖuɖua ɖo na alesi nàde Bootstrap ƒe CSS kple JavaScript wò dɔa me ahaƒoe nu ƒu to Webpack zazã me.

Le axa sia dzi
Àdi be yeadzo ayi nuwuwua? Wɔ mɔfiame sia ƒe dzɔtsoƒe ƒe nuŋɔŋlɔ kple dɔwɔwɔ ƒe wɔwɔfia tso twbs/examples ƒe nudzraɖoƒe . Àteŋu aʋu kpɔɖeŋua hã le StackBlitz me hena ɖɔɖɔɖo le agbe me.

Ɖo anyi

Míele Webpack dɔ aɖe tum kple Bootstrap tso gɔmedzedzea me ke, eyata nudidi aɖewo li do ŋgɔ kple afɔɖeɖe siwo woawɔ do ŋgɔ hafi míate ŋu adze egɔme ŋutɔŋutɔ. Mɔfiame sia bia be nàda Node.js ɖe wò kɔmpiuta dzi eye nànya nu tso terminal la ŋu vie.

  1. Wɔ dɔ ƒe agbalẽdzraɖoƒe eye nàɖo npm. Míawɔ my-projectagbalẽdzraɖoƒea eye míadze npm gɔme kple -ynyaʋiʋlia be wòagabia nya siwo katã wotsɔ wɔa dɔe la mí o.

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

  2. De Webpack la ɖe wò kɔmpiuta dzi. Eyome ele be míade míaƒe Webpack ŋgɔyiyi ƒe ŋuɖoɖowo ɖe wò kɔmpiuta dzi: webpackna Webpack ƒe nu vevitɔ, webpack-cliale be míate ŋu awɔ Webpack ƒe sededewo tso terminal la dzi, eye webpack-dev-serverale be míate ŋu awɔ nutoa me ŋgɔyiyi dɔdzikpɔla. Míezãnɛ tsɔ --save-devdea dzesii be ŋgɔyiyi zazã koe nusiwo dzi woanɔ te ɖo siawo nye ke menye na nuwɔwɔ o.

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

  3. De Bootstrap la ɖe wò kɔmpiuta dzi. Fifia míate ŋu aɖo Bootstrap ɖe wò kɔmpiuta dzi. Míaɖo Popper hã ɖe eme elabena míaƒe dropdowns, popovers, kple dɔwɔnu ƒe aɖaŋuɖoɖowo nɔ te ɖe edzi hena woƒe nɔƒe. Ne mèɖoe be yeazã akpa mawo o la, àte ŋu aɖe Popper ɖa le afisia.

    npm i --save bootstrap @popperjs/core

  4. De nu bubu siwo dzi woanɔ te ɖo la eme. Tsɔ kpe ɖe Webpack kple Bootstrap ŋu la, míehiã nusiwo dzi míanɔ te ɖo ʋee bubuwo be míate ŋu axɔ Bootstrap ƒe CSS kple JS nyuie ahaƒo wo nu ƒu kple Webpack. Esiawo dometɔ aɖewoe nye Sass, agbatsɔʋu aɖewo, kple Autoprefixer.

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

Fifia si míeɖo nusiwo katã hiã la, míate ŋu adze dɔ gɔme awɔ dɔa ƒe faɛlwo kple Bootstrap tsɔtsɔ va eme.

Dɔa ƒe ɖoɖowɔwɔ

Míewɔ my-projectagbalẽdzraɖoƒea xoxo eye míedze npm gɔme. Fifia míawɔ míaƒe srckple distagbalẽdzraɖoƒewo hã atsɔ aƒo dɔa ƒe ɖoɖo nu ƒu. Wɔ nusiwo gbɔna tso my-project, alo tsɔ asi wɔ agbalẽdzraɖoƒe kple faɛl ƒe ɖoɖo si woɖe fia le ete.

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

Ne èwu enu la, ele be wò dɔ bliboa nanɔ ale:

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

Le afisia la, nusianu le teƒe nyuitɔ, gake Webpack mawɔ dɔ o elabena míekpe míaƒe webpack.config.jshaɖe o.

Ðoɖowɔwɔ ɖe Webpack ŋu

Esi woda nusiwo dzi woanɔ te ɖo eye míaƒe dɔa ƒe agbalẽdzraɖoƒe le klalo na mí be míadze kɔdaɖoɖo gɔme la, míate ŋu aɖo Webpack azɔ eye míawɔ míaƒe dɔa le nutoa me.

  1. Ʋu webpack.config.jsle wò nuŋlɔla me. Esi wònye be ele ƒuƒlu ta la, ahiã be míatsɔ boilerplate config aɖewo akpe ɖe eŋu ale be míate ŋu adze míaƒe server gɔme. Ðoɖoa ƒe akpa sia gblɔ na Webpack be woadi míaƒe dɔa ƒe JavaScript, afisi woaɖe kɔda si woƒo ƒu la ɖe go ( dist), kple alesi wòle be ŋgɔyiyidɔdzikpɔla nawɔ nui (he tso distagbalẽdzraɖoƒea kple hot reload).

    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. Eyome míekpea míaƒe dist/index.html. Esia nye HTML axa si Webpack atsɔ ade web-browser la me be wòazã CSS kple JS si woƒo ƒu la atsɔ akpe ɖe eŋu le afɔɖeɖe siwo gbɔna me. Hafi míate ŋu awɔ ema la, ele be míana nane wòaɖe egɔme eye míade outputJS si tso afɔɖeɖe si do ŋgɔ me la eme.

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

    Míele Bootstrap ƒe atsyã vi aɖe dem afisia kple div class="container"eye <button>ale be míakpɔ ne Bootstrap ƒe CSS la le agba me to Webpack dzi.

  3. Fifia míehiã npm script be míate ŋu awɔ Webpack. Ʋu package.jsoneye nàtsɔ startnuŋɔŋlɔ si woɖe fia le ete la akpe ɖe eŋu (ele be dodokpɔ nuŋɔŋlɔa nanɔ asiwò xoxo). Míazã ŋɔŋlɔdzesi sia atsɔ adze míaƒe Webpack dev server si le mia gbɔ la gɔme.

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

  4. Eye mlɔeba la, míate ŋu adze Webpack gɔme. Tso my-projectagbalẽdzraɖoƒe si le wò terminal me la, wɔ npm ŋɔŋlɔdzesi yeye ma si nètsɔ kpe ɖe eŋu la:

    npm start
    Webpack dev dɔdzikpɔla le dɔ wɔm

Le mɔfiame sia ƒe akpa si kplɔe ɖo kple mamlɛtɔ me la, míaɖo Webpack ƒe agbatsɔlawo eye míatsɔ Bootstrap ƒe CSS kple JavaScript katã ade eme.

Tsɔ Bootstrap la va dukɔa me

Bootstrap tsɔtsɔ va Webpack me bia loaders siwo míede ɖe akpa gbãtɔ me. Míede wo kple npm, gake fifia ele be woaɖo Webpack be wòazã wo.

  1. Ðo agbatsɔʋuawo ɖe webpack.config.js. Wò ɖoɖowɔɖi faɛl la wu enu azɔ eye ele be wòasɔ kple akpa si le ete la. Akpa yeye ɖeka kolia si le afisiae nye moduleakpaa.

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

    Nusita míehiã agbatsɔʋu siawo katã ƒe gbugbɔgagblɔe nye esi. style-loaderetsɔa CSS la dea <style>element aɖe me le <head>HTML ƒe axaa dzi, css-loaderekpena ɖe eŋu le kple zazã @importme url(), postcss-loaderehiã na Autoprefixer, eye sass-loaderwòɖea mɔ na mí be míazã Sass.

  2. Azɔ, mina míatsɔ Bootstrap ƒe CSS la ade eme. Tsɔ nusiwo gbɔna kpe ɖe eŋu src/scss/styles.scssbe nàxɔ Bootstrap ƒe dzɔtsoƒe Sass katã.

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

    Àte ŋu atsɔ míaƒe atsyãgbalẽwo hã ava ɖekaɖeka ne èdi. Xlẽ míaƒe Sass import docs hena numeɖeɖe bubuwo.

  3. Eyome míetsɔa CSS la dea eme eye míetsɔa Bootstrap ƒe JavaScript la vaa eme. Tsɔ nusiwo gbɔna kpe ɖe eŋu src/js/main.jsbe nàtsɔ CSS la ade eme eye nàxɔ Bootstrap ƒe JS la katã. Woatsɔ Popper ava le eɖokui si to Bootstrap dzi.

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

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

    Àteŋu atsɔ JavaScript ƒe kpeɖeŋutɔwo hã ava ɖekaɖeka alesi wòhiã be nàna bundle ƒe lolomewo naɖiɖi:

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

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

    Xlẽ míaƒe JavaScript docs hena nyatakaka bubuwo tso alesi nàzã Bootstrap ƒe plugins ŋu.

  4. Eye èwu enu! 🎉 Esi Bootstrap ƒe dzɔtsoƒe Sass kple JS tsɔ agba bliboe la, ele be wò nutoa me ŋgɔyiyi dɔdzikpɔla nanɔ abe alea ene azɔ.

    Webpack dev server si le dɔ wɔm kple Bootstrap

    Fifia àteŋu adze Bootstrap ƒe akpa ɖesiaɖe si nèdi be yeazã la tsɔtsɔ kpee gɔme. Kpɔ egbɔ be yekpɔ Webpack ƒe kpɔɖeŋudɔ bliboa hena alesi nàde Sass tɔxɛ bubuwo eme eye nàwɔ wò xɔtutu wòanyo wu to Bootstrap ƒe CSS kple JS ƒe akpa siwo nèhiã la ko tsɔtsɔ va eme.

Nuwɔwɔ nyuie wu

Le wò ɖoɖoa nu la, àte ŋu awɔ dedienɔnɔ kple duƒuƒu ƒe nyonyome bubu aɖewo siwo ŋu viɖe le na dɔa wɔwɔ le ewɔwɔ me la ŋudɔ. De dzesii be womewɔa asitɔtrɔ siawo ŋudɔ le Webpack ƒe kpɔɖeŋudɔa dzi o eye wò ŋutɔ gbɔe wòtso be nàwɔe.

CSS ɖeɖe ɖa

Nusi style-loadermíeɖo ɖe etame la doa CSS ɖe bundle la me bɔbɔe ale be asi tsɔtsɔ de CSS faɛl ɖe dist/index.htmleme mehiã o. Mɔnu sia mate ŋu awɔ dɔ kple Emenyawo ƒe Dedienɔnɔ Ŋuti Ðoɖo sesẽ aɖe o, gake, eye ate ŋu ava zu mɔxenu le wò dɔwɔɖoɖoa me le bundle ƒe lolome gã ta.

Be nàma CSS la ɖe vovo ale be míate ŋu atsɔe tẽ tso dist/index.html, zã mini-css-extract-loaderWebpack ƒe kpeɖeŋutɔa.

Gbã la, da plugin la ɖe wò kɔmpiuta dzi:

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

Emegbe wɔ kpɔɖeŋu eye nàzã plugin la le Webpack ƒe ɖoɖowɔɖia me:

--- 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
           },
           {

Ne ègawɔ dɔ vɔ npm run buildla, faɛl yeye aɖe anɔ anyi dist/main.css, si me CSS siwo katã tsɔ va la anɔ src/js/main.js. Ne èkpɔe dist/index.htmlle wò web-browser me fifia la, atsyã la abu, abe alesi wòle fifia le dist/main.css. Àteŋu ade CSS si wowɔ la eme dist/index.htmlabe esia ene:

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

SVG faɛlwo ɖeɖe ɖa

Bootstrap ƒe CSS la tsɔa SVG faɛlwo ƒe nuƒoƒo geɖe to data:URI siwo le fli me dzi. Ne èɖe Emenyawo ƒe Dedienɔnɔ Ŋuti Ðoɖo aɖe gɔme na wò dɔa si xea mɔ data:na URIwo na nɔnɔmetatawo la, ekema SVG faɛl siawo maxɔ o. Àteŋu akpɔ kuxi sia gbɔ to SVG faɛl siwo le fli me la ɖeɖe ɖa me to Webpack ƒe nunɔamesi modules ƒe nɔnɔme zazã me.

Ðo Webpack be wòaɖe SVG faɛl siwo le fli me abe esia ene:

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

Ne ègaƒu du npm run buildake vɔ la, àkpɔ SVG faɛl siwo woɖe ɖe CSS me dist/iconseye woyɔ wo nyuie tso CSS me.

Èkpɔ nane si mesɔ o alo do xoxo le afisiaa? Taflatse ʋu nya aɖe le GitHub . Èhiã kpekpeɖeŋu le kuxiwo gbɔ kpɔkpɔ mea? Di alo dze numedzodzro gɔme le GitHub.