Biçe ser naveroka sereke Biçe navîgasyon belgeyan
Check
in English

Bootstrap & Webpack

Rêbernameya fermî ji bo meriv çawa bi karanîna Webpack-ê CSS û JavaScript-a Bootstrap-ê di projeya xwe de tevde û berhev dike.

Li ser vê rûpelê
Dixwazin heya dawiyê derbas bibin? Koda çavkanî û demo ya xebatê ji bo vê rêbernameyê ji depoya twbs/nimûneyan dakêşin . Her weha hûn dikarin mînaka li StackBlitz ji bo guherandina zindî vekin.

Damezirandin

Em projeyek Webpackê bi Bootstrap ji sifrê ava dikin, ji ber vê yekê hin şert û gavên pêşîn hene berî ku em bi rastî dest pê bikin. Ev rêber ji we re hewce dike ku hûn Node.js sazkirî bin û bi termînalê re hinekî nas bikin.

  1. Peldankek projeyê biafirînin û npm saz bikin. Em ê my-projectpeldankê biafirînin û npm bi -yargumana xwe bidin destpêkirin da ku ew hemî pirsên înteraktîf ji me nepirse.

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

  2. Webpack saz bikin. Dûv re pêdivî ye ku em girêdanên pêşveçûna Webpack-a xwe saz bikin: webpackji bo bingeha Webpack, webpack-clida ku em dikarin fermanên Webpack-ê ji termînalê bimeşînin, û webpack-dev-serverji ber vê yekê em dikarin serverek pêşveçûna herêmî bimeşînin. Em bi kar tînin --save-devku nîşan bidin ku ev girêdan tenê ji bo karanîna pêşkeftinê ne û ne ji bo hilberînê ne.

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

  3. Bootstrap saz bikin. Naha em dikarin Bootstrap saz bikin. Em ê Popper-ê jî saz bikin ji ber ku dakêşan, popover û serişteyên amûran ji bo pozîsyona wan bi wê ve girêdayî ne. Heke hûn ne plan dikin ku van hêmanan bikar bînin, hûn dikarin Popper li vir derxînin.

    npm i --save bootstrap @popperjs/core

  4. Girêdanên din saz bikin. Ji bilî Webpack û Bootstrap, em hewceyê çend girêdanên din in ku em bi rêkûpêk CSS û JS-ya Bootstrap-ê bi Webpack-ê re import û berhev bikin. Di nav wan de Sass, hin loader, û Autoprefixer hene.

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

Naha ku me hemî girêdanên pêwîst saz kirine, em dikarin dest bi çêkirina pelên projeyê û importkirina Bootstrap bikin.

Struktura projeyê

Me berê my-projectpeldank çêkir û npm dest pê kir. Naha em ê jî peldankên xwe srcû distpeldankên xwe biafirînin da ku strukturên projeyê dorpêç bikin. Ya jêrîn ji my-project, an jî bi destan peldank û peldanka ku li jêr tê xuyang kirin biafirînin.

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

Dema ku we qediya, divê projeya weya tevahî bi vî rengî xuya bike:

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

Di vê nuqteyê de, her tişt li cîhê rast e, lê Webpack dê nexebite ji ber ku me webpack.config.jshîna xwe tije nekiriye.

Webpackê mîheng bikin

Digel ku girêdayîn hatine saz kirin û peldanka projeya me ji bo ku em dest bi kodkirinê bikin amade ye, em naha dikarin Webpack-ê mîheng bikin û projeya xwe herêmî bimeşînin.

  1. webpack.config.jsDi edîtorê xwe de vekin . Ji ber ku ew vala ye, em ê hewce bikin ku hin konfigurasyona boilerplate li wê zêde bikin da ku em servera xwe bidin destpêkirin. Ev beşa mîhengê ji Webpack re dibêje ku divê li JavaScript-a projeya me bigerin, ku koda berhevkirî li ku derê derxe ( dist), û servera pêşkeftinê çawa tevbigere (ji distpeldanka bi nûvekirina germ vekêşe).

    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. Piştre em xwe tijî dist/index.htmldikin. Ev rûpela HTML-ê ye Webpack dê di gerokê de bar bike da ku CSS û JS-ya hevgirtî bikar bîne ku em ê di gavên paşîn de lê zêde bikin. Berî ku em karibin wiya bikin, pêdivî ye ku em wiya tiştek bidin da ku outputJS-ya ji gava berê veqetînin û têxin nav xwe.

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

    Em li vir piçek şêwaza Bootstrap-ê bi hev re vedigirin div class="container"û <button>ji ber vê yekê em dibînin gava CSS-ya Bootstrap-ê ji hêla Webpack-ê ve tê barkirin.

  3. Naha ji me re skrîptek npm hewce ye ku Webpack bimeşîne. Skrîpta ku li jêr tê xuyang kirin vekin package.jsonû lê zêde bikin start(divê hûn jixwe skrîpta testê hebin). Em ê vê skrîptê bikar bînin da ku servera xweya devkî ya Webpack ya herêmî dest pê bikin.

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

  4. Û di dawiyê de, em dikarin Webpack dest pê bikin. Ji my-projectpeldanka li termînalê xwe, wê skrîpta npm ya nû hatî zêdekirin bimeşînin:

    npm start
    Pêşkêşkara dev Webpack dixebite

Di beşa paşîn û paşîn a vê rêbernameyê de, em ê barkerên Webpack saz bikin û hemî CSS û JavaScript-a Bootstrap-ê derxînin.

Bootstrap import bikin

Importkirina Bootstrap di Webpackê de barkerên ku me di beşa yekem de saz kirine hewce dike. Me ew bi npm saz kirine, lê naha Webpack pêdivî ye ku were mîheng kirin da ku wan bikar bîne.

  1. Barkeran di nav de saz bikin webpack.config.js. Pelê veavakirina we naha qediya ye û divê bi perçeya jêrîn re li hev bike. Tenê beşa nû ya li vir modulebeş e.

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

    Li vir vekolînek e ku çima em hewceyê van hemî barkêşan in. style-loaderCSS-ê di <style>hêmanek di <head>rûpela HTML-ê de derdixe, css-loaderbi karanîna @importû -yê url()re dibe alîkar, postcss-loaderji bo Autoprefixer hewce ye, û sass-loaderdihêle ku em Sass bikar bînin.

  2. Naha, werin em CSS-ya Bootstrap-ê derxînin. Ya jêrîn lê zêde bikin da src/scss/styles.scssku hemî çavkaniya Bootstrap Sass têxe nav xwe.

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

    Ger hûn bixwazin hûn dikarin şêwazên me bi rengek ferdî jî derxînin. Ji bo hûragahiyan , belgeyên me yên importa Sass bixwînin .

  3. Dûv re em CSS-ê bar dikin û JavaScript-a Bootstrap-ê derdixin. Ya jêrîn lê zêde bikin da src/js/main.jsku CSS-ê bar bikin û hemî JS-ya Bootstrap-ê derxînin. Popper dê bixweber bi navgîniya Bootstrap ve were şandin.

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

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

    Her weha hûn dikarin pêvekên JavaScript-ê li gorî hewcedariyê bi rengek ferdî derxînin da ku mezinahiyên pakêtê kêm bibin:

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

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

    Ji bo bêtir agahdarî li ser meriv çawa pêvekên Bootstrap bikar tîne, belgeyên me yên JavaScript bixwînin .

  4. Û hûn qedandin! 🎉 Li gel çavkaniya Bootstrap Sass û JS bi tevahî barkirî, servera weya pêşkeftina herêmî divê naha bi vî rengî xuya bike.

    Pêşkêşkara dev Webpack-ê ku bi Bootstrap-ê dixebite

    Naha hûn dikarin dest bi lê zêdekirina pêkhateyên Bootstrap-ê yên ku hûn dixwazin bikar bînin bikin. Pê bawer bin ku hûn projeya nimûneya Webpack-ê ya bêkêmasî binihêrin ka meriv çawa Sass-a xwerû ya din vedihewîne û avakirina xwe xweşbîn bike bi tenê beşên Bootstrap-ê CSS û JS-ya ku hûn hewce ne.

Optimîzasyonên hilberînê

Bi sazkirina we ve girêdayî, dibe ku hûn bixwazin ku ji bo meşandina projeyê di hilberînê de hin xweşbîniyên ewlehî û leza zêde yên kêrhatî bicîh bikin. Bala xwe bidinê ku ev xweşbînkirin li ser projeya mînaka Webpack nayên sepandin û li ser we ye ku hûn bicîh bikin.

Derxistina CSS

Ya ku style-loaderme li jor mîheng kiriye bi hêsanî CSS-ê di nav pakêtê de diweşîne da ku bi destan barkirina pelek CSS-ê dist/index.htmlne hewce ye. Dibe ku ev nêzîkatî bi Siyaseta Ewlekariya Naverokê ya hişk re nexebite, di heman demê de, û dibe ku ew ji ber mezinahiya pakêta mezin di serîlêdana we de bibe astengek.

Ji bo ku CSS-ê veqetînin da ku em rasterast jê bar bikin dist/index.html, mini-css-extract-loaderpêveka Webpack bikar bînin.

Pêşîn, pêvekê saz bikin:

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

Dûv re pêvekê di veavakirina Webpackê de destnîşan bikin û bikar bînin:

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

Piştî ku npm run builddîsa xebitîn, dê pelek nû hebe dist/main.css, ku dê hemî CSS-ya ku ji hêla src/js/main.js. Ger hûn dist/index.htmlniha di geroka xwe de bibînin, şêwaz dê wenda bibe, wekî ku niha di dist/main.css. Hûn dikarin CSS-ya hatî çêkirin bi dist/index.htmlvî rengî tevbigerin:

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

Pelên SVG derxistin

CSS-ya Bootstrap bi navgîniya URI-yên hundurîn ve gelek referansên pelên SVG-ê data:vedihewîne. Ger hûn ji bo projeya xwe Polîtîkayek Ewlekariya Naverok diyar bikin ku data:URI-yên wêneyan asteng dike, wê hingê ev pelên SVG nayên barkirin. Hûn dikarin vê pirsgirêkê bi derxistina pelên SVG-ya hundurîn bi karanîna taybetmendiya modulên maldariyê ya Webpack-ê derxînin.

Webpackê mîheng bikin da ku pelên SVG yên hundurîn bi vî rengî derxînin:

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

Piştî ku npm run buildhûn dîsa xebitîn, hûn ê pelên SVG -ê yên ku di nav dist/iconsCSS-ê de hatine derxistin û bi rêkûpêk têne referans kirin bibînin.

Li vir tiştek xelet an kevnar dibînin? Ji kerema xwe pirsgirêkek li ser GitHub vekin . Ji bo çareserkirina pirsgirêkan arîkariyê divê? Li GitHub nîqaşek bigerin an dest pê bikin .