मुख्य सामग्री पर जाईं डॉक्स नेविगेशन पर जाईं
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. ई HTML पन्ना ह वेबपैक ब्राउजर में लोड हो जाई बंडल कइल सीएसएस आ जेएस के उपयोग करे खातिर हमनी के बाद के चरण में एकरा में जोड़ब जा। हमनी के अयीसन करे से पहिले ओकरा के रेंडर करे खाती कुछ देवे के होई अवुरी 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 के इंजेक्ट करेला, आ के इस्तेमाल में मदद करेला , ऑटोप्रिफिक्सर खातिर जरूरी बा, आ हमनी के Sass के इस्तेमाल करे के अनुमति देला।<style><head>css-loader@importurl()postcss-loadersass-loader

  2. अब, बूटस्ट्रैप के सीएसएस आयात कइल जाव. src/scss/styles.scssबूटस्ट्रैप के सभ स्रोत Sass आयात करे खातिर निम्नलिखित में जोड़ीं ।

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

    अगर रउरा चाहत बानी त हमनी के स्टाइलशीट के अलग-अलग आयात भी कर सकेनी। विस्तार से जाने खातिर हमनी के Sass आयात डॉक्स पढ़ीं ।

  3. एकरा बाद हमनी के सीएसएस लोड क के बूटस्ट्रैप के जावास्क्रिप्ट आयात करेनी जा। src/js/main.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 शामिल कइल जा सकेला आ अपना बिल्ड के अनुकूलित कइल जा सकेला खाली बूटस्ट्रैप के CSS आ JS के ओह हिस्सा के आयात करके जवना के रउरा जरूरत बा.

उत्पादन के अनुकूलन के बारे में बतावल गइल बा

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

सीएसएस निकालल जा रहल बा

हमनी के style-loaderऊपर कॉन्फ़िगर कइल सुविधाजनक रूप से बंडल में सीएसएस उत्सर्जित करेला ताकि मैन्युअल रूप से सीएसएस फाइल में लोड कइल 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:छवि सभ खातिर URI सभ के ब्लॉक करे ला, तब ई 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 में निकालल आ ठीक से संदर्भित मिल जाई।

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