मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
Check
in English

बूटस्ट्रैप एवं वेबपैक

वेबपैक कें उपयोग करयत अपनय प्रोजेक्ट मे बूटस्ट्रैप कें सीएसएस आ जावास्क्रिप्ट कें शामिल करय आ बंडल करय कें लेल आधिकारिक गाइड.

इस पेज पर
अंत तक छोड़य चाहैत छी? twbs/examples भंडार सं अइ गाइड कें लेल स्रोत कोड आ कार्य डेमो डाउनलोड करूं . लाइव संपादन के लेल अहां StackBlitz मे सेहो उदाहरण खोलि सकय छी .

तैयार केनाइ

हम नबका सं बूटस्ट्रैप के संग एकटा वेबपैक प्रोजेक्ट बना रहल छी, ताहि लेल हम सचमुच शुरू करय सं पहिने किछ पूर्वापेक्षा आओर अप फ्रंट स्टेप अछि. एहि गाइड मे अहां कें 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. अतिरिक्त निर्भरता स्थापित करू। वेबपैक आरू बूटस्ट्रैप के अलावा, हमरा सब क॑ बूटस्ट्रैप केरऽ सीएसएस आरू जेएस क॑ वेबपैक के साथ सही तरीका स॑ आयात आरू बंडल करै लेली कुछ आरू निर्भरता के जरूरत छै । एहि मे सास, किछु लोडर, आ ऑटोप्रिफिक्सर शामिल अछि ।

    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अपन सम्पादक मे खोलू । चूँकि ई खाली अछि, हमरा सभ केँ एहि मे किछु बॉयलरप्लेट कॉन्फ़िगरेशन जोड़य पड़त जाहि सँ हम अपन सर्वर शुरू क' सकब. कॉन्फ़िगरेशन केरऽ ई भाग वेबपैक क॑ बताबै छै कि हमरऽ प्रोजेक्ट केरऽ जावास्क्रिप्ट क॑ देखना छेलै, संकलित कोड क॑ कहाँ आउटपुट करलऽ जाय ( 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. ई एचटीएमएल पन्ना छै वेबपैक ब्राउज़र म॑ लोड करी क॑ बंडल करलऽ गेलऽ CSS आरू JS क॑ उपयोग करै लेली हम्मं॑ बाद म॑ एकरा म॑ जोड़बै । ओहि स पहिने एकरा रेंडर करबा लेल किछु देबय पड़त आ outputपिछला स्टेप स जेएस कए शामिल करय पड़त।

    <!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>हम देखब जे बूटस्ट्रैप के सीएसएस वेबपैक द्वारा कखन लोड कएल गेल अछि.

  3. आब हमरा सभकेँ वेबपैक चलाबय लेल एकटा npm स्क्रिप्ट चाही। नीचा देखाओल गेल स्क्रिप्ट खोलू package.jsonआ जोड़ू start(अहाँ लग पहिने सँ परीक्षण स्क्रिप्ट हेबाक चाही)। हम अपन स्थानीय वेबपैक देव सर्वर शुरू करबाक लेल एहि स्क्रिप्ट क उपयोग करब.

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

  4. आ अंत मे, हम वेबपैक शुरू क सकैत छी। अपन टर्मिनल मे फोल्डर सँ my-project, ओ नव जोडल गेल npm स्क्रिप्ट चलाउ:

    npm start
    वेबपैक देव सर्वर चल रहल अछि

अइ गाइड कें अगिला आ अंतिम खंड मे, हम वेबपैक लोडर कें सेटअप करब आ बूटस्ट्रैप कें सबटा सीएसएस आ जावास्क्रिप्ट आयात करब.

बूटस्ट्रैप आयात करू

वेबपैक मे बूटस्ट्रैप कें आयात करय कें लेल ओ लोडर कें आवश्यकता होयत छै जे हम पहिल खंड मे इंस्टॉल करलौं. हम एकरा npm के साथ इंस्टॉल केने छी, मुदा आब वेबपैक के एकर उपयोग करय लेल कॉन्फ़िगर करय के जरूरत अछि.

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

    बूटस्ट्रैप के प्लगइन के उपयोग करय के तरीका के बारे में बेसी जानकारी के लेल हमर जावास्क्रिप्ट डॉक्स पढ़ू .

  4. आ अहाँक काज भ' गेल! 🎉 बूटस्ट्रैप के स्रोत Sass आ JS के पूरा लोड भ गेल अछि, आब अहां के लोकल डेवलपमेंट सर्वर एहि तरहे देखय के चाही.

    बूटस्ट्रैप के साथ चल रहल वेबपैक डेव सर्वर

    आब अहां कोनों बूटस्ट्रैप घटक कें जोड़नाय शुरू कयर सकय छी जेकरा अहां उपयोग करय चाहय छी. अतिरिक्त कस्टम Sass क॑ कोना शामिल करलऽ जाय आरू केवल बूटस्ट्रैप केरऽ CSS आरू JS केरऽ वू भाग क॑ आयात करी क॑ अपनऽ बिल्ड क॑ अनुकूलित करलऽ जाय छै जेकरऽ जरूरत छै, ओकरा लेली पूरा वेबपैक उदाहरण परियोजना क॑ जरूर देखना सुनिश्चित करलऽ जाय ।

उत्पादन अनुकूलन

अपन सेटअप कें आधार पर, अहां उत्पादन मे परियोजना कें चलावय कें लेल उपयोगी किच्छू अतिरिक्त सुरक्षा आ गति अनुकूलन लागू करय चाहय सकय छी. ध्यान दिअ जे इ अनुकूलन वेबपैक उदाहरण परियोजना पर लागू नहि कैल गेल छै आ लागू करनाय अहां पर निर्भर छै.

सीएसएस निकालना

हम ऊपर कॉन्फ़िगर करलऽ 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>

एसवीजी फाइल निकालब

बूटस्ट्रैप कें सीएसएस मे इनलाइन यूआरआई कें माध्यम सं एसवीजी फाइल कें कई संदर्भ शामिल छै 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: [

फेर सं चलला के बाद npm run build, अहां के SVG फाइल dist/iconsके CSS मे निकालल गेल आओर ठीक सं संदर्भित मिलत.

एतय किछु गलत वा पुरान देखलहुँ? कृपया GitHub पर एकटा मुद्दा खोलू . समस्या निवारण मे मदद चाही? GitHub पर खोज करू अथवा चर्चा शुरू करू .