बूटस्ट्रैप ते वेबपैक

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

इस पेज पर

अंत तक छड्डना चांदे ओ? twbs/examples रिपोजिटरी थमां इस गाइड आस्तै स्रोत कोड ते कम्म करने आह् ला डेमो डाउनलोड करो . तुस लाइव संपादन आस्तै StackBlitz च बी उदाहरन खोल्ली सकदे ओ।

सेट अप

अस नमें सिरेआ बूटस्ट्रैप कन्नै इक वेबपैक प्रोजेक्ट बना करदे आं, इसलेई अस सचमुच शुरू करने थमां पैह् ले किश पूर्व शर्तें ते अग्गें दे कदम न। इस गाइड च तुसेंगी Node.js इंस्टॉल करना ते टर्मिनल कन्नै किश परिचित होना लोड़चदा ऐ.

इक प्रोजेक्ट फोल्डर बनाओ ते एनपीएम सेटअप करो। my-projectअस फोल्डर बनागे ते npm गी -yआर्गुमेंट कन्नै इनिशियलाइज करगे तां जे एह् असेंगी सारे इंटरएक्टिव सवाल पुच्छने थमां बचाई सकै।
```
mkdir my-project && cd my-project
npm init -y
```
वेबपैक इंस्टॉल करो। अगले असेंगी अपनी वेबपैक विकास निर्भरताएं गी इंस्टॉल करने दी लोड़ ऐ: webpackवेबपैक दे कोर आस्तै, webpack-cliतां जे अस टर्मिनल थमां वेबपैक कमांड चला सकचे, ते webpack-dev-serverइस चाल्ली अस इक लोकल विकास सर्वर चला सकचे। अस --save-devइस गल्लै दा संकेत देने दा इस्तेमाल करदे आं जे एह् निर्भरता सिर्फ विकास आस्तै गै ऐ ते उत्पादन आस्तै नेईं ऐ ।
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
बूटस्ट्रैप इंस्टॉल करो। हुण अस बूटस्ट्रैप इंस्टॉल करी सकने आं। अस Popper गी बी इंस्टॉल करगे की जे साढ़े ड्रॉपडाउन, पोपोवर, ते टूलटिप उंदी स्थिति आस्तै इस पर निर्भर करदे न। जेकर तुस उनें घटकें दा इस्तेमाल करने दी योजना नेईं बनांदे ओ तां तुस इत्थें पॉपर गी छड्डी सकदे ओ।
```
npm i --save bootstrap @popperjs/core
```
अतिरिक्त निर्भरताएं गी स्थापित करो। वेबपैक ते बूटस्ट्रैप दे अलावा, असेंगी बूटस्ट्रैप दे सीएसएस ते जेएस गी वेबपैक कन्नै ठीक ढंगै कन्नै आयात ते बंडल करने आस्तै किश होर निर्भरताएं दी लोड़ ऐ। इनें च सस्स, किश लोडर, ते ऑटोप्रिफिक्सर शामल न।
```
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अजें तगर अपना नेईं भरेआ ऐ।

वेबपैक गी कॉन्फ़िगर करो

निर्भरताएं गी इंस्टॉल करियै ते साढ़े प्रोजेक्ट फोल्डर साढ़े आस्तै कोडिंग शुरू करने आस्तै तैयार होने कन्नै, अस हून वेबपैक गी कॉन्फ़िगर करी सकने आं ते अपने प्रोजेक्ट गी लोकल रूप कन्नै चला सकने आं।

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. एह् 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>तां जे अस दिक्खने आं जे बूटस्ट्रैप दा सीएसएस वेबपैक आसेआ कदूं लोड होंदा ऐ।
हुण असेंगी वेबपैक चलाने लेई इक npm स्क्रिप्ट दी लोड़ ऐ। हेठ दित्ती गेदी स्क्रिप्ट गी खोलो package.jsonते जोड़ो start(तुंदे कोल पैह् ले थमां गै परीक्षण स्क्रिप्ट होनी चाहिदी)। अस इस स्क्रिप्ट दा इस्तेमाल अपने लोकल वेबपैक देव सर्वर गी शुरू करने आस्तै करगे।
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
ते आखरी च, अस वेबपैक शुरू करी सकने आं। अपने टर्मिनल च फोल्डर थमां my-project, उस नमीं जोड़ी दी npm स्क्रिप्ट चलाओ:
```
npm start
```

इस गाइड दे अगले ते अंतिम भाग च, अस वेबपैक लोडर सेट करगे ते बूटस्ट्रैप दे सारे CSS ते जावास्क्रिप्ट आयात करगे.

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

वेबपैक च बूटस्ट्रैप आयात करने आस्तै उनें लोडरें दी लोड़ होंदी ऐ जेह् ड़े असें पैह् ले भाग च इंस्टाल कीते हे। अस इन्हें गी 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'
          }
        ]
      }
    ]
  }
}

इत्थें इक रिकैप ऐ जे असेंगी इनें सारे लोडरें दी लोड़ कीऽ ऐ। HTML पृष्ठ दे च इक तत्व च style-loaderCSS गी इंजेक्ट करदा ऐ , ते , दा इस्तेमाल करने च मदद करदा ऐ , ऑटोप्रिफिक्सर आस्तै जरूरी ऐ , ते असेंगी Sass दा इस्तेमाल करने दी इजाजत दिंदा ऐ ।<style><head>css-loader@importurl()postcss-loadersass-loader

हुण, आओ बूटस्ट्रैप दा सीएसएस आयात करचै। src/scss/styles.scssबूटस्ट्रैप दे सारे स्रोत Sass आयात करने लेई निम्नलिखित गी जोड़ो .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
जेकर तुस चांदे ओ तां तुस साढ़ी स्टाइलशीट गी बी व्यक्तिगत तौर पर आयात करी सकदे ओ। विस्तार लेई साढ़े Sass आयात डॉक्स पढ़ो ।
अगले अस CSS लोड करदे आं ते बूटस्ट्रैप दी जावास्क्रिप्ट आयात करदे आं। 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'
```
बूटस्ट्रैप दे प्लगइन्स दा इस्तेमाल करने दे तरीकें बारै होर मती जानकारी आस्तै साढ़े जावास्क्रिप्ट डॉक्स पढ़ो .
ते तुसी खत्म होई गेदे ओ! 🎉 बूटस्ट्रैप दा स्रोत 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होग , जिस च 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:छवियें आस्तै URIs गी ब्लॉक करदी ऐ , तां एह् 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 पर सर्च करो जां इक चर्चा शुरू करो ।