ማስነሻ እና የድር ጥቅል

Webpackን በመጠቀም የ Bootstrap's CSS እና JavaScriptን በፕሮጀክትዎ ውስጥ እንዴት እንደሚያካትቱ እና እንደሚጠጉ ይፋዊ መመሪያ።

በዚህ ገጽ ላይ

እስከ መጨረሻው መዝለል ይፈልጋሉ? ለዚህ መመሪያ የምንጭ ኮዱን እና የስራ ማሳያን ከ twbs/ምሳሌዎች ማከማቻ ያውርዱ ። ለቀጥታ አርትዖት ምሳሌውን በStackBlitz ውስጥ መክፈትም ይችላሉ ።

አዘገጃጀት

የዌብፓክ ፕሮጀክትን ከባዶ በBootstrap እየገነባን ነው፣ ስለዚህ በትክክል ከመጀመራችን በፊት አንዳንድ ቅድመ ሁኔታዎች እና የፊት ደረጃዎች አሉ። ይህ መመሪያ Node.js እንዲጫኑ እና ከተርሚናል ጋር የተወሰነ እውቀት እንዲኖርዎት ይፈልጋል።

የፕሮጀክት አቃፊ ይፍጠሩ እና npm ያዋቅሩ። ሁሉንም በይነተገናኝ ጥያቄዎች እንዳይጠይቀን ማህደሩን እንፈጥራለን my-projectእና npmን ከነክርክሩ ጋር እናስጀምረዋለን ።-y
```
mkdir my-project && cd my-project
npm init -y
```
Webpack ጫን። በመቀጠል የኛን የዌብፓክ ልማት ጥገኞችን መጫን አለብን፡ ለዌብፓክ webpackዋናው ነገር webpack-cliየዌብፓክ ትዕዛዞችን ከተርሚናል ማሄድ እንድንችል እና webpack-dev-serverየአካባቢ ልማት አገልጋይን ማስኬድ እንችላለን። --save-devእነዚህ ጥገኞች ለልማት ጥቅም ብቻ እንጂ ለምርት እንዳልሆኑ ለማሳየት እንጠቀማለን ።
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Bootstrapን ጫን። አሁን Bootstrapን መጫን እንችላለን. የእኛ ተቆልቋይ፣ ብቅ-ባይ እና የመሳሪያ ምክሮች በአቀማመጃቸው ላይ ስለሚመሰረቱ ፖፐርን እንጭነዋለን። እነዚህን ክፍሎች ለመጠቀም ካላሰቡ፣ እዚህ ፖፐርን መተው ይችላሉ።
```
npm i --save bootstrap @popperjs/core
```
ተጨማሪ ጥገኛዎችን ይጫኑ. ከWebpack እና Bootstrap በተጨማሪ የ Bootstrap's CSS እና JSን ከWebpack ጋር በትክክል ለማስመጣት እና ለመጠቅለል ጥቂት ተጨማሪ ጥገኞች ያስፈልጉናል። እነዚህ Sass፣ አንዳንድ ሎደሮች እና ራስ-ፕሪፊክስን ያካትታሉ።
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

አሁን ሁሉም አስፈላጊ ጥገኛዎች ተጭነዋል, የፕሮጀክት ፋይሎችን በመፍጠር እና Bootstrapን ወደ ውስጥ ማስገባት እንችላለን.

የፕሮጀክት መዋቅር

አስቀድመን አቃፊውን ፈጥረናል my-projectእና npm አስጀምረናል። አሁን የፕሮጀክት አወቃቀሩን ለመሸፈን የእኛን srcእና ማህደሮችን እንፈጥራለን ። 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.

Webpackን ያዋቅሩ

ጥገኞች ከተጫኑ እና የፕሮጀክታችን ማህደር ኮድ መስራት እንድንጀምር ተዘጋጅቶልናል፣ አሁን ዌብፓክን ማዋቀር እና ፕሮጀክታችንን በአገር ውስጥ ማስኬድ እንችላለን።

በአርታዒዎ ውስጥ ይክፈቱ webpack.config.js። ባዶ ስለሆነ አገልጋያችንን ለመጀመር አንዳንድ የቦይለርፕሌት ውቅሮችን ማከል አለብን። ይህ የውቅረት ክፍል ለዌብፓክ የፕሮጀክታችንን ጃቫ ስክሪፕት እንድንፈልግ፣የተቀናበረውን ኮድ ወደ ( 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
  }
}
```
በመቀጠል የእኛን እንሞላለን dist/index.html. ይህ ዌብፓክ በአሳሹ ውስጥ የሚጫነው የኤችቲኤምኤል ገጽ ነው የተጠቀለለውን 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's CSS በዌብፓክ ሲጫን ለማየት እዚህ div class="container"ጋር ትንሽ የBootstrap ስታይል እናካተትበታለን።<button>
አሁን Webpackን ለማስኬድ npm ስክሪፕት እንፈልጋለን። ከዚህ በታች የሚታየውን ስክሪፕት ይክፈቱ package.jsonእና ያክሉ start(የሙከራ ስክሪፕቱ ቀድሞውኑ ሊኖርዎት ይገባል)። የአካባቢያችንን የዌብፓክ ዴቭ አገልጋይ ለመጀመር ይህን ስክሪፕት እንጠቀማለን።
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
እና በመጨረሻም, Webpackን መጀመር እንችላለን. በእርስዎ ተርሚናል ውስጥ ካለው my-projectአቃፊ፣ ያንን አዲስ የተጨመረው npm ስክሪፕት ያሂዱ፡-
```
npm start
```

በዚህ መመሪያ በሚቀጥለው እና በመጨረሻው ክፍል የዌብፓክ ሎደሮችን እናዘጋጃለን እና ሁሉንም የ Bootstrap CSS እና JavaScript እናስመጣለን።

ማስነሻ አስመጣ

Bootstrapን ወደ ዌብፓክ ማስመጣት በመጀመሪያው ክፍል ላይ የጫንናቸው ሎደሮችን ይፈልጋል። በ npm ጫንናቸው፣ አሁን ግን ዌብፓክ እነሱን ለመጠቀም መዋቀር አለበት።

ጫኚዎቹን በ ውስጥ ያዘጋጁ 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-loaderCSS ን በኤችቲኤምኤል ገጽ <style>ውስጥ ባለው ኤለመንት ውስጥ ያስገባል፣ ለመጠቀም ይረዳል እና , ለAutoprefixer ያስፈልጋል እና Sass እንድንጠቀም ያስችለናል።<head>css-loader@importurl()postcss-loadersass-loader

አሁን፣ የ Bootstrap's CSSን እናስመጣ። src/scss/styles.scssሁሉንም የ Bootstrap ምንጭ Sass ለማስገባት የሚከተለውን ያክሉ ።
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ከፈለጉ የኛን የቅጥ ሉሆች ለየብቻ ማስመጣት ይችላሉ። ለዝርዝሮች የእኛን የ Sass ማስመጣት ዶክመንቶችን ያንብቡ ።
በመቀጠል CSS ን እንጭነዋለን እና የ Bootstrap JavaScriptን እናስመጣለን። src/js/main.jsCSS ን ለመጫን እና ሁሉንም የ Bootstrap JS ለማስገባት የሚከተለውን ያክሉ ። ፖፐር በራስ ሰር በBootstrap በኩል ይመጣል።
```
// 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 ፕለጊን እንዴት መጠቀም እንዳለብን ለበለጠ መረጃ የጃቫ ስክሪፕት ዶክመንቶቻችንን ያንብቡ ።
እና ጨርሰሃል! 🎉 የBootstrap ምንጭ Sass እና JS ሙሉ በሙሉ ተጭነዋል፣ የአካባቢዎ ልማት አገልጋይ አሁን ይህን መምሰል አለበት።

አሁን መጠቀም የሚፈልጓቸውን ማናቸውንም የBootstrap ክፍሎች ማከል ይችላሉ። ተጨማሪ ብጁ Sassን እንዴት እንደሚያካትቱ እና የሚፈልጉትን የ Bootstrap's CSS እና JS ክፍሎችን ብቻ በማስመጣት ግንባታዎን እንዴት እንደሚያሳኩ የተሟላውን የዌብፓክ ምሳሌ ፕሮጀክት ማየትዎን ያረጋግጡ ።

የምርት ማመቻቸት

በማዋቀርዎ ላይ በመመስረት ፕሮጀክቱን በምርት ውስጥ ለማስኬድ አንዳንድ ተጨማሪ የደህንነት እና የፍጥነት ማሻሻያዎችን መተግበር ሊፈልጉ ይችላሉ። እነዚህ ማሻሻያዎች በዌብፓክ ምሳሌ ፕሮጀክት ላይ እንደማይተገበሩ እና እርስዎ እንዲተገብሩት የእርስዎ ውሳኔ እንደሆነ ልብ ይበሉ።

CSS በማውጣት ላይ

ከላይ style-loaderያዋቀርነው CSS ን ወደ ቅርቅቡ ያስገባል ስለዚህም የCSS ፋይል እራስዎ መጫን dist/index.htmlአስፈላጊ አይሆንም። ይህ አካሄድ ከይዘት ደህንነት ፖሊሲ ጋር ላይሰራ ይችላል፣ነገር ግን በትልቅ የጥቅል መጠን ምክንያት በማመልከቻዎ ላይ ማነቆ ሊሆን ይችላል።

በቀጥታ ከ መጫን እንድንችል CSS ን ለመለየት የዌብፓክ ተሰኪን dist/index.htmlይጠቀሙ ።mini-css-extract-loader

በመጀመሪያ ተሰኪውን ጫን፡-

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

ከዚያ ፈጣን ያድርጉት እና ተሰኪውን በዌብፓክ ውቅር ውስጥ ይጠቀሙ፡-

--- 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ይኖራል፣ እሱም ሁሉንም በ ‹CSS› የሚይዝ ነው src/js/main.js። አሁን dist/index.htmlበአሳሽዎ ውስጥ ካዩት ፣ አሁን በ ውስጥ እንዳለ ዘይቤው ይጎድላል dist/main.css። የፈጠረውን CSS dist/index.htmlበዚህ መንገድ ማካተት ትችላለህ፡-

--- 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 ፋይሎችን በማውጣት ላይ

የ Bootstrap's CSS በውስጥ መስመር ዩአርአይዎች የSVG ፋይሎችን በርካታ ማጣቀሻዎችን ያካትታል data:። ዩአርአይኤስን ለምስሎች የሚያግድ የፕሮጀክትህ የይዘት ደህንነት ፖሊሲ data:ከገለጹ እነዚህ የ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 ፋይሎችን ወደ ከሲኤስኤስ ወጥተው በትክክል ተጠቅሰው npm run buildያገኙታል ።dist/icons

እዚህ የሆነ የተሳሳተ ወይም ጊዜው ያለፈበት ነገር አየህ? እባክዎ በ GitHub ላይ ችግር ይክፈቱ ። መላ ፍለጋ እገዛ ይፈልጋሉ? በ GitHub ላይ ይፈልጉ ወይም ውይይት ይጀምሩ ።