স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
Check
in English

বুটস্ট্র্যাপ এবং ওয়েবপ্যাক

ওয়েবপ্যাক ব্যবহার করে আপনার প্রকল্পে বুটস্ট্র্যাপের সিএসএস এবং জাভাস্ক্রিপ্ট কীভাবে অন্তর্ভুক্ত এবং বান্ডেল করবেন তার জন্য অফিসিয়াল গাইড।

এই পৃষ্ঠায়
শেষ এড়িয়ে যেতে চান? twbs/examples repository থেকে এই গাইডের জন্য সোর্স কোড এবং কাজের ডেমো ডাউনলোড করুন । আপনি লাইভ সম্পাদনার জন্য স্ট্যাকব্লিটজে উদাহরণটিও খুলতে পারেন।

সেটআপ

আমরা স্ক্র্যাচ থেকে বুটস্ট্র্যাপ সহ একটি ওয়েবপ্যাক প্রকল্প তৈরি করছি, তাই আমরা সত্যিই শুরু করার আগে কিছু পূর্বশর্ত এবং সামনের ধাপ রয়েছে। এই নির্দেশিকাটির জন্য আপনাকে 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. বুটস্ট্র্যাপ ইনস্টল করুন। এখন আমরা বুটস্ট্র্যাপ ইনস্টল করতে পারি। আমরা পপারও ইনস্টল করব যেহেতু আমাদের ড্রপডাউন, পপোভার এবং টুলটিপগুলি তাদের অবস্থানের জন্য এটির উপর নির্ভর করে। আপনি যদি সেই উপাদানগুলি ব্যবহার করার পরিকল্পনা না করেন তবে আপনি এখানে পপারকে বাদ দিতে পারেন।

    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এখনও আমাদের পূরণ করিনি।

ওয়েবপ্যাক কনফিগার করুন

নির্ভরতা ইনস্টল করা এবং কোডিং শুরু করার জন্য আমাদের প্রকল্প ফোল্ডার প্রস্তুত, আমরা এখন Webpack কনফিগার করতে পারি এবং স্থানীয়ভাবে আমাদের প্রকল্প চালাতে পারি।

  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পূর্ববর্তী ধাপ থেকে 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>যাতে আমরা দেখতে পাই কখন বুটস্ট্র্যাপের সিএসএস ওয়েবপ্যাক দ্বারা লোড হয়।

  3. ওয়েবপ্যাক চালানোর জন্য এখন আমাদের একটি npm স্ক্রিপ্ট দরকার। নীচে দেখানো স্ক্রিপ্টটি খুলুন package.jsonএবং যুক্ত করুন start(আপনার ইতিমধ্যেই পরীক্ষা স্ক্রিপ্ট থাকা উচিত)। আমরা আমাদের স্থানীয় ওয়েবপ্যাক ডেভ সার্ভার শুরু করতে এই স্ক্রিপ্টটি ব্যবহার করব।

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

  4. এবং অবশেষে, আমরা Webpack শুরু করতে পারি। my-projectআপনার টার্মিনালের ফোল্ডার থেকে , নতুন যোগ করা npm স্ক্রিপ্টটি চালান:

    npm start
    ওয়েবপ্যাক ডেভ সার্ভার চলছে

এই গাইডের পরবর্তী এবং চূড়ান্ত বিভাগে, আমরা ওয়েবপ্যাক লোডার সেট আপ করব এবং বুটস্ট্র্যাপের সমস্ত CSS এবং জাভাস্ক্রিপ্ট আমদানি করব।

বুটস্ট্র্যাপ আমদানি করুন

ওয়েবপ্যাকে বুটস্ট্র্যাপ আমদানি করার জন্য আমরা প্রথম বিভাগে ইনস্টল করা লোডার প্রয়োজন। আমরা সেগুলিকে 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'
          }
        ]
      }
    ]
  }
}

    কেন আমাদের এই সমস্ত লোডার দরকার তার একটি সংক্ষিপ্ত বিবরণ এখানে। এইচটিএমএল পৃষ্ঠার একটি উপাদানের মধ্যে style-loaderCSS ইনজেক্ট করে , ব্যবহার করতে সাহায্য করে এবং , অটোপ্রেফিক্সারের জন্য প্রয়োজনীয়, এবং আমাদের 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 লোড করি এবং বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট ইম্পোর্ট করি। src/js/main.jsCSS লোড করতে এবং বুটস্ট্র্যাপের সমস্ত 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'

    বুটস্ট্র্যাপের প্লাগইনগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও তথ্যের জন্য আমাদের জাভাস্ক্রিপ্ট ডক্স পড়ুন ।

  4. এবং তুমি করে ফেলেছ! 🎉 বুটস্ট্র্যাপের উত্স Sass এবং JS সম্পূর্ণরূপে লোড হওয়ার সাথে সাথে, আপনার স্থানীয় উন্নয়ন সার্ভারটি এখন এইরকম হওয়া উচিত।

    বুটস্ট্র্যাপের সাথে চলমান ওয়েবপ্যাক ডেভ সার্ভার

    এখন আপনি ব্যবহার করতে চান এমন কোনো বুটস্ট্র্যাপ উপাদান যোগ করা শুরু করতে পারেন। কীভাবে অতিরিক্ত কাস্টম Sass অন্তর্ভুক্ত করবেন এবং বুটস্ট্র্যাপের CSS এবং JS-এর আপনার প্রয়োজনীয় অংশগুলি আমদানি করে কীভাবে আপনার বিল্ডকে অপ্টিমাইজ করবেন তার সম্পূর্ণ ওয়েবপ্যাক উদাহরণ প্রকল্পটি পরীক্ষা করে দেখুন ৷

উত্পাদন অপ্টিমাইজেশান

আপনার সেটআপের উপর নির্ভর করে, আপনি প্রোডাকশনে প্রোজেক্ট চালানোর জন্য উপযোগী কিছু অতিরিক্ত নিরাপত্তা এবং গতির অপ্টিমাইজেশন প্রয়োগ করতে চাইতে পারেন। মনে রাখবেন যে এই অপ্টিমাইজেশনগুলি ওয়েবপ্যাক উদাহরণ প্রকল্পে প্রয়োগ করা হয় না এবং বাস্তবায়ন করা আপনার উপর নির্ভর করে।

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:বুটস্ট্র্যাপের সিএসএস ইনলাইন ইউআরআই -এর মাধ্যমে এসভিজি ফাইলের একাধিক রেফারেন্স অন্তর্ভুক্ত করে । আপনি যদি আপনার প্রকল্পের জন্য একটি বিষয়বস্তু নিরাপত্তা নীতি সংজ্ঞায়িত করেন যা data:ছবির জন্য URI গুলিকে ব্লক করে, তাহলে এই SVG ফাইলগুলি লোড হবে না৷ আপনি ওয়েবপ্যাকের সম্পদ মডিউল বৈশিষ্ট্য ব্যবহার করে ইনলাইন 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 এ অনুসন্ধান করুন বা আলোচনা শুরু করুন।