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

बूटस्ट्रॅप आणि वेबपॅक

Webpack वापरून तुमच्या प्रोजेक्टमध्ये Bootstrap चे CSS आणि JavaScript कसे समाविष्ट करायचे आणि बंडल कसे करायचे याचे अधिकृत मार्गदर्शक.

या पृष्ठावर
शेवटपर्यंत वगळू इच्छिता? या मार्गदर्शकासाठी स्रोत कोड आणि कार्यरत डेमो twbs/examples repository मधून डाउनलोड करा . तुम्ही थेट संपादनासाठी StackBlitz मध्ये उदाहरण देखील उघडू शकता .

सेटअप

आम्ही सुरवातीपासून बूटस्ट्रॅपसह एक वेबपॅक प्रकल्प तयार करत आहोत, त्यामुळे आम्ही खरोखर प्रारंभ करू शकण्यापूर्वी काही पूर्वतयारी आणि पुढील पायऱ्या आहेत. या मार्गदर्शकासाठी तुम्हाला Node.js स्थापित करणे आणि टर्मिनलशी काही परिचित असणे आवश्यक आहे.

  1. प्रोजेक्ट फोल्डर तयार करा आणि एनपीएम सेट करा. आम्ही 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. बूटस्ट्रॅप स्थापित करा. आता आपण Bootstrap इन्स्टॉल करू शकतो. आम्ही पॉपर देखील स्थापित करू कारण आमचे ड्रॉपडाउन, पॉपओव्हर्स आणि टूलटिप्स त्यांच्या स्थितीसाठी त्यावर अवलंबून असतात. तुम्ही ते घटक वापरण्याची योजना करत नसल्यास, तुम्ही येथे पॉपर वगळू शकता.

    npm i --save bootstrap @popperjs/core

  4. अतिरिक्त अवलंबित्व स्थापित करा. वेबपॅक आणि बूटस्ट्रॅप व्यतिरिक्त, आम्हाला बूटस्ट्रॅपचे सीएसएस आणि जेएस वेबपॅकसह योग्यरित्या आयात आणि बंडल करण्यासाठी आणखी काही अवलंबित्वांची आवश्यकता आहे. यामध्ये Sass, काही लोडर आणि Autoprefixer यांचा समावेश आहे.

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

आता आमच्याकडे सर्व आवश्यक अवलंबन स्थापित केले आहेत, आम्ही प्रकल्प फायली तयार करणे आणि बूटस्ट्रॅप आयात करण्याचे काम करू शकतो.

प्रकल्प रचना

आम्ही आधीच my-projectफोल्डर तयार केले आहे आणि एनपीएम सुरू केले आहे. आता आम्ही प्रोजेक्ट स्ट्रक्चर पूर्ण करण्यासाठी आमचे 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 वेबपॅकद्वारे लोड केले जाते तेव्हा पाहू.

  3. आता वेबपॅक चालवण्यासाठी आम्हाला एनपीएम स्क्रिप्टची आवश्यकता आहे. खाली दर्शविलेली स्क्रिप्ट उघडा package.jsonआणि जोडा start(तुमच्याकडे आधीपासूनच चाचणी स्क्रिप्ट असणे आवश्यक आहे). आम्ही आमचा स्थानिक वेबपॅक डेव्हल सर्व्हर सुरू करण्यासाठी या स्क्रिप्टचा वापर करू.

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

  4. आणि शेवटी, आम्ही वेबपॅक सुरू करू शकतो. तुमच्या टर्मिनलमधील my-projectफोल्डरमधून, नवीन जोडलेली एनपीएम स्क्रिप्ट चालवा:

    npm start
    वेबपॅक डेव्हल सर्व्हर चालू आहे

या मार्गदर्शकाच्या पुढील आणि अंतिम विभागात, आम्ही वेबपॅक लोडर सेट करू आणि बूटस्ट्रॅपचे सर्व CSS आणि JavaScript आयात करू.

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

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'

    Bootstrap चे प्लगइन कसे वापरावे याबद्दल अधिक माहितीसाठी आमचे JavaScript डॉक्स वाचा .

  4. आणि तुम्ही पूर्ण केले! 🎉 बूटस्ट्रॅपचा स्त्रोत Sass आणि JS पूर्णपणे लोड झाल्यामुळे, तुमचा स्थानिक विकास सर्व्हर आता यासारखा दिसला पाहिजे.

    बूटस्ट्रॅपसह चालणारे वेबपॅक डेव्हल सर्व्हर

    आता तुम्ही वापरू इच्छित असलेले कोणतेही बूटस्ट्रॅप घटक जोडणे सुरू करू शकता. तुम्हाला आवश्यक असलेले बूटस्ट्रॅपचे CSS आणि JS चे भाग आयात करून अतिरिक्त सानुकूल Sass कसे समाविष्ट करायचे आणि तुमची बिल्ड कशी ऑप्टिमाइझ करायची यासाठी संपूर्ण वेबपॅक उदाहरण प्रकल्प तपासण्याचे सुनिश्चित करा .

उत्पादन ऑप्टिमायझेशन

तुमच्या सेटअपच्या आधारावर, तुम्हाला प्रोडक्शनमध्ये प्रोजेक्ट चालवण्यासाठी उपयुक्त काही अतिरिक्त सुरक्षा आणि स्पीड ऑप्टिमायझेशन लागू करायचे आहेत. लक्षात घ्या की हे ऑप्टिमायझेशन Webpack उदाहरण प्रकल्पावर लागू केले जात नाही आणि ते अंमलात आणणे तुमच्यावर अवलंबून आहे.

CSS काढत आहे

आम्ही वर कॉन्फिगर केलेले style-loaderCSS बंडलमध्ये सहजतेने उत्सर्जित करते जेणेकरून 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 फाइल्स काढून तुम्ही या समस्येवर मात करू शकता.

याप्रमाणे इनलाइन एसव्हीजी फाइल्स काढण्यासाठी वेबपॅक कॉन्फिगर करा:

--- 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 वर शोधा किंवा चर्चा सुरू करा.