Webpack

 🔥 Webpack হলো একটি module bundler, অর্থাৎ এটি JavaScript, CSS, images, HTML ইত্যাদি সব resource বা asset গুলোকে bundle করে এক জায়গায় এনে final optimized ফাইল বানায় — যা ব্রাউজারে efficiently load করা যায়।

---

🔍 সহজভাবে Webpack বোঝা যাক:

React অ্যাপে আমরা অনেকগুলো JS, CSS, Image ফাইল ব্যবহার করি। প্রতিটা ফাইল আলাদাভাবে ব্রাউজারে load করালে performance খারাপ হয়।

Webpack কাজ করে এসব ফাইলকে "module" হিসেবে ধরে এনে একটা বা কিছু bundle file তৈরি করে দেয়, যাতে:

✅ performance ভালো হয়
✅ dependency গুলো manage করা যায়
✅ assets optimize করা যায়

---

🛠️ Webpack কীভাবে কাজ করে?

Webpack কাজ করে নিচের ৩টি জিনিসের মাধ্যমে:

1. Entry

   1. কোন ফাইল থেকে শুরু করবে (যেমন index.js)

2. Loaders

   1. JS ছাড়া অন্য ফাইল (CSS, Image, Sass, etc) বুঝতে Loader দরকার হয়।

3. Plugins

   1. Optimization, HTML inject, environment variables ইত্যাদির জন্য।

4. Output

   1. Final bundle ফাইল কোথায় সংরক্ষণ করবে।

---

⚙️ Webpack কী কী করে?

✅ JavaScript মডিউল bundle করে
✅ CSS, Sass, Less handle করে
✅ Image, font, JSON ফাইল manage করে
✅ Babel এর সাথে মিলিয়ে modern JS → old JS এ রূপান্তর করে
✅ Optimization: minify, compress, lazy loading

---

📦 React অ্যাপে Webpack দরকার?

React অ্যাপ তৈরি করার জন্য আমরা সাধারনত:

1. Create React App (CRA) ব্যবহার করি

2. অথবা Vite ব্যবহার করি

👉 এদের মধ্যে CRA এর ভিতরে Webpack built-in আছে, তাই তুমি আলাদাভাবে Webpack setup করতে হয় না।

---

📌 উদাহরণ Webpack config:

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  },
  mode: 'development'
};

---

🆚 Webpack vs Vite

বিষয়	Webpack	Vite
Speed	ধীরে bundle করে	খুব দ্রুত HMR দেয়
Setup	জটিল হতে পারে	সহজ
Modern features	থাকতে পারে	আধুনিক built-in

---

🔚 সংক্ষেপে:

Webpack হচ্ছে এমন একটা টুল, যেটা তোমার অ্যাপের সব resource (JS, CSS, etc) bundle করে একটা optimized ফাইলে পরিণত করে — যাতে ব্রাউজার সহজে এবং দ্রুত লোড করতে পারে।

---

Webpack এর দৃষ্টিতে “module” মানে শুধু .js ফাইল না — বরং যেকোনো টাইপের file (যেমন CSS, images, fonts, JSON, ইত্যাদি) module হিসেবে ধরা হয়।

🧱 উদাহরণস্বরূপ:

File type	Module হিসেবে Webpack কী করে
.js	JavaScript code bundle করে
.css	CSS-loader দিয়ে JS-এ inject করে
.png, .jpg	file-loader বা asset module দিয়ে manage করে
.json	JSON data কে import করে দেয় JS ফাইলে
.svg, .woff	এসবকেও module হিসেবে handle করে

---

🧠 Webpack-এর পেছনের ধারণা:

Webpack যখন কোন ফাইল import করে (যেমন import './style.css'), তখন:

1. Loader ব্যবহার করে সেই ফাইলটি পড়ে

2. তারপর তাকে একটি JS-compatible module এ রূপান্তর করে

3. তারপর সেই module গুলোকে bundle করে দেয়

---

✅ উদাহরণ:

// index.js
import './style.css';   // CSS এখন module হিসেবে কাজ করছে
import image from './logo.png'; // PNG file এখন module

Webpack এর দৃষ্টিতে style.css এবং logo.png — দুটোই module।

---

🔚 সংক্ষেপে:

Webpack এ প্রতিটি static file — সেটা JS হোক বা CSS, PNG, SVG, JSON — সবই একটা করে module হিসেবে গন্য হয়।
এগুলোকেই Webpack dependency graph তৈরি করে final bundle বানায়।