મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
Check
in English

બુટસ્ટ્રેપ અને વેબપેક

Webpack નો ઉપયોગ કરીને તમારા પ્રોજેક્ટમાં બુટસ્ટ્રેપના CSS અને JavaScript ને કેવી રીતે સામેલ કરવા અને બંડલ કરવા તે માટેની સત્તાવાર માર્ગદર્શિકા.

આ પૃષ્ઠ પર
અંત સુધી છોડવા માંગો છો? twbs/examples repository માંથી આ માર્ગદર્શિકા માટે સ્ત્રોત કોડ અને કાર્યકારી ડેમો ડાઉનલોડ કરો . તમે લાઇવ એડિટિંગ માટે સ્ટેકબ્લિટ્ઝમાં ઉદાહરણ પણ ખોલી શકો છો.

સ્થાપના

અમે શરૂઆતથી બુટસ્ટ્રેપ સાથે વેબપેક પ્રોજેક્ટ બનાવી રહ્યાં છીએ, તેથી અમે ખરેખર પ્રારંભ કરી શકીએ તે પહેલાં કેટલીક પૂર્વજરૂરીયાતો અને આગળનાં પગલાં છે. આ માર્ગદર્શિકા માટે તમારે Node.js ઇન્સ્ટોલ કરેલ હોય અને ટર્મિનલ સાથે થોડી પરિચિતતા હોવી જરૂરી છે.

  1. એક પ્રોજેક્ટ ફોલ્ડર બનાવો અને npm સેટ કરો. અમે my-projectફોલ્ડર બનાવીશું અને npm ને -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. બુટસ્ટ્રેપ ઇન્સ્ટોલ કરો. હવે આપણે બુટસ્ટ્રેપ ઇન્સ્ટોલ કરી શકીએ છીએ. અમે પોપર પણ ઇન્સ્ટોલ કરીશું કારણ કે અમારા ડ્રોપડાઉન, પોપોવર્સ અને ટૂલટિપ્સ તેમની સ્થિતિ માટે તેના પર નિર્ભર છે. જો તમે તે ઘટકોનો ઉપયોગ કરવાનું વિચારતા નથી, તો તમે અહીં પોપરને છોડી શકો છો.

    npm i --save bootstrap @popperjs/core

  4. વધારાની અવલંબન સ્થાપિત કરો. વેબપેક અને બુટસ્ટ્રેપ ઉપરાંત, વેબપેક સાથે બુટસ્ટ્રેપના CSS અને JS ને યોગ્ય રીતે આયાત કરવા અને બંડલ કરવા માટે અમને થોડી વધુ નિર્ભરતાઓની જરૂર છે. આમાં Sass, કેટલાક લોડર્સ અને Autoprefixerનો સમાવેશ થાય છે.

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

હવે જ્યારે અમારી પાસે બધી જરૂરી નિર્ભરતાઓ સ્થાપિત છે, અમે પ્રોજેક્ટ ફાઇલો બનાવવાનું અને બુટસ્ટ્રેપને આયાત કરવાનું કામ કરી શકીએ છીએ.

પ્રોજેક્ટ માળખું

અમે પહેલાથી જ 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હજી સુધી ભર્યું નથી.

વેબપેક ગોઠવો

ડિપેન્ડન્સી ઇન્સ્ટોલ કરીને અને કોડિંગ શરૂ કરવા માટે અમારા પ્રોજેક્ટ ફોલ્ડર તૈયાર હોવાથી, અમે હવે વેબપેકને ગોઠવી શકીએ છીએ અને અમારા પ્રોજેક્ટને સ્થાનિક રીતે ચલાવી શકીએ છીએ.

  1. webpack.config.jsતમારા એડિટરમાં ખોલો . તે ખાલી હોવાથી, અમારે તેમાં કેટલીક બોઈલરપ્લેટ રૂપરેખા ઉમેરવાની જરૂર પડશે જેથી અમે અમારું સર્વર શરૂ કરી શકીએ. રૂપરેખાનો આ ભાગ વેબપેકને જણાવે છે કે અમારા પ્રોજેક્ટની JavaScript શોધવાનું હતું, કમ્પાઈલ કરેલા કોડને ( 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. આ 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>

    અમે અહીં સાથે થોડી બુટસ્ટ્રેપ સ્ટાઇલનો સમાવેશ કરી રહ્યાં છીએ div class="container"અને <button>જેથી અમે જોઈ શકીએ કે ક્યારે બુટસ્ટ્રેપનું CSS Webpack દ્વારા લોડ થાય છે.

  3. હવે અમને વેબપેક ચલાવવા માટે એનપીએમ સ્ક્રિપ્ટની જરૂર છે. નીચે દર્શાવેલ સ્ક્રિપ્ટ ખોલો package.jsonઅને ઉમેરો start(તમારી પાસે પહેલાથી જ ટેસ્ટ સ્ક્રિપ્ટ હોવી જોઈએ). અમે આ સ્ક્રિપ્ટનો ઉપયોગ અમારા સ્થાનિક વેબપેક ડેવ સર્વરને શરૂ કરવા માટે કરીશું.

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

  4. અને અંતે, અમે Webpack શરૂ કરી શકીએ છીએ. તમારા ટર્મિનલના my-projectફોલ્ડરમાંથી, તે નવી ઉમેરેલી npm સ્ક્રિપ્ટ ચલાવો:

    npm start
    વેબપેક ડેવ સર્વર ચાલી રહ્યું છે

આ માર્ગદર્શિકાના આગલા અને અંતિમ વિભાગમાં, અમે વેબપેક લોડર્સ સેટ કરીશું અને તમામ બુટસ્ટ્રેપના CSS અને JavaScriptને આયાત કરીશું.

બુટસ્ટ્રેપ આયાત કરો

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

    અમને આ બધા લોડરની શા માટે જરૂર છે તે અહીં એક રીકેપ છે. HTML પૃષ્ઠના એક તત્વમાં style-loaderCSS ને દાખલ કરે છે, ઉપયોગ કરવામાં મદદ કરે છે અને , Autoprefixer માટે જરૂરી છે, અને અમને Sass નો ઉપયોગ કરવાની મંજૂરી આપે છે.<style><head>css-loader@importurl()postcss-loadersass-loader

  2. હવે, ચાલો બુટસ્ટ્રેપનું CSS આયાત કરીએ. src/scss/styles.scssબુટસ્ટ્રેપના તમામ સ્ત્રોત Sass ને આયાત કરવા માટે નીચેના ઉમેરો .

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

    જો તમે ઇચ્છો તો તમે વ્યક્તિગત રીતે અમારી સ્ટાઇલશીટ્સ પણ આયાત કરી શકો છો. વિગતો માટે અમારા Sass આયાત દસ્તાવેજો વાંચો .

  3. આગળ આપણે CSS લોડ કરીએ છીએ અને બુટસ્ટ્રેપની JavaScript આયાત કરીએ છીએ. CSS લોડ કરવા માટે નીચેના ઉમેરો src/js/main.jsઅને તમામ બુટસ્ટ્રેપના JS આયાત કરો. પોપર બુટસ્ટ્રેપ દ્વારા આપમેળે આયાત કરવામાં આવશે.

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

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

    બંડલના કદને નીચે રાખવા માટે તમે વ્યક્તિગત રીતે JavaScript પ્લગિન્સને પણ આયાત કરી શકો છો:

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

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

    બુટસ્ટ્રેપના પ્લગિન્સનો ઉપયોગ કેવી રીતે કરવો તે વિશે વધુ માહિતી માટે અમારા JavaScript દસ્તાવેજો વાંચો .

  4. અને તમે પૂર્ણ કરી લો! 🎉 બુટસ્ટ્રેપના સ્ત્રોત Sass અને JS સંપૂર્ણપણે લોડ થયા પછી, તમારું સ્થાનિક વિકાસ સર્વર હવે આના જેવું દેખાવું જોઈએ.

    વેબપેક ડેવ સર્વર બુટસ્ટ્રેપ સાથે ચાલી રહ્યું છે

    હવે તમે ઉપયોગ કરવા માંગો છો તે કોઈપણ બુટસ્ટ્રેપ ઘટકો ઉમેરવાનું શરૂ કરી શકો છો. વધારાના કસ્ટમ Sass ને કેવી રીતે સમાવી શકાય અને બુટસ્ટ્રેપના CSS અને JS ના ફક્ત તમને જોઈતા ભાગોને આયાત કરીને તમારા બિલ્ડને ઑપ્ટિમાઇઝ કેવી રીતે કરવો તે માટે સંપૂર્ણ Webpack ઉદાહરણ પ્રોજેક્ટ તપાસવાની ખાતરી કરો .

ઉત્પાદન ઑપ્ટિમાઇઝેશન

તમારા સેટઅપ પર આધાર રાખીને, તમે પ્રોડક્શનમાં પ્રોજેક્ટ ચલાવવા માટે ઉપયોગી કેટલીક વધારાની સુરક્ષા અને સ્પીડ ઑપ્ટિમાઇઝેશનનો અમલ કરવા માગી શકો છો. નોંધ કરો કે આ ઑપ્ટિમાઇઝેશન્સ Webpack ઉદાહરણ પ્રોજેક્ટ પર લાગુ કરવામાં આવતાં નથી અને અમલીકરણ તમારા પર છે.

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 ફાઇલો એક્સ્ટ્રેક્ટ કરી રહ્યાં છીએ

data:બુટસ્ટ્રેપના CSSમાં ઇનલાઇન URI મારફતે SVG ફાઇલોના બહુવિધ સંદર્ભોનો સમાવેશ થાય છે . જો તમે તમારા પ્રોજેક્ટ માટે સામગ્રી સુરક્ષા નીતિ વ્યાખ્યાયિત કરો છો જે data:છબીઓ માટે URI ને અવરોધિત કરે છે, તો પછી આ 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: [

ફરીથી ચલાવ્યા પછી npm run build, તમને SVG ફાઈલો dist/iconsCSS માં કાઢવામાં આવેલી અને યોગ્ય રીતે સંદર્ભિત જોવા મળશે.

અહીં કંઈક ખોટું અથવા જૂનું દેખાય છે? કૃપા કરીને GitHub પર સમસ્યા ખોલો . મુશ્કેલીનિવારણ માટે મદદની જરૂર છે? GitHub પર શોધો અથવા ચર્ચા શરૂ કરો .