বুটষ্ট্ৰেপ আৰু ৱেবপেক

Webpack ব্যৱহাৰ কৰি আপোনাৰ প্ৰকল্পত Bootstrap ৰ CSS আৰু JavaScript কেনেকৈ অন্তৰ্ভুক্ত আৰু বাণ্ডল কৰিব লাগে তাৰ বাবে অফিচিয়েল সহায়ক ।

এই পৃষ্ঠাত

শেষলৈকে এৰিব বিচাৰেনে? এই সহায়কৰ বাবে উৎস ক'ড আৰু কাৰ্য্যকৰী ডেমো ডাউনলোড কৰক twbs/examples ভঁৰালৰ পৰা । আপুনি লাইভ সম্পাদনাৰ বাবে StackBlitz ত উদাহৰণটোও খোলিব পাৰে।

স্থাপন কৰা

আমি বুটষ্ট্ৰেপৰ সৈতে এটা Webpack প্ৰকল্প শূন্যৰ পৰা নিৰ্মাণ কৰি আছো, গতিকে আমি সঁচাকৈয়ে আৰম্ভ কৰাৰ আগতে কিছুমান পূৰ্বচৰ্ত আৰু আগৰ পদক্ষেপ আছে। এই সহায়কৰ বাবে আপুনি Node.js সংস্থাপন কৰা আৰু টাৰ্মিনেলৰ সৈতে কিছু পৰিচিতিৰ প্ৰয়োজন ।

এটা প্ৰজেক্ট ফোল্ডাৰ সৃষ্টি কৰক আৰু npm ছেটআপ কৰক। আমি my-projectফোল্ডাৰটো সৃষ্টি কৰিম আৰু যুক্তিটোৰ সৈতে npm আৰম্ভ কৰিম -yযাতে ই আমাক সকলো ইন্টাৰেক্টিভ প্ৰশ্ন সুধিব নোৱাৰে।
```
mkdir my-project && cd my-project
npm init -y
```
Webpack সংস্থাপন কৰক। ইয়াৰ পিছত আমি আমাৰ Webpack বিকাশ নিৰ্ভৰশীলতাসমূহ ইনষ্টল কৰিব লাগিব: webpackWebpack ৰ মূলৰ বাবে, webpack-cliযাতে আমি টাৰ্মিনেলৰ পৰা Webpack কমাণ্ডসমূহ চলাব পাৰো, আৰু webpack-dev-serverযাতে আমি এটা স্থানীয় বিকাশ চাৰ্ভাৰ চলাব পাৰো। আমি --save-devসংকেত দিবলৈ ব্যৱহাৰ কৰো যে এই নিৰ্ভৰশীলতাসমূহ কেৱল বিকাশৰ ব্যৱহাৰৰ বাবেহে আৰু উৎপাদনৰ বাবে নহয়।
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
বুটষ্ট্ৰেপ সংস্থাপন কৰক। এতিয়া আমি Bootstrap ইনষ্টল কৰিব পাৰো। আমি Popperও ইনষ্টল কৰিম কাৰণ আমাৰ ড্ৰপডাউন, popovers, আৰু টুলটিপসমূহ সিহঁতৰ অৱস্থানৰ বাবে ইয়াৰ ওপৰত নিৰ্ভৰ কৰে। যদি আপুনি সেই উপাদানসমূহ ব্যৱহাৰ কৰাৰ পৰিকল্পনা কৰা নাই, তেন্তে আপুনি ইয়াত Popper বাদ দিব পাৰে।
```
npm i --save bootstrap @popperjs/core
```
অতিৰিক্ত নিৰ্ভৰশীলতাসমূহ সংস্থাপন কৰক। ৱেবপেক আৰু বুটষ্ট্ৰেপৰ উপৰিও, আমাক বুটষ্ট্ৰেপৰ 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 এ কাম নকৰিব কাৰণ আমি আমাৰ 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 পৃষ্ঠা 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>
```
আমি ইয়াত বুটষ্ট্ৰেপ ষ্টাইলিংৰ অলপ অংশ div class="container"আৰু ৰ সৈতে অন্তৰ্ভুক্ত <button>কৰিছো যাতে আমি দেখিম যে বুটষ্ট্ৰেপৰ CSS Webpack দ্বাৰা কেতিয়া লোড কৰা হয়।
এতিয়া Webpack চলাবলৈ আমাক এটা npm স্ক্ৰিপ্টৰ প্ৰয়োজন। তলত দেখুওৱা লিপিটো খোলক package.jsonআৰু যোগ startকৰক (আপোনাৰ হাতত ইতিমধ্যে পৰীক্ষাৰ লিপি থাকিব লাগে)। আমি আমাৰ স্থানীয় Webpack dev চাৰ্ভাৰ আৰম্ভ কৰিবলৈ এই স্ক্ৰিপ্ট ব্যৱহাৰ কৰিম।
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
আৰু শেষত আমি Webpack আৰম্ভ কৰিব পাৰো। আপোনাৰ টাৰ্মিনেলৰ ফোল্ডাৰৰ পৰা my-project, সেই নতুনকৈ যোগ কৰা npm লিপি চলাওক:
```
npm start
```

এই সহায়কৰ পৰৱৰ্তী আৰু শেষ অংশত, আমি Webpack লোডাৰসমূহ সংস্থাপন কৰিম আৰু Bootstrap ৰ সকলো 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

এতিয়া, Bootstrap ৰ CSS আমদানি কৰা যাওক। src/scss/styles.scssBootstrap ৰ সকলো উৎস Sass আমদানি কৰিবলে নিম্নলিখিত যোগ কৰক ।
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
আপুনি ইচ্ছা কৰিলে আমাৰ ষ্টাইলশ্বীটসমূহো পৃথকে পৃথকে আমদানি কৰিব পাৰে। বিতংভাৱে জানিবলৈ আমাৰ Sass import docs পঢ়ক ।
ইয়াৰ পিছত আমি 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 নথিপত্ৰসমূহ পঢ়ক ।
আৰু তোমাৰ কাম শেষ হৈ গ’ল! 🎉 Bootstrap ৰ উৎস Sass আৰু JS সম্পূৰ্ণৰূপে লোড হোৱাৰ সৈতে, আপোনাৰ স্থানীয় বিকাশ চাৰ্ভাৰ এতিয়া এনেকুৱা দেখা যাব লাগে।

এতিয়া আপুনি ব্যৱহাৰ কৰিব বিচৰা যিকোনো 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:বুটষ্ট্ৰেপৰ 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: [

পুনৰ চলোৱাৰ পিছত npm run build, আপুনি SVG নথিপত্ৰসমূহ dist/iconsCSS ত এক্সট্ৰেক্ট কৰা আৰু সঠিকভাৱে উল্লেখ কৰা পাব।

ইয়াত কিবা ভুল বা পুৰণি দেখিছেনে? অনুগ্ৰহ কৰি GitHub ত এটা সমস্যা খোলক । সমস্যা সমাধানত সহায়ৰ প্ৰয়োজন? GitHub ত সন্ধান কৰক বা এটা আলোচনা আৰম্ভ কৰক ।