Configuration

ربما لاحظت أن ملفات تكوين webpack نادرًا ما تبدو متطابقة تمامًا. والسبب أن ملف تكوين webpack هو ملف JavaScript يصدّر تكوينًا خاصًا بـ webpack. بعد ذلك يعالج webpack هذا التكوين بناءً على الخصائص المعرّفة فيه.

ولأنه وحدة Node.js قياسية، يمكنك فعل الآتي:

• استيراد ملفات أخرى باستخدام require(...) أو import
• استخدام أدوات من npm باستخدام require(...) أو import
• استخدام تعبيرات التحكم في JavaScript مثل ?: و if و for وغيرها
• استخدام الثوابت أو المتغيرات للقيم التي تتكرر كثيرًا
• كتابة دوال وتنفيذها لتوليد جزء من التكوين

استخدم هذه الإمكانات عندما تكون مناسبة.

مع أنها ممكنة تقنيًا، ينبغي تجنب الممارسات الآتية:

• الوصول إلى وسائط CLI عند استخدام webpack CLI. قد يجعل ذلك التكوين غير قابل للنقل وأصعب في الصيانة. بدلًا من ذلك، اكتب CLI خاصًا بك، أو استخدم --env لتمرير متغيرات البيئة.
• تصدير قيم غير حتمية؛ تشغيل webpack مرتين يجب أن ينتج الملفات نفسها.
• كتابة تكوينات طويلة؛ من الأفضل تقسيم التكوين إلى عدة ملفات.

توضح الأمثلة التالية كيف يمكن لتكوين webpack أن يكون معبرًا وقابلًا للضبط لأنه كود:

تكوين تمهيدي

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

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

export default {
  mode: "development",
  entry: "./foo.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "foo.bundle.js",
  },
};

راجع: قسم التكوين للاطلاع على جميع خيارات التكوين المدعومة.

استخدام عدة تكوينات

يدعم webpack تصدير عدة كائنات تكوين، وهذا مفيد عند بناء أهداف أو مخرجات مختلفة، مثل حزم منفصلة للعميل والخادم.

مع أن تكوينًا واحدًا يكفي لكثير من المشاريع، تساعد التكوينات المتعددة على تنظيم الإعدادات الأكثر تعقيدًا.

module.exports = [
  {
    entry: "./src/client.js",
    output: {
      filename: "client.bundle.js",
    },
  },
  {
    entry: "./src/server.js",
    output: {
      filename: "server.bundle.js",
    },
  },
];

أهداف متعددة

إلى جانب تصدير تكوين واحد على هيئة كائن أو دالة أو Promise، يمكنك تصدير عدة تكوينات.

راجع: تصدير عدة تكوينات

استخدام لغات تكوين أخرى

يقبل webpack ملفات تكوين مكتوبة بعدة لغات برمجة ولغات بيانات.

راجع: لغات التكوين