Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

Bootstrap & Webpack

Jagorar hukuma don haɗawa da haɗa Bootstrap's CSS da JavaScript a cikin aikin ku ta amfani da Webpack.

A wannan shafi
Kuna so ku tsallake zuwa ƙarshe? Zazzage lambar tushe da demo ɗin aiki don wannan jagorar daga ma'ajiyar twbs/misali . Hakanan zaka iya buɗe misali a cikin StackBlitz don gyara kai tsaye.

Saita

Muna gina aikin fakitin Yanar Gizo tare da Bootstrap daga karce, don haka akwai wasu abubuwan da ake buƙata da matakan gaba kafin mu fara da gaske. Wannan jagorar yana buƙatar shigar da Node.js da wasu saba da tasha.

  1. Ƙirƙiri babban fayil ɗin aikin kuma saita npm. Za mu ƙirƙiri my-projectbabban fayil ɗin kuma mu fara npm tare da -yhujja don guje wa tambayar mu duk tambayoyin mu'amala.

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

  2. Shigar da fakitin Yanar Gizo. Na gaba muna buƙatar shigar da abubuwan dogaro na ci gaban Webpack: webpackdon ainihin fakitin Yanar gizo, webpack-clidon haka za mu iya gudanar da umarnin Webpack daga tashar, webpack-dev-serverdon haka za mu iya gudanar da sabar ci gaban gida. Muna amfani --save-devda alamar cewa waɗannan abubuwan dogara kawai don amfanin ci gaba ne kawai ba don samarwa ba.

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

  3. Shigar Bootstrap. Yanzu za mu iya shigar da Bootstrap. Za mu kuma shigar da Popper tun da zazzagewar mu, popovers, da tukwici na kayan aiki sun dogara da shi don matsayinsu. Idan baku shirya yin amfani da waɗannan abubuwan haɗin gwiwa ba, zaku iya barin Popper anan.

    npm i --save bootstrap @popperjs/core

  4. Sanya ƙarin abubuwan dogaro. Baya ga fakitin Yanar Gizo da Bootstrap, muna buƙatar wasu ƴan abubuwan dogaro don shigo da su daidai da haɗa Bootstrap's CSS da JS tare da Webpack. Waɗannan sun haɗa da Sass, wasu masu lodi, da Autoprefixer.

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

Yanzu da muke da duk abubuwan dogaro da aka shigar, za mu iya zuwa aiki ƙirƙirar fayilolin aikin da shigo da Bootstrap.

Tsarin aikin

Mun riga mun ƙirƙiri my-projectbabban fayil ɗin kuma mun fara npm. Yanzu kuma za mu ƙirƙiri namu srcda distmanyan fayiloli don zagaye tsarin aikin. Gudun waɗannan abubuwan daga my-project, ko ƙirƙirar babban fayil da tsarin fayil da hannu wanda aka nuna a ƙasa.

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

Idan kun gama, cikakken aikinku yakamata yayi kama da haka:

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

A wannan lokacin, komai yana cikin wurin da ya dace, amma Webpack ba zai yi aiki ba saboda ba mu cika namu webpack.config.jsba tukuna.

Saita fakitin Yanar Gizo

Tare da shigar da abubuwan dogaro da babban fayil ɗin aikinmu da aka shirya mana don fara coding, yanzu za mu iya saita fakitin Yanar Gizo da gudanar da aikinmu a gida.

  1. Bude webpack.config.jsa cikin editan ku. Tunda babu komai, za mu buƙaci ƙara wasu saitunan tukunyar jirgi don mu fara sabar mu. Wannan ɓangaren saitin yana gaya wa Webpack ya nemo JavaScript na aikin mu, inda za a fitar da lambar da aka haɗa zuwa ( dist), da kuma yadda uwar garken haɓaka ya kamata ta kasance (cire daga distbabban fayil tare da sake saukewa mai zafi).

    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. Na gaba mu cika namu dist/index.html. Wannan shine shafin HTML ɗin Webpack zai loda a cikin mazuruftan don amfani da CSS ɗin da aka haɗa da JS za mu ƙara masa a matakai na gaba. Kafin mu iya yin haka, dole ne mu ba shi wani abin da za mu yi kuma mu haɗa da outputJS daga mataki na baya.

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

    Muna haɗa ɗan ƙaramin salo na Bootstrap anan tare da div class="container"kuma <button>don mu ga lokacin da Bootstrap's CSS ke lodawa ta Webpack.

  3. Yanzu muna buƙatar rubutun npm don gudanar da Webpack. Buɗe package.jsonkuma ƙara startrubutun da aka nuna a ƙasa (ya kamata ku riga kuna da rubutun gwaji). Za mu yi amfani da wannan rubutun don fara uwar garken Webpack dev na gida.

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

  4. Kuma a ƙarshe, za mu iya fara Webpack. Daga my-projectbabban fayil ɗin da ke tashar tashar ku, gudanar da sabon rubutun npm da aka ƙara:

    npm start
    Webpack dev uwar garken yana gudana

A cikin sashe na gaba da na ƙarshe zuwa wannan jagorar, za mu saita masu ɗaukar fakitin gidan yanar gizo da shigo da duk Bootstrap's CSS da JavaScript.

Shigo Bootstrap

Ana shigo da Bootstrap cikin fakitin Yanar Gizo yana buƙatar masu ɗaukar kaya da muka shigar a sashin farko. Mun shigar da su da npm, amma yanzu Webpack yana buƙatar saita su don amfani da su.

  1. Saita masu lodi a cikin webpack.config.js. Fayil ɗin daidaitawar ku yanzu ya cika kuma yakamata ya dace da snippet ɗin da ke ƙasa. Sabuwar sashi kawai anan shine modulesashin.

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

    Anan ga sake fasalin dalilin da yasa muke buƙatar duk waɗannan loda. style-loaderyana shigar da CSS cikin wani <style>abu a cikin <head>shafin HTML, css-loaderyana taimakawa tare da amfani @importda url(), postcss-loaderana buƙatar Autoprefixer, kuma sass-loaderyana ba mu damar amfani da Sass.

  2. Yanzu, bari mu shigo da Bootstrap's CSS. Ƙara waɗannan src/scss/styles.scssdon shigo da duk tushen Bootstrap Sass.

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

    Hakanan kuna iya shigo da takaddun salon mu daban-daban idan kuna so. Karanta takaddun shigo da Sass ɗin mu don cikakkun bayanai.

  3. Na gaba muna loda CSS kuma mu shigo da Bootstrap's JavaScript. Ƙara waɗannan src/js/main.jsdon loda CSS kuma shigo da duk Bootstrap's JS. Za a shigo da Popper ta atomatik ta Bootstrap.

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

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

    Hakanan zaka iya shigo da plugins na JavaScript daban-daban kamar yadda ake buƙata don kiyaye girma da yawa:

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

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

    Karanta takardun mu na JavaScript don ƙarin bayani kan yadda ake amfani da plugins na Bootstrap.

  4. Kuma kun gama! 🎉 Tare da tushen Bootstrap Sass da JS cikakke an ɗora su, uwar garken ci gaban gida ya kamata yanzu yayi kama da wannan.

    Webpack dev uwar garken yana gudana tare da Bootstrap

    Yanzu zaku iya fara ƙara kowane kayan aikin Bootstrap da kuke son amfani da su. Tabbatar duba cikakken aikin misalin fakitin Yanar gizo don yadda ake haɗa ƙarin Sass na al'ada da haɓaka ginin ku ta shigo da sassan Bootstrap's CSS da JS waɗanda kuke buƙata kawai.

Abubuwan ingantawa

Dangane da saitin ku, kuna iya aiwatar da wasu ƙarin tsaro da haɓaka saurin gudu masu amfani don gudanar da aikin a samarwa. Lura cewa waɗannan haɓakawa ba a amfani da su akan aikin misalin fakitin Yanar gizo kuma ya rage naku aiwatarwa.

Cire CSS

Abin da style-loadermuka tsara a sama ya dace yana fitar da CSS a cikin dam ɗin ta yadda da hannu loda fayil ɗin CSS a ciki dist/index.htmlbai zama dole ba. Wannan hanyar ba za ta yi aiki tare da tsauraran Manufofin Tsaro na Abun ciki ba, duk da haka, kuma yana iya zama cikas a aikace-aikacenku saboda girman girman.

Don raba CSS don mu iya loda shi kai tsaye daga dist/index.html, yi amfani da mini-css-extract-loaderplugin ɗin Webpack.

Da farko, shigar da plugin:

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

Sa'an nan kuma ta atomatik kuma yi amfani da plugin a cikin saitin 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
           },
           {

Bayan npm run buildsake kunnawa, za a sami sabon fayil dist/main.css, wanda zai ƙunshi duk CSS ɗin da src/js/main.js. Idan ka duba dist/index.htmla cikin burauzarka yanzu, salon zai ɓace, kamar yadda yake a yanzu dist/main.css. Kuna iya haɗa da ƙirƙirar CSS dist/index.htmlkamar haka:

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

Cire fayilolin SVG

Bootstrap's CSS ya haɗa da nassoshi da yawa zuwa fayilolin SVG ta data:URIs na layi. Idan kun ayyana Manufar Tsaron Abun ciki don aikinku wanda ke toshe data:URIs don hotuna, to waɗannan fayilolin SVG ba za su yi lodi ba. Kuna iya shawo kan wannan matsalar ta ciro fayilolin SVG na kan layi ta amfani da fasalin kayan masarufi na Webpack.

Saita fakitin Yanar Gizo don cire fayilolin SVG na layi kamar haka:

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

Bayan npm run buildsake kunnawa, zaku sami fayilolin SVG da aka ciro cikin dist/iconskuma an yi amfani da su da kyau daga CSS.

Ka ga wani abu ba daidai ba ko ya wuce a nan? Da fatan za a buɗe batu akan GitHub . Kuna buƙatar taimako don magance matsala? Bincika ko fara tattaunawa akan GitHub.