Webpack Structure

خب Webpack یک Module Bundler است — یعنی همه فایل‌های پروژه را مثل قطعات لگو برمی‌دارد، کنار هم می‌چیند و یک خروجی خوشگل و بهینه تحویلت می‌دهد.

در پروژه‌های فرانت‌اند مدرن، ما با کلی فایل سر و کار داریم:

• JavaScript
• CSS / SCSS
• Images (PNG, SVG, JPG)
• Fonts
• JSON

حالا Webpack میاد وسط و:

• وابستگی‌ها رو تشخیص می‌ده
• فایل‌ها رو به هم وصل می‌کنه
• یک خروجی فشرده، سریع و قابل استفاده تولید می‌کند

به زبان ساده:

اگر پروژه فرانت‌اند مغز داشت، Webpack همون مغزه

چرا به Webpack نیاز داریم؟

فرض کن ساختار پروژه این باشد:

src/
 ├─ index.js
 ├─ utils.js
 ├─ styles.css
 └─ logo.png

بدون Webpack:

• باید همه فایل‌ها را دستی در HTML لود کنی
• ترتیب لود اهمیت پیدا می‌کند
• بهینه‌سازی سخت می‌شود
• حجم فایل‌ها بالا می‌رود
• مدیریت وابستگی‌ها پیچیده می‌شود

با Webpack:

• Bundle کردن فایل‌ها
• Minify کردن کد
• Tree Shaking
• Code Splitting
• Hot Module Replacement (HMR)

نتیجه: مدیریت ساده‌تر، Performance بهتر، خروجی تمیزتر.

مفاهیم اصلی Webpack

Entry

• نقطه شروع Webpack برای خوندن پروژه

entry: "./src/index.js";

یعنی Webpack وارد این فایل می‌شود و همه مسیرهای import را دنبال می‌کند.

Output

• محل و نام فایل خروجی نهایی را مشخص می‌کند.

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
}

در این مثال:

• خروجی در پوشه dist
• با نام bundle.js

Loaders

چون Webpack فقط JavaScript را می‌فهمد، Loaderها کمکش می‌کنند بقیه فایل‌ها را هم پردازش کند.

Loaderهای معروف:

• css-loader
• style-loader
• babel-loader

مثال: پردازش CSS

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
,
    },
  ];
}

Plugins

خب Plugins قابلیت‌های پیشرفته‌تری اضافه می‌کنند.

مثال معروف:

const HtmlWebpackPlugin = require("html-webpack-plugin");

این پلاگین فایل HTML را می‌سازد و اسکریپت نهایی را داخل آن قرار می‌دهد.

نمونه کامل Webpack Config

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",

  entry: "./src/index.js",

  output: {
    filename: "bundle.[contenthash]
.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
,
      },
      {
        test: /\.(png|jpg|svg)$/,
        type: "asset/resource",
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],

  devServer: {
    port: 3000,
    open: true,
    hot: true,
  },
};

Webpack + Babel (ES6+)

برای استفاده از ES6+ باید Babel را اضافه کنیم:

npm install -D babel-loader @babel/core @babel/preset-env

// babel.config.js
module.exports = {
  presets: ["@babel/preset-env"]
,
};

مثال:

const sum = (a, b) => a + b;

Babel این کد را برای مرورگرهای قدیمی‌تر تبدیل می‌کند.

Mode: Development vs Production

Development Mode:

mode: "development";

• Build سریع
• Source Map
• Hot Reload

Production Mode:

mode: "production";

• Minify خودکار
• Tree Shaking
• کاهش حجم فایل
• Performance بهتر

Tree Shaking

حذف کدهای استفاده‌نشده در Production Mode.

export function used() {}
export function unused() {}

• اگر unused ایمپورت نشود، در خروجی نهایی حذف می‌شود.

جمع‌بندی نهایی

Webpack:

• رای مدیریت وابستگی‌ها
• ساخت خروجی بهینه
• پردازش CSS، تصاویر، فونت‌ها
• سازگار با React, Vue, Angular
• قابل تنظیم برای پروژه‌های کوچک تا Enterprise

اگرچه ابزارهای مدرن‌تری مانند Vite وجود دارند، اما Webpack همچنان یکی از قدرتمندترین و منعطف‌ترین ابزارهای باندلینگ است.