मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

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

Webpack इत्यस्य उपयोगेन Bootstrap इत्यस्य CSS तथा JavaScript इत्येतत् भवतः परियोजनायां कथं समाविष्टं कृत्वा बण्डल् करणीयम् इति आधिकारिकमार्गदर्शिका।

इस पृष्ठ पर
अन्त्यपर्यन्तं लङ्घयितुम् इच्छति वा ? अस्य मार्गदर्शिकायाः ​​स्रोतसङ्केतं कार्यप्रदर्शनं च twbs/examples भण्डारतः डाउनलोड् कुर्वन्तु । लाइव सम्पादनार्थं StackBlitz इत्यत्र अपि उदाहरणं उद्घाटयितुं शक्नुवन्ति ।

स्थापयति

वयं Bootstrap इत्यनेन सह Webpack परियोजनां शुद्धतः निर्मामः, अतः वयं वास्तवतः आरम्भं कर्तुं शक्नुमः तस्मात् पूर्वं केचन पूर्वापेक्षाः अपि च अग्रे पदानि सन्ति । अस्मिन् मार्गदर्शके भवद्भिः Node.js संस्थापितम् अस्ति तथा च टर्मिनल् इत्यनेन सह किञ्चित् परिचितता आवश्यकी अस्ति ।

  1. एकं प्रोजेक्ट् फोल्डर् रचयन्तु तथा npm सेटअप कुर्वन्तु । वयं my-projectफोल्डर् रचयिष्यामः तथा च npm इत्येतत् -yआर्गुमेण्ट् इत्यनेन सह प्रारम्भं कुर्मः यत् अस्मान् सर्वान् अन्तरक्रियाशीलप्रश्नान् न पृच्छति ।

    mkdir my-project && cd my-project
npm init -y

  2. Webpack संस्थापयन्तु। तदनन्तरं अस्माकं Webpack विकासनिर्भरताः संस्थापनीयाः सन्ति: webpackWebpack इत्यस्य कोरस्य कृते, webpack-cliअतः वयं टर्मिनलतः Webpack आदेशान् चालयितुं शक्नुमः, तथा च webpack-dev-serverवयं स्थानीयविकाससर्वरं चालयितुं शक्नुमः । --save-devएतानि आश्रयाणि केवलं विकासप्रयोगाय एव सन्ति न तु उत्पादनार्थं इति संकेतं दातुं वयं उपयुञ्ज्महे ।

    npm i --save-dev webpack webpack-cli webpack-dev-server

  3. बूटस्ट्रैप् संस्थापयन्तु। अधुना वयं Bootstrap इत्येतत् संस्थापयितुं शक्नुमः । वयं Popper अपि संस्थापयिष्यामः यतः अस्माकं dropdowns, popovers, tooltips च तेषां स्थितिकरणार्थं तस्मिन् निर्भरं भवति । यदि भवान् तान् घटकान् उपयोक्तुं योजनां न करोति तर्हि अत्र Popper इत्येतत् परित्यक्तुं शक्नोति ।

    npm i --save bootstrap @popperjs/core

  4. अतिरिक्त निर्भरताएं संस्थापित करें। Webpack तथा Bootstrap इत्येतयोः अतिरिक्तं, Bootstrap इत्यस्य CSS तथा JS इत्येतयोः सम्यक् आयातं कृत्वा Webpack इत्यनेन सह बण्डल् कर्तुं अस्माकं कतिपयानि अधिकानि निर्भरतानि आवश्यकानि सन्ति । एतेषु Sass, केचन loaders, Autoprefixer च सन्ति ।

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

इदानीं यदा अस्माकं सर्वाणि आवश्यकानि निर्भरतानि संस्थापितानि सन्ति तदा वयं प्रोजेक्ट् सञ्चिकाः निर्माय Bootstrap इत्यस्य आयातं कृत्वा कार्यं कर्तुं शक्नुमः ।

परियोजना संरचना

वयं पूर्वमेव my-projectफोल्डर् निर्माय npm इत्यस्य आरम्भं कृतवन्तः । इदानीं वयं project structure इत्यस्य गोलीकरणाय अस्माकं srcand फोल्डर् अपि रचयामः । 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 कार्यं न करिष्यति यतोहि वयं अस्माकं webpack.config.jsअद्यापि न पूरितवन्तः।

Webpack विन्यस्यताम्

निर्भरताः संस्थापिताः सन्ति तथा च अस्माकं परियोजनापुटं अस्माकं कृते कोडिंग् आरभ्यतुं सज्जं कृत्वा, वयम् अधुना Webpack विन्यस्तुं स्वस्य परियोजनां स्थानीयतया चालयितुं शक्नुमः ।

  1. webpack.config.jsस्वस्य सम्पादके उद्घाटयन्तु । यतः एतत् रिक्तम् अस्ति, अस्माभिः तस्मिन् किञ्चित् boilerplate config योजयितुं आवश्यकता भविष्यति येन वयं अस्माकं सर्वरं आरभुं शक्नुमः । config इत्यस्य एषः भागः Webpack इत्यस्मै कथयति यत् अस्माकं परियोजनायाः 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 पृष्ठं Webpack ब्राउजर् मध्ये लोड् करिष्यति बण्डल् 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>

    वयम् अत्र Bootstrap styling इत्यस्य किञ्चित् भागं च समाविष्टं कुर्मः div class="container"तथा च <button>येन वयं पश्यामः यत् Bootstrap इत्यस्य CSS Webpack द्वारा कदा लोड् भवति।

  3. अधुना Webpack चालयितुं अस्माकं कृते npm स्क्रिप्ट् आवश्यकम् अस्ति । अधः दर्शितं स्क्रिप्ट् उद्घाट्य package.jsonयोजयन्तु start(भवतः पूर्वमेव परीक्षणलिपिः भवितुम् अर्हति) । वयं अस्माकं स्थानीय Webpack dev सर्वरं आरभ्यतुं एतां स्क्रिप्ट् उपयुञ्ज्महे।

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

  4. अन्ते च वयं Webpack आरभ्यतुं शक्नुमः । स्वस्य टर्मिनल् मध्ये फ़ोल्डर् तः my-project, तत् नवीनं योजितं npm स्क्रिप्ट् चालयन्तु:

    npm start
    Webpack dev सर्वर चल रहा है

अस्य मार्गदर्शिकायाः ​​अग्रिमे अन्तिमे च विभागे वयं Webpack loaders इत्येतत् स्थापयित्वा Bootstrap इत्यस्य सर्वाणि CSS तथा JavaScript इत्येतत् आयातयिष्यामः ।

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

Webpack मध्ये Bootstrap इत्यस्य आयातार्थं प्रथमे विभागे अस्माभिः संस्थापितानां लोडराणां आवश्यकता भवति । वयं तानि npm इत्यनेन संस्थापितवन्तः, परन्तु अधुना 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 पृष्ठस्य the इत्यस्मिन् style-loaderCSS इत्येतत् <style>एलिमेण्ट् इत्यस्मिन् प्रविशति, and इत्यस्य उपयोगे सहायकं भवति , Autoprefixer इत्यस्य कृते आवश्यकम् अस्ति, तथा च अस्मान् Sass इत्यस्य उपयोगं कर्तुं शक्नोति ।<head>css-loader@importurl()postcss-loadersass-loader

  2. अधुना, Bootstrap इत्यस्य CSS इत्यस्य आयातं कुर्मः । src/scss/styles.scssBootstrap इत्यस्य सर्वान् स्रोतः Sass आयातयितुं निम्नलिखितम् to योजयन्तु ।

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

    भवान् इच्छति चेत् अस्माकं शैलीपत्रिकाः व्यक्तिगतरूपेण अपि आयातयितुं शक्नोति । विस्तरेण ज्ञातुं अस्माकं Sass import docs पठन्तु ।

  3. तदनन्तरं वयं CSS लोड् कृत्वा Bootstrap इत्यस्य JavaScript इम्पोर्ट् कुर्मः । src/js/main.jsCSS लोड् कर्तुं तथा Bootstrap इत्यस्य सर्वाणि JS आयातयितुं निम्नलिखितम् योजयन्तु । Bootstrap इत्यस्य माध्यमेन स्वयमेव Popper इत्यस्य आयातः भविष्यति ।

    // 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 docs पठन्तु ।

  4. त्वं च कृतः ! 🎉 Bootstrap इत्यस्य स्रोतः Sass तथा JS पूर्णतया लोड् कृत्वा अधुना भवतः स्थानीयविकाससर्वरः एतादृशः भवेत्।

    Bootstrap इत्यनेन सह चलति Webpack dev सर्वरः

    इदानीं भवान् यत्किमपि Bootstrap घटकं योजयितुं आरभुं शक्नोति यत् भवान् उपयोक्तुं इच्छति । अतिरिक्तं कस्टम् Sass कथं समाविष्टं कर्तव्यं तथा च केवलं Bootstrap इत्यस्य CSS तथा JS इत्यस्य भागान् आयात्य स्वस्य निर्माणस्य अनुकूलनं कथं करणीयम् इति सम्पूर्णं Webpack उदाहरणप्रकल्पं अवश्यं पश्यन्तु येषां आवश्यकता अस्ति।

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

स्वस्य सेटअपस्य आधारेण, भवान् उत्पादनकाले परियोजनां चालयितुं उपयोगी केचन अतिरिक्तसुरक्षा-वेग-अनुकूलनानि कार्यान्वितुं इच्छति । ध्यानं कुर्वन्तु यत् एते अनुकूलनानि Webpack उदाहरणप्रकल्पे न प्रयुक्तानि सन्ति तथा च कार्यान्वितुं भवतः कार्यम् अस्ति ।

CSS निष्कासयति

उपरि style-loaderवयं विन्यस्तं सुविधापूर्वकं CSS बण्डल् मध्ये उत्सर्जयति येन CSS सञ्चिकां मैन्युअल् रूपेण लोड् कर्तुं dist/index.htmlआवश्यकं नास्ति । एषः उपायः कठोरसामग्रीसुरक्षानीत्या सह कार्यं न कर्तुं शक्नोति तथापि, अपि च बृहत् बण्डल् आकारस्य कारणेन भवतः अनुप्रयोगे अटङ्कः भवितुम् अर्हति ।

CSS पृथक् कर्तुं यथा वयं प्रत्यक्षतया तः लोड् कर्तुं शक्नुमः , Webpack प्लगिन् इत्यस्य dist/index.htmlउपयोगं कुर्वन्तु ।mini-css-extract-loader

प्रथमं प्लगिन् संस्थापयन्तु :

npm install --save-dev mini-css-extract-plugin

ततः Webpack विन्यासे प्लगिन् इत्यस्य उदाहरणं कृत्वा उपयोगं कुर्वन्तु:

--- 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:Bootstrap इत्यस्य CSS इत्यस्मिन् inline URIs मार्गेण SVG सञ्चिकानां बहुविधसन्दर्भाः समाविष्टाः सन्ति । यदि भवान् स्वस्य परियोजनायाः कृते सामग्रीसुरक्षानीतिं परिभाषयति यत् data:चित्राणां कृते URIs अवरुद्धं करोति, तर्हि एताः SVG सञ्चिकाः न लोड् भविष्यन्ति । Webpack इत्यस्य asset modules feature इत्यस्य उपयोगेन inline SVG सञ्चिकाः निष्कास्य भवान् एतां समस्यां परितः प्राप्तुं शक्नोति ।

एतादृशानि इनलाइन SVG सञ्चिकाः निष्कासयितुं Webpack विन्यस्यताम्:

--- 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 इत्यत्र अन्वेषणं कुर्वन्तु अथवा चर्चां आरभत ।