U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
Check
in English

Bootstrap & Webpack

Hagaha rasmiga ah ee sida loogu daro oo loogu xidho Bootstrap's CSS iyo JavaScript ee mashruucaaga adoo isticmaalaya Webpack.

Boggaan
Ma rabtaa inaad u gudubto ilaa dhamaadka? Ka soo deji koodka isha iyo muujinta shaqada ee hagahan hagaha twbs/tusaaleyaasha kaydka . Waxa kale oo aad tusaale ahaan ka furi kartaa StackBlitz si toos ah tafatirka.

Dejinta

Waxaan dhiseynaa mashruuc xirmo mareegaha ah oo leh Bootstrap xoqan, marka waxaa jira shuruudo qaar iyo talaabooyin hore ka hor inta aanan si dhab ah u bilaabin. Hagahan waxa uu kaaga baahan yahay in lagu rakibo Node.js iyo in aad taqaanid terminalka.

  1. Samee gal mashruuc oo deji npm. Waxaan abuuri doonaa my-projectfaylka oo aan ku bilowno npm -ydoodda si aan uga fogaano inay na waydiiso dhammaan su'aalaha isdhexgalka.

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

  2. Ku rakib xirmo shabakadeed Marka xigta waxaan u baahanahay inaan rakibno ku tiirsanaanta horumarinta Webpack: webpackxudunta u ah xirmada Webka, webpack-clisi aan u maamulno amarrada Webpack ee terminalka, webpack-dev-serversi aan u socodsiino server-ka horumarinta maxalliga ah. Waxaan u isticmaalnaa --save-devsi aan u muujinno in ku-tiirsanaantani ay yihiin oo keliya isticmaalka horumarinta ee aysan ahayn wax soo saar.

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

  3. Ku rakib Bootstrap Hadda waxaan ku rakibi karnaa Bootstrap. Waxaan sidoo kale ku rakibi doonaa Popper mar haddii hoos u dhigisteena, popovers, iyo qalabyada ay ku xiran yihiin meeleyntooda. Haddii aadan qorsheyneynin inaad isticmaasho qaybahaas, waxaad ka tagi kartaa Popper halkan.

    npm i --save bootstrap @popperjs/core

  4. Ku xidhid dheeraad ah Baakadaha Shabkada iyo Bootstrap ka sokow, waxaan u baahanahay dhowr ku-tiirsanaan dheeraad ah si aan si sax ah u soo dejino oo aan ugu xidhno Bootstrap's CSS iyo JS oo wata xirmada Webka. Kuwaas waxaa ka mid ah Sass, qaar ka mid ah xamuulka, iyo Autoprefixer.

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

Hadda oo aan haysano dhammaan ku tiirsanaanta lagama maarmaanka ah ee la rakibay, waxaan heli karnaa shaqada abuurista faylasha mashruuca iyo soo dejinta Bootstrap.

Qaab dhismeedka mashruuca

Horay ayaan u abuurnay my-projectgalka oo aan bilownay npm. Hadda waxaan sidoo kale abuuri doonaayadayada srciyo distgalka si aan u dhamaystirno qaab dhismeedka mashruuca. Ka socodsii kuwan soo socda my-project, ama gacanta ku samee galka iyo qaab dhismeedka faylka hoos ka muuqda.

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

Markaad dhammayso, mashruucaaga oo dhammaystiran waa inuu u ekaado sidan:

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

Waqtigan xaadirka ah, wax walbaa waxay ku yaalliin meesha saxda ah, laakiin Webpack ma shaqeyn doono sababtoo ah weli ma aanan buuxin webpack.config.js.

Habee xirmada shabakada

Iyada oo la rakibay ku-tiirsanaanta iyo galka mashruuca oo noo diyaar ah si aan u bilowno koodka, hadda waxaan habeyn karnaa Webpack oo aan mashruuceena ku socodsiin karnaa gudaha.

  1. Ku fur webpack.config.jstafatirahaaga Maaddaama ay bannaan tahay, waxaan u baahan doonaa inaan ku darno qaar ka mid ah qalabka kuleyliyaha si aan u bilowno server-keena. Qaybtan habayntu waxay u sheegaysaa Webpack inay raadiyaan mashruucayada JavaScript-ka, halka laga soo saarayo koodka la soo ururiyey ee ( dist), iyo sida loo baahan yahay in serfarka horumarku u dhaqmo (ka soo jiidaya distgalka dib u dejinta kulul).

    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. Marka xigta waxaanu buuxinaynaa dist/index.html. Tani waa bogga HTML Webpack waxay ku shubmi doontaa browserka si ay uga faa'iideysato CSS-ga la xidhxidhay iyo JS waxaanu ku dari doonaa talaabooyinka danbe. Kahor intaanan taas samayn, waa inaan siinaa wax si aan u bixino oo aan ku darno outputJS-ka tallaabadii hore.

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

    Waxaan halkan ku soo daraynaa wax yar oo Bootstrap ah oo ay la socdaan div class="container"si <button>aan u aragno marka Bootstrap's CSS ay ku raran tahay Webpack.

  3. Hadda waxaan u baahanahay qoraal npm si aan u socodsiino Webpack. Fur package.jsonoo ku dar startqoraalka hoos ku qoran (waa inaad horey u haysataa qoraalka imtixaanka). Waxaan u isticmaali doonaa qoraalkan si aan u bilowno server-ka Webpack dev server-ka deegaanka.

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

  4. Iyo ugu dambeyntii, waxaan bilaabi karnaa Webpack. Laga soo bilaabo my-projectgalka ku yaal terminaalkaaga, socodsii qoraalka npm ee dhowaan lagu daray:

    npm start
    Webpack dev server oo socda

Qaybta xigta iyo tan u dambaysa ee hagahan, waxaanu dejin doonaa xidhmooyinka Webka waxaanu soo dejin doonaa dhammaan Bootstrap's CSS iyo JavaScript.

Soo dejinta Bootstrap

Soo dejinta Bootstrap ee xirmada Webpack waxay u baahan tahay rarayaasha aan ku rakibnay qaybta koowaad. Waxaan ku rakibnay npm, laakiin hadda Webpack waxay u baahan tahay in loo habeeyo si loo isticmaalo.

  1. Deji raagayaasha gudaha webpack.config.js. Faylka qaabeyntaagu hadda waa dhammaatay oo waa inuu la mid noqdaa qaybta hoose. Qaybta kaliya ee cusub halkan waa moduleqaybta.

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

    Halkan waxaa ah dib u koobis ku saabsan sababta aan ugu baahanahay dhammaan raridayaashan. style-loaderku duri CSS- ga <style>qayb ka <head>mid ah bogga HTML, css-loaderwaxay ka caawisaa isticmaalka @importiyo url(), postcss-loaderlooga baahan yahay Autoprefixer, oo sass-loaderwaxay noo ogolaataa inaan isticmaalno Sass.

  2. Hadda, aynu soo dejinno Bootstrap's CSS. Ku dar kuwa soo socda si src/scss/styles.scssaad u soo dejiso dhammaan Bootstrap's isha Sass.

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

    Waxa kale oo aad soo dhoofsan kartaa xaashiyada qaab-dhismeedka shakhsi ahaan haddii aad rabto. Akhri dukumeentiyada soo dejinta Sass wixii faahfaahin ah.

  3. Marka xigta waxaanu ku shubnaa CSS-ka oo aanu soo dajinaa Bootstrap's JavaScript. Ku dar kuwa soo socda si src/js/main.jsaad ugu shubto CSS oo aad u soo dejiso dhammaan Bootstrap's JS Popper si toos ah ayaa looga soo dejin doonaa Bootstrap.

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

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

    Waxa kale oo aad soo dejin kartaa plugins JavaScript si gaar ah haddii loo baahdo si loo yareeyo xidhmooyinka xidhmo:

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

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

    Akhri dokumentiyadayada JavaScript si aad u hesho macluumaad dheeraad ah oo ku saabsan sida loo isticmaalo Bootstrap plugins.

  4. Adiguna waad dhammaatay! 🎉 Iyada oo isha Bootstrap Sass iyo JS si buuxda loo raray, server-ka horumarinta deegaankaagu hadda waa inuu u ekaadaa sidan.

    Webpack dev server oo ku shaqeeya Bootstrap

    Hadda waxaad bilaabi kartaa inaad ku darto wax kasta oo ka kooban Bootstrap aad rabto inaad isticmaasho. Hubi inaad hubiso mashruuca Tusaalaha Webpack oo dhamaystiran sida loogu daro Sass caado ah oo dheeri ah oo aad u wanaajiso dhismahaaga adigoo soo dejinaya kaliya qaybaha Bootstrap's CSS iyo JS ee aad u baahan tahay.

Hagaajinta wax soo saarka

Iyadoo ku xiran habayntaada, waxaa laga yaabaa inaad rabto inaad hirgeliso qaar ka mid ah amniga dheeraadka ah iyo hagaajinta xawaaraha ee waxtarka u leh socodsiinta mashruuca ee wax soo saarka. Ogsoonow in wanaajintan aan lagu dabaqin mashruuca tusaalaha Webpack oo adiga ayay kugu xiran tahay inaad hirgeliso.

Soo saarida CSS

Midka style-loaderaan kor ku habaynay ayaa si ku habboon u sii daaya CSS xidhmada si aanu gacanta ugu gelin faylka CSS dist/index.htmllagama maarmaan maaha. Habkani waxa laga yaabaa in aanu ku shaqaynayn Siyaasad Badbaado Xogeed oo adag, si kastaba ha ahaatee, waxana laga yaabaa in ay caqabad ku noqoto codsigaaga sababtoo ah cabbirka xidhmo weyn.

Si aad u kala soocdo CSS-ka si aan toos uga soo rarno dist/index.html, isticmaal mini-css-extract-loaderplugin Webpack ah.

Marka hore, rakib plugin:

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

Dabadeed dagdag ku samee oo isticmaal plugin ku jira qaabeynta 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
           },
           {

Kadib socodsiinta npm run buildmar labaad, waxaa jiri doona fayl cusub dist/main.css, kaas oo ka koobnaan doona dhammaan CSS-ka uu keenay src/js/main.js. Haddii aad dist/index.htmlhadda ka dhex aragto browser-kaaga, qaabka ayaa ka maqnaan doona, sida uu hadda ku jiro dist/main.css. Waxaad ku dari kartaa CSS-ka la soo saaray dist/index.htmlsida tan:

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

Soosaarida faylasha SVG

Bootstrap's CSS waxaa ku jira tixraacyo badan oo ku saabsan faylalka SVG iyada oo loo marayo data:URI-yada khadka. Haddii aad qeexdo Siyaasadda Ammaanka Mawduuca ee mashruucaaga kaas oo xannibaya data:URI-yada sawirrada, markaa faylashan SVG ma rari doonaan. Waxaad ka heli kartaa dhibaatadan adiga oo soo saaraya faylalka SVG ee khadka tooska ah adiga oo isticmaalaya qaababka hantida Webpack.

Habee baakadda Shabakadda si aad u soo saarto faylalka SVG ee khadka tooska ah sida tan:

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

Ka dib markaad npm run buildmar labaad orodo, waxaad heli doontaa faylasha SVG oo la soo saaray dist/iconsoo si sax ah looga tixraacay CSS.

Halkan ka arag wax khaldan ama dhacay? Fadlan ku fur arrin GitHub . Ma u baahan tahay caawimo cilad-raadinta? Ka raadi ama ka bilow dood GitHub.