मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
Check
in English

बूटस्ट्रॅप आनी वेबपॅक

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

ह्या पानाचेर
शेवटाक वचपाक जाय? ह्या मार्गदर्शका खातीर स्त्रोत कोड आनी काम करपी डेमो twbs/examples रिपॉझिटरींतल्यान डावनलोड करात . तुमी लायव्ह संपादना खातीर StackBlitz तय उदाहरण उगडूंक शकतात.

स्थापना

आमी बूटस्ट्रॅपा वांगडा सुरवाती सावन वेबपॅक प्रकल्प तयार करतात, देखून आमी खऱ्यांनीच सुरू करचे पयलीं कांय पूर्वगरज आनी मुखार पावलां आसात. ह्या मार्गदर्शकांत तुमकां Node.js प्रतिष्ठापीत आसपाक जाय आनी टर्मिनला कडेन कांय परिचिती आसपाक जाय.

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

    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. तो रिकामे आशिल्ल्यान, आमी आमचो सर्वर सुरू करूंक शकतले म्हणून तातूंत कांय बॉयलरप्लेट कॉन्फिग जोडची पडटली. संरचनेचो हो भाग वेबपॅकाक सांगता की आमच्या प्रकल्पाची जावास्क्रिप्ट सोदपाची आशिल्ली, संकलित कोड खंय ( 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फाटल्या पांवड्या वयल्यान जेएसचो आस्पाव करचो पडटलो.

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

    आमी हांगा Bootstrap स्टायलिंगाचें थोडें समाविष्ट केलां div class="container"आनी <button>ताका लागून आमी पळयतात की Bootstrap चें CSS Webpack कडल्यान केन्ना लोड जाता.

  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
    वेबपॅक डेव्ह सर्वर चालू आसा

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

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

वेबपॅकांत बूटस्ट्रॅप आयात करपाक आमी पयल्या विभागांत स्थापीत केल्ले लोडर जाय पडटात. आमी त्यो 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 पानाच्या the च्या घटकांत style-loaderCSS इंजेक्ट करता, आनी वापरपाक मदत करता , Autoprefixer खातीर गरजेचें आसा, आनी आमकां Sass वापरपाक परवानगी दिता.<style><head>css-loader@importurl()postcss-loadersass-loader

  2. आतां, बूटस्ट्रॅपाचो CSS आयात करूंया. src/scss/styles.scssBootstrap च्या सगळ्या स्रोत Sass आयात करपाक सकयल दिल्लें जोडात .

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

    तुमकां जाय जाल्यार तुमी आमचीं स्टायलशीट वैयक्तीकपणानय आयात करूंक शकतात. तपशीलां खातीर आमचे Sass आयात डॉक्स वाचात .

  3. फुडें आमी CSS लोड करतात आनी Bootstrap ची JavaScript आयात करतात. 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'

    Bootstrap च्या प्लगइन कशे वापरचे हाचे विशीं चड म्हायती खातीर आमचे JavaScript डॉक्स वाचात .

  4. आनी तुमी पुराय जाल्यात! 🎉 Bootstrap चो स्रोत Sass आनी JS पुरायपणान लोड जाल्ल्यान, तुमचो थळावो विकास सर्वर आतां असो दिसपाक जाय.

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

    आतां तुमकां वापरपाक जाय आशिल्ले खंयचेय Bootstrap घटक जोडपाक सुरवात करूं येता. तुमकां जाय आशिल्ले फकत Bootstrap च्या CSS आनी JS च्या भाग आयात करून अतिरिक्त सानुकूल Sass कसो समाविष्ट करचो आनी तुमचो बिल्ड अनुकूल करचो हाचे खातीर पुराय Webpack उदाहरण प्रकल्प पळोवपाची खात्री करात .

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

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

सीएसएस काडप

आमी वयर संरचीत केल्ली style-loaderसोयीस्करपणान बंडलांत CSS उत्सर्जीत करता जेणे करून हाताळणीन CSS फायल लोड dist/index.htmlकरप गरजेचें ना. हो पद्दत खर सामुग्री सुरक्षा धोरणासयत काम करूंक शकना, मात, आनी व्हडल्या बंडल आकाराक लागून तो तुमच्या ऍप्लिकेशनांत एक अडचण जावंक शकता.

आमी थेट पासून लोड करूंक शकतले म्हणून CSS वेगळो करपाक dist/index.html, mini-css-extract-loaderWebpack प्लगइन वापरात.

पयलीं, प्लगइन प्रतिष्ठापीत करात:

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 फायली लोड जावच्यो नात. Webpack चें मालमत्ता मॉड्यूल वैशिश्ट्य वापरून तुमी इनलायन 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 चेर सोद घेयात वा चर्चा सुरू करात.