ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
Check
in English

ቡትስትራፕ & ዌብፓክ

ወግዓዊ መምርሒ ከመይ ጌርካ ናይ Bootstrap CSSን JavaScriptን ኣብ ፕሮጀክትካ ብWebpack ተጠቂምካ ከም እተእትዎን ከም እትጥርንፎን።

ኣብዚ ገጽ
ክሳብ መወዳእታ ክትዘልል ትደሊ? ናይዚ መምርሒ ምንጪ ኮድን ናይ ስራሕ ዲሞን ካብ twbs/examples repository ኣውርድዎ ። ብተወሳኺ ኣብ StackBlitz ንቐጥታዊ ኣርትዖት ኣብነት ክትከፍቶ ትኽእል ኢኻ ።

ምድላው

ካብ ባዶ ጀሚርና ብቡትስትራፕ ፕሮጀክት ዌብፓክ ንሃንጽ ኣለና፡ ስለዚ ቅድሚ ብሓቂ ምጅማርና ገለ ቅድመ ኩነትን ቅድሚት ዝስጉሙ ስጉምትታትን ኣለዉ። እዚ መምርሒ እዚ Node.js ተተኺሉ ገለ ሌላ ምስቲ ተርሚናል ክህልወካ ይጠልብ።

  1. ናይ ፕሮጀክት ፎልደር ምፍጣርን npm ንምድላውን። ንኹሉ መስተጋብራዊ ሕቶታት ከይሓተና ነቲ ፎልደር ፈጢርና my-projectnpm በቲ ሞጎተ ክንጅምሮ ኢና።-y

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

  2. ዌብፓክ ምትካል። ቀጺልና ናይ ዌብፓክ ምዕባለ ጽግዕተኛታትና ክንተክል ኣለና: webpackንኮር ናይ ዌብፓክ፣ webpack-cliስለዚ ካብ ተርሚናል ናይ ዌብፓክ ትእዛዛት ከነካይድ ንኽእል፣ ከምኡ’ውን webpack-dev-serverሎካል ዲቨሎፕመንት ሰርቨር ከነካይድ ንኽእል። --save-devእዞም ፅግዕተኛታት እዚኦም ንልምዓታዊ ኣጠቓቕማ ጥራሕ እምበር ንፍርያት ከምዘይኮኑ ምልክት ንምሃብ ንጥቀመሉ ።

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

  3. ቡትስትራፕ ምትካል። ሕጂ Bootstrap ክንተክል ንኽእል ኢና። ፖፐር እውን ክንተክል ኢና ምኽንያቱ ናትና ድሮፕዳውንስ፣ ፖፖቨርስ፣ ከምኡውን ቱልቲፕስ ንኣቀማምጣኦም ኣብኡ ስለዝምርኮሱ። ነቶም ኣካላት ክትጥቀመሎም እንተዘይሓሲብካ፡ ኣብዚ ፖፐር ክትገድፎ ትኽእል ኢኻ።

    npm i --save bootstrap @popperjs/core

  4. ተወሳኺ ጽግዕተኛታት ምትካል። ብዘይካ ዌብፓክን ቡትስትራፕን፡ ንናይ ቡትስትራፕ ሲኤስኤስን ጀይኤስን ብግቡእ ምስ ዌብፓክ ንምእታውን ንምጽንባርን ገለ ተወሳኺ ጽግዕተኛታት የድልዩና። እዚኦም ድማ Sass, ገለ loadersን Autoprefixerን ይርከብዎም።

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

ሕጂ ኩሉ ዘድሊ ጽግዕተኛታት ተተኺሉ ስለዘሎና፡ ናይ ፕሮጀክት ፋይላት ኣብ ምፍጣርን Bootstrap ኣብ ምእታውን ናብ ስራሕ ክንኣቱ ንኽእል።

ኣቃውማ ፕሮጀክት

ድሮ ነቲ ፎልደር ፈጢርና my-projectnpm ኣበጊስናዮ ኣለና። ሕጂ ውን ነቲ ናይ ፕሮጀክት ቅርጺ ንምኽባብ ናትና srcand ፎልደር ክንፈጥር ኢና ። distካብ ፣ ነዚ ዝስዕብ ኣካይድ my-project፣ ወይ ድማ ኣብ ታሕቲ ዘሎ ኣቃውማን ፋይልን ብኢድካ ፍጠር።

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

ምስ ወዳእካዮ ምሉእ ፕሮጀክትካ ከምዚ ክመስል ኣለዎ፤

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

ኣብዚ እዋን እዚ ኩሉ ኣብ ትኽክለኛ ቦታ ኣሎ፡ ግን ዌብፓክ ኣይክሰርሕን እዩ ምኽንያቱ ክሳብ ሕጂ ናትና webpack.config.jsስለዘይመልእናዮ።

ዌብፓክ ምውቃር

ጽግዕተኛታት ተተኺሎምን ናይ ፕሮጀክትና ፎልደርና ኮዲንግ ክንጅምር ድሉው ምስ ኮነን፡ ሕጂ ንዌብፓክ ክንውቅሮን ፕሮጀክትና ኣብ ውሽጢ ዓዲ ከነካይዶን ንኽእል።

  1. webpack.config.jsኣብ ኣርታዒኻ ክፈት ። ባዶ ስለ ዝኾነ ገለ boilerplate config ክንውስኸሉ ከድልየና እዩ ምእንቲ ሰርቨርና ክንጅምር። እዚ ክፋል ናይቲ config ንWebpack ናይ ፕሮጀክትና ጃቫስክሪፕት ክደልዩ ከም ዝነበሩ ይነግሮ፣ እቲ ዝተጠርነፈ ኮድ ኣበይ ከም ዘውጽኦ ናብ ( dist)፣ ከምኡ’ውን እቲ ናይ ምዕባለ ኣገልጋሊ ከመይ ክመላለስ ከም ዘለዎ (ካብቲ distማህደር ምስ ውዑይ ዳግመ-ጽዕነት ምስሓብ)።

    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. ቀጺልና ድማ dist/index.html. እዚ እቲ Webpack ኣብቲ browser ዝጽዕኖ HTML page እዩ ነቲ bundled CSSን JSን ንምጥቃም ኣብ ዳሕረዎት ስጉምትታት ክንውስኸሉ ኢና። outputቅድሚ ከምኡ ምግባርና ካብቲ ዝሓለፈ ስጉምቲ ዝነበረ JS ዝረድኣሉን ዘካተተሉን ነገር ክንህቦ ኣለና ።

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

    ኣብዚ ቁሩብ ናይ Bootstrap styling ምስቲ div class="container"and ነካትት ኣለና <button>ምእንቲ ናይ Bootstrap CSS ብ Webpack መዓስ ከም ዝጽዓን ክንርኢ።

  3. ሕጂ Webpack ንምስራሕ npm ስክሪፕት የድልየና ኣሎ። ነቲ ኣብ ታሕቲ ዘሎ ስክሪፕት ከፊትካ package.jsonወስኸሉ (ድሮ ናይ ፈተና ስክሪፕት ክህልወካ ኣለዎ)። startነዚ ስክሪፕት እዚ ተጠቒምና ናይ ከባቢና Webpack dev server ክንጅምር ኢና።

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

  4. ኣብ መወዳእታ ድማ ዌብፓክ ክንጅምር ንኽእል ኢና። ካብቲ my-projectኣብ ተርሚናልካ ዘሎ ፎልደር፡ ነታ ሓዳስ ዝተወሰኸት npm ስክሪፕት ኣካይዳ፤

    npm start
    Webpack dev ሰርቨር ይሰርሕ ኣሎ።

ኣብ ዝቕጽልን ናይ መወዳእታን ክፋል ናይዚ መምርሒ፡ ዌብፓክ ሎደርስ ኣዳሊና ኩሉ ናይ ቡትስትራፕ ሲኤስኤስን ጃቫስክሪፕትን ከነእቱ ኢና።

ቡትስትራፕ ኣእትዉ

Bootstrap ናብ Webpack ምእታው ኣብ ቀዳማይ ክፋል ዝገጠምናዮም ሎደርስ የድልዮም። ብ npm ጌርናዮም ኣለና፡ ሕጂ ግን Webpack ንኽጥቀመሎም ምውቃር ኣለዎ።

  1. እቶም ሎደርስ ኣብ webpack.config.js. ሕጂ ናትካ ናይ ውቅር ፋይል ምሉእ ኮይኑ ምስዚ ኣብ ታሕቲ ዘሎ ቁንጣሮ ጽሑፍ ክሰማማዕ ኣለዎ። ኣብዚ እቲ እንኮ ሓድሽ ክፋል እቲ moduleክፍሊ እዩ።

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

    እዞም ኩሎም ሎደርስ ንምንታይ ከም ዘድልዩና ዳግም ኣብዚ ኣሎ። style-loaderነቲ CSS ናብ ሓደ <style>ባእታ ኣብቲ <head>ናይ HTML ገጽ ይወግኦ፣ ኣብ ምጥቃምን css-loaderይሕግዝ ፣ ን Autoprefixer የድሊ፣ ከምኡውን Sass ክንጥቀም የኽእለና።@importurl()postcss-loadersass-loader

  2. ሕጂ፡ ናይ Bootstrap CSS ነእቱ። src/scss/styles.scssንኹሉ ናይ Bootstrap ምንጪ Sass ንምእታው ነዚ ዝስዕብ ናብ ወስኸሉ ።

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

    ከምኡ ውን እንተደሊኹም ቅዲ ጽሑፋትና ብውልቂ ከተእትዉ ትኽእሉ ኢኹም። ንዝርዝር ሓበሬታ ናይ Sass import docs ናታትና ኣንብቡ ።

  3. ቀጺልና CSS ጽዒንና ናይ Bootstrap ጃቫስክሪፕት ነእቱ። src/js/main.jsCSS ንምጽዓንን ኩሉ ናይ Bootstrap JS ንምእታውን ነዞም ዝስዕቡ ናብ ወስኹሉ ። ፖፐር ብኣውቶማቲክ ብመንገዲ ቡትስትራፕ ክኣቱ እዩ።

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

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

    ብተወሳኺ ንዓቐናት ጽንጽዋይ ንኽንኪ ከም ኣድላይነቱ ብውልቂ ተወሰኽቲ ጃቫስክሪፕት ከተእቱ ትኽእል ኢኻ፤

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

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

    ንዝያዳ ሓበሬታ ብዛዕባ ከመይ ጌርና ናይ Bootstrap ፕላጊናት ንጥቀም ንምርካብ ናይ ጃቫስክሪፕት ዶክስና ኣንብቡ ።

  4. ወዲእካ ድማ! 🎉 ናይ Bootstrap ምንጪ Sassን JSን ምሉእ ብምሉእ ምስ ተጻዕነ፡ ሕጂ ናትካ ናይ ከባቢ ምዕባለ ሰርቨር ከምዚ ክመስል ኣለዎ።

    Webpack dev server ብ Bootstrap ዝሰርሕ

    ሕጂ ዝኾነ ክትጥቀመሉ እትደሊ ናይ Bootstrap components ምውሳኽ ክትጅምር ትኽእል ኢኻ። ተወሳኺ ብሕታዊ Sass ከመይ ጌርካ ከም እተእትዎን ዘድልየካ ክፋላት ናይ Bootstrap CSSን JSን ጥራይ ብምእታው ንህንጸትካ ከም እተመሓይሾን ምሉእ ኣብነት ፕሮጀክት ዌብፓክ ምፍታሽካ ኣረጋግጽ ።

ናይ ምፍራይ ምምሕያሽ

ከከም ኣወዳድባኻ፡ ነቲ ፕሮጀክት ኣብ ምፍራይ ንምክያድ ዝጠቅም ገለ ተወሳኺ ናይ ጸጥታን ፍጥነትን ምምሕያሽ ከተተግብር ትደሊ ትኸውን። እዞም ምምሕያሻት ኣብቲ ናይ ዌብፓክ ኣብነት ፕሮጀክት ከምዘይትግበሩን ምትግባሮምን ናትካ ምዃኖም ኣስተውዕል ።

ምውጻእ ሲኤስኤስ

እቲ style-loaderኣብ ላዕሊ ዝተዋቐርናዮ ብዝጥዕም መንገዲ CSS ናብቲ ጽንጽዋይ ይፍንው ምእንቲ ብኢድካ CSS ፋይል ኣብ ምጽዓን dist/index.htmlኣድላዪ ኣይኮነን። እዚ ኣገባብ እዚ ብጽኑዕ ፖሊሲ ድሕነት ትሕዝቶ ዘይክሰርሕ ይኽእል እዩ፣ ይኹን እምበር፣ ብሰንኪ እቲ ዓቢ ስፍሓት ጽንጽዋይ ድማ ኣብ መተግበሪኻ ዕንቅፋት ክኸውን ይኽእል።

CSS ብቐጥታ ካብ ንኽንጽዕኖ ንምፍላይ፡ Webpack plugin dist/index.htmlንጥቀም ።mini-css-extract-loader

መጀመርታ ነቲ ፕላግ-ኢን ንጽዓኖ፤

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

ድሕሪኡ ነቲ ፕላግ-ኢን ኣብ ውቅር Webpack instantiate ብምግባር ተጠቐመሉ፤

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

ዳግማይ ድሕሪ ምጉያይ npm run build፡ ሓድሽ ፋይል ክህሉ እዩ dist/main.css፡ እዚ ድማ ኩሉ እቲ ብ src/js/main.js. dist/index.htmlሕጂ ኣብ መርበብ ሓበሬታኻ እንተርኢኻዮ፡ እቲ ቅዲ ከምቲ ሕጂ ኣብ dist/main.css. dist/index.htmlነቲ ዝተፈጥረ CSS ኣብዚ ከምዚ ጌርካ ከተእትዎ ትኽእል ኢኻ ፤

--- 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 ፋይላት ምውጻእ

data:ናይ Bootstrap CSS ብመንገዲ inline URIs ንSVG ፋይላት ብዙሕ መወከሲታት የጠቓልል ። ንፕሮጀክትካ ዝኸውን ናይ ትሕዝቶ ድሕነት ፖሊሲ እንተድኣ data:ገሊጽካዮ ንURIs ምስልታት ዝዓግት፣ ሽዑ እዞም SVG ፋይላት ኣይጽዓኑን እዮም። ነዚ ጸገም እዚ ክትፈትሖ ትኽእል ኢኻ፡ ኣብ መስመር ዝርከቡ SVG ፋይላት ብምውጻእ ናይ ዌብፓክ ንብረት ሞዱላት ባህሪ ተጠቒምካ።

ኣብ መስመር ዝርከቡ SVG ፋይላት ንምውጻእ ዌብፓክ ከምዚ ዝስዕብ ንውቅሮ፤

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

ዳግማይ ድሕሪ ምጉያይ ፡ እቶም SVG ፋይላት ናብ CSS ዝተቐድሑን ብግቡእ npm run buildዝተወከሱን ክትረኽቡ ኢኹም ።dist/icons

ኣብዚ ገለ ጌጋ ወይ ግዜኡ ዝሓለፎ ነገር ርኢኹም? በጃኹም ኣብ GitHub ሓደ ጉዳይ ክፈቱ ። ኣብ ምፍታሕ ጸገማት ሓገዝ የድልየካ? ኣብ GitHub ድለ ወይ ዘተ ጀምር ።