জাভাস্ক্রিপ্টে Webpack বান্ডলারের কাজের নীতি

সাধারণত, ডেভেলপমেন্টের সময় আমাদের কাছে বিভিন্ন কোডের টুকরো সম্বলিত অনেকগুলি জাভাস্ক্রিপ্ট ফাইল থাকে। এগুলি আমাদের নিজস্ব কোডের অংশ হতে পারে, অথবা তৃতীয়-পক্ষের লাইব্রেরি হতে পারে। এর মানে দাঁড়ায় যে প্রতিটি such ফাইল আমাদের HTML ফাইলে script ট্যাগের মাধ্যমে সংযুক্ত করতে হবে।

এটি খুব ভাল নয়, কারণ অনেকগুলি সংযুক্ত ফাইল সাইট লোড করার গতি কমিয়ে দেয়। তাই লোডিং গতি বাড়ানোর জন্য সমস্ত কোডকে একটি ফাইলে রাখা প্রয়োজন।

যাইহোক, একটি সাধারণ ফাইলে কোড ডেভেলপ করাও খুব সুবিধাজনক নয়। তাই বর্তমানে নিম্নলিখিত পদ্ধতিটি অনুশীলন করা হয়: কোড আলাদা আলাদা ফাইলে ডেভেলপ করা হয়, এবং তারপর একটি বান্ডলার ব্যবহার করে একটি সাধারণ ফাইলে assembled করা হয়, যা HTML ফাইলে সংযুক্ত করা হয়।

আলাদা ফাইলগুলি ES মডিউল হিসাবে কাজ করে। এই মডিউলগুলি অন্য ফাইলে import কমান্ডের মাধ্যমে সংযুক্ত করা হয়।

সাধারণত একটি প্রধান ফাইল তৈরি করা হয়, যাতে অন্যান্য সমস্ত ফাইল সংযুক্ত করা হয়। এই ফাইলটিকে এন্ট্রি পয়েন্ট বলা হয়।

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

সাধারণত, প্রোগ্রামার যে কোড লিখেন তা src ফোল্ডারে অবস্থিত, এবং assembled কোড dist ফোল্ডারে রাখা হয়।

বান্ডলার বিল্ড মোড নিয়ন্ত্রণ করতেও দেয়। 'development' মোড ডেভেলপমেন্ট প্রক্রিয়ার জন্য তৈরি। এটি ডেভেলপমেন্টের জন্য সুবিধাজনকভাবে কোড সংগ্রহ করে। 'production' মোড চূড়ান্ত কোডের জন্য তৈরি, যা কাজে deployed হবে। এই মোডে কোড মিনিফাই করা হবে, যাতে এর আকার কমানো যায় এবং লোডিং গতি বাড়ানো যায়।