Webpack لجافا سكريبت (Node.js): دليل شامل مع أمثلة

ما هو Webpack ولماذا هو مطلوب؟

\n\n

Webpack هو أداة تجميع وحدات (module bundler) قوية ومرنة لتطبيقات جافا سكريبت، تعمل في بيئة Node.js. مهمته الرئيسية هي أخذ العديد من الملفات (جافا سكريبت، CSS، صور، خطوط وموارد أخرى)، وتحليل تبعياتها، وتجميعها في حزمة واحدة أو عدة حزم محسّنة (bundle)، جاهزة للاستخدام في المتصفح.

\n\n

في تطوير الويب الحديث، نادرًا ما تتكون التطبيقات من ملف واحد. عادةً ما يتم تقسيم الكود إلى وحدات متعددة، ويتم استخدام مكتبات خارجية (حزم npm)، ومعالجات أولية (SASS، LESS)، و TypeScript، و JSX، وتقنيات أخرى. لا تستطيع المتصفحات دائمًا معالجة هذا العدد الكبير من الملفات والتبعيات بكفاءة. هنا يأتي دور Webpack.

\n\n

المهام الرئيسية لـ Webpack:

\n

\n
• تجميع الوحدات: دمج جميع ملفات جافا سكريبت وتبعياتها في حزمة واحدة أو عدة حزم.
\n
• تحويل الموارد: استخدام المُحمّلات (loaders) لتحويل الملفات (مثل SCSS إلى CSS، TypeScript إلى جافا سكريبت، الصور إلى base64).
\n
• التحسين: تصغير الكود، إزالة الكود غير المستخدم (tree shaking)، تقسيم الكود إلى أجزاء (code splitting) للتحميل البطيء.
\n
• إدارة البيئة: دعم أوضاع التطوير (development) والإنتاج (production) بإعدادات مختلفة.
\n
• خادم التطوير: خادم مدمج للتطوير مع إعادة تحميل الوحدات الساخنة (Hot Module Replacement — HMR).
\n

\n\n

Webpack هو المعيار الفعلي لتجميع مشاريع جافا سكريبت الحديثة، خاصة تطبيقات React و Vue.js و Angular.

\n\n

تثبيت Webpack

\n\n

للعمل مع Webpack، تحتاج إلى Node.js (الإصدار 12 أو أعلى) ومدير حزم npm (أو yarn). يتم التثبيت عبر npm. يُوصى بتثبيت Webpack محليًا في كل مشروع.

\n\n

الخطوة 1: تهيئة المشروع

\n

mkdir my-webpack-project\ncd my-webpack-project\nnpm init -y

\n\n

الخطوة 2: تثبيت الحزم الأساسية

\n

نقوم بتثبيت حزمتين أساسيتين: webpack و webpack-cli (واجهة سطر الأوامر).

\n

npm install --save-dev webpack webpack-cli

\n\n

الخطوة 3: تثبيت webpack-dev-server (اختياري، للتطوير)

\n

npm install --save-dev webpack-dev-server

\n\n

الخطوة 4: تثبيت المُحمّلات والإضافات (مثال لـ CSS)

\n

npm install --save-dev style-loader css-loader

\n\n

بعد التثبيت، سيظهر قسم devDependencies في ملف package.json مع الحزم المثبتة.

\n\n

بداية سريعة مع مثال كود

\n\n

لنقم بإنشاء مشروع بسيط يوضح العمل الأساسي لـ Webpack.

\n\n

هيكل المشروع:

\n

my-webpack-project/\n├── dist/          # مجلد للملفات المجمعة (يتم إنشاؤه تلقائيًا)\n├── src/           # الكود المصدري\n│   ├── index.js   # نقطة الدخول\n│   └── style.css  # الأنماط\n├── index.html     # ملف HTML\n├── package.json\n└── webpack.config.js  # إعدادات Webpack

\n\n

1. إنشاء ملف src/index.js:

\n

// src/index.js\nimport './style.css';\n\nfunction greet(name) {\n    console.log(`مرحبًا، ${name}!`);\n}\n\ngreet('Webpack');

\n\n

2. إنشاء ملف src/style.css:

\n

/* src/style.css */\nbody {\n    background-color: #f0f0f0;\n    font-family: Arial, sans-serif;\n}

\n\n

3. إنشاء ملف index.html:

\n

<!DOCTYPE html>\n<html lang="ar">\n<head>\n    <meta charset="UTF-8">\n    <title>عرض Webpack</title>\n</head>\n<body>\n    <script src="dist/bundle.js"></scrip