बुटस्ट्र्याप र वेबप्याक

Webpack प्रयोग गरेर तपाइँको परियोजनामा Bootstrap को CSS र JavaScript कसरी समावेश गर्ने र बन्डल गर्ने आधिकारिक गाइड।

यस पृष्ठमा

अन्त्यमा छोड्न चाहनुहुन्छ? twbs/examples repository बाट यस गाइडको लागि स्रोत कोड र काम गर्ने डेमो डाउनलोड गर्नुहोस् । तपाईं लाइभ सम्पादनको लागि StackBlitz मा उदाहरण पनि खोल्न सक्नुहुन्छ।

सेटअप

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

परियोजना फोल्डर र सेटअप npm सिर्जना गर्नुहोस्। हामी 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
```
बुटस्ट्र्याप स्थापना गर्नुहोस्। अब हामी Bootstrap स्थापना गर्न सक्छौं। हामी पनि Popper स्थापना गर्नेछौं किनभने हाम्रा ड्रपडाउनहरू, पपओभरहरू, र टूलटिपहरू तिनीहरूको स्थितिको लागि यसमा निर्भर हुन्छन्। यदि तपाइँ ती कम्पोनेन्टहरू प्रयोग गर्ने योजना बनाउनुहुन्न भने, तपाइँ यहाँ Popper लाई हटाउन सक्नुहुन्छ।
```
npm i --save bootstrap @popperjs/core
```
थप निर्भरताहरू स्थापना गर्नुहोस्। Webpack र Bootstrap को अतिरिक्त, Webpack को साथ Bootstrap को CSS र JS लाई ठीकसँग आयात र बन्डल गर्न हामीलाई केहि थप निर्भरताहरू चाहिन्छ। यसमा 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।

वेबप्याक कन्फिगर गर्नुहोस्

निर्भरताहरू स्थापना भएको र हाम्रो प्रोजेक्ट फोल्डर कोडिङ सुरु गर्नको लागि तयार छ, हामी अब वेबप्याक कन्फिगर गर्न र स्थानीय रूपमा हाम्रो परियोजना चलाउन सक्छौं।

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

यस गाइडको अर्को र अन्तिम खण्डमा, हामी वेबप्याक लोडरहरू सेटअप गर्नेछौं र सबै बुटस्ट्र्यापको CSS र JavaScript आयात गर्नेछौं।

बुटस्ट्र्याप आयात गर्नुहोस्

वेबप्याकमा बुटस्ट्र्याप आयात गर्न हामीले पहिलो खण्डमा स्थापना गरेका लोडरहरू चाहिन्छ। हामीले तिनीहरूलाई npm संग स्थापना गरेका छौं, तर अब Webpack तिनीहरूलाई प्रयोग गर्न कन्फिगर गर्न आवश्यक छ।

मा लोडरहरू सेटअप गर्नुहोस् 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

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

अब तपाईले प्रयोग गर्न चाहनु भएको कुनै पनि बुटस्ट्र्याप कम्पोनेन्टहरू थप्न सुरु गर्न सक्नुहुन्छ। तपाइँलाई आवश्यक पर्ने बुटस्ट्र्यापको CSS र JS को भागहरू मात्र आयात गरेर थप अनुकूलन Sass कसरी समावेश गर्ने र तपाइँको निर्माणलाई अप्टिमाइज गर्ने बारे पूर्ण वेबप्याक उदाहरण परियोजना जाँच गर्न निश्चित हुनुहोस् ।

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

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

CSS निकाल्दै

हामीले माथि 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हुनेछ, जसमा द्वारा आयात गरिएका सबै 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 फाइलहरू निकाल्न 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: [

फेरि दौडिएपछि , तपाईंले CSS बाट निकालिएका र राम्ररी सन्दर्भ npm run buildगरिएका SVG फाइलहरू फेला पार्नुहुनेछ ।dist/icons

यहाँ केहि गलत वा पुरानो देख्नुहुन्छ? कृपया GitHub मा एउटा मुद्दा खोल्नुहोस् । समस्या निवारण मद्दत चाहिन्छ? खोज्नुहोस् वा GitHub मा छलफल सुरु गर्नुहोस्।