Concepts

في جوهره، webpack هو مجمّع وحدات ثابت لتطبيقات JavaScript الحديثة. عندما يعالج webpack تطبيقك، يبني داخليًا مخطط تبعيات من نقطة دخول واحدة أو أكثر، ثم يجمع كل وحدة يحتاجها مشروعك في حزمة واحدة أو أكثر، وهي أصول ثابتة تُستخدم لتقديم المحتوى.

منذ الإصدار 4.0.0، لا يحتاج webpack إلى ملف تكوين لتجميع مشروعك. ومع ذلك، فهو قابل للتكوين بدرجة كبيرة حتى يلائم احتياجاتك بشكل أفضل.

للبدء، تحتاج فقط إلى فهم المفاهيم الأساسية:

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

تهدف هذه الصفحة إلى تقديم نظرة عامة عالية المستوى على هذه المفاهيم، مع روابط إلى استخدامات مفصلة لكل مفهوم.

لفهم أفضل للأفكار التي تقف خلف مجمعات الوحدات وكيف تعمل داخليًا، راجع هذه الموارد:

• Manually Bundling an Application
• Live Coding a Basic Module Bundler
• Detailed Explanation of a Basic Module Bundler

نقطة الدخول

تحدد نقطة الدخول الوحدة التي يجب أن يستخدمها webpack ليبدأ بناء مخطط التبعيات الداخلي. سيكتشف webpack الوحدات والمكتبات الأخرى التي تعتمد عليها نقطة الدخول، مباشرة أو غير مباشرة.

القيمة الافتراضية هي ./src/index.js، لكن يمكنك تحديد نقطة دخول مختلفة أو عدة نقاط دخول عبر تعيين خاصية entry في تكوين webpack. على سبيل المثال:

webpack.config.js

export default {
  entry: "./path/to/my/entry/file.js",
};

الإخراج

تخبر خاصية output webpack بمكان إصدار الحزم التي ينشئها وكيفية تسمية هذه الملفات. القيمة الافتراضية هي ./dist/main.js لملف الإخراج الرئيسي و./dist لأي ملف آخر مولد.

يمكنك ضبط هذا الجزء من العملية عبر تحديد حقل output في تكوينك:

webpack.config.js

import path from "node:path";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: "./path/to/my/entry/file.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "my-first-webpack.bundle.js",
  },
};

في المثال أعلاه، نستخدم خاصيتي output.filename و output.path لإخبار webpack باسم الحزمة والمكان الذي نريد إصدارها إليه. وإذا كنت تتساءل عن وحدة path المستوردة في الأعلى، فهي وحدة Node.js أساسية تُستخدم للتعامل مع مسارات الملفات.

المحمّلات

يفهم webpack مباشرة ملفات JavaScript و JSON فقط. تسمح المحمّلات لـ webpack بمعالجة أنواع ملفات أخرى وتحويلها إلى وحدات صالحة يمكن أن يستهلكها تطبيقك وتُضاف إلى مخطط التبعيات.

على مستوى عالٍ، تمتلك المحمّلات خاصيتين في تكوين webpack:

1. خاصية test تحدد أي ملف أو ملفات يجب تحويلها.
2. خاصية use تحدد أي محمّل يجب استخدامه لإجراء التحويل.

webpack.config.js

import path from "node:path";

export default {
  output: {
    filename: "my-first-webpack.bundle.js",
  },
  module: {
    rules: [{ test: /\.js$/, use: "babel-loader" }],
  },
};

عرّف التكوين أعلاه خاصية rules لوحدة واحدة بخصيصتين مطلوبتين: test و use. هذا يخبر مترجم webpack بما يلي:

"يا مترجم webpack، عندما تصادف مسارًا ينتهي بملف '.js' داخل تعليمة require() أو import، استخدم babel-loader لتحويله قبل إضافته إلى الحزمة."

يمكنك الاطلاع على مزيد من التخصيص عند إدراج المحمّلات في قسم المحمّلات.

الإضافات

بينما تُستخدم المحمّلات لتحويل أنواع معينة من الوحدات، يمكن الاستفادة من الإضافات لتنفيذ نطاق أوسع من المهام مثل تحسين الحزم وإدارة الأصول وحقن متغيرات البيئة.

لاستخدام إضافة، تحتاج إلى import لها وإضافتها إلى مصفوفة plugins. معظم الإضافات قابلة للتخصيص عبر الخيارات. وبما أنه يمكنك استخدام الإضافة نفسها عدة مرات في التكوين لأغراض مختلفة، تحتاج إلى إنشاء نسخة منها باستدعائها مع العامل new.

webpack.config.js

import HtmlWebpackPlugin from "html-webpack-plugin";
import webpack from "webpack"; // to access built-in plugins

export default {
  module: {
    rules: [{ test: /\.js$/, use: "babel-loader" }],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};

في المثال أعلاه، تنشئ إضافة html-webpack-plugin ملف HTML لتطبيقك وتحقن فيه تلقائيًا كل الحزم المولدة.

استخدام الإضافات في تكوين webpack مباشر، لكن توجد حالات استخدام كثيرة تستحق استكشافًا أعمق. تعرّف أكثر عنها هنا.

الوضع

عبر تعيين معامل mode إلى development أو production أو none، يمكنك تفعيل التحسينات المدمجة في webpack والمناسبة لكل بيئة. القيمة الافتراضية هي production.

export default {
  mode: "production",
};

تعرّف أكثر على تكوين mode هنا وعلى التحسينات التي تحدث مع كل قيمة.

توافق المتصفحات

يدعم webpack كل المتصفحات المتوافقة مع ES5؛ لا يدعم IE8 وما قبله. يحتاج webpack إلى Promise من أجل import() و require.ensure(). إذا أردت دعم متصفحات أقدم، فستحتاج إلى تحميل polyfill قبل استخدام هذه التعبيرات.

البيئة

يتطلب webpack 5 إصدار Node.js 10.13.0 أو أحدث.