Entry and Context

كائن entry هو المكان الذي ينطلق منه webpack ليبدأ بناء الحزمة. أمّا context فهو نصّ يحمل مساراً مطلقاً إلى المجلَّد الذي يحتوي ملفّات نقاط الدخول.

context

string

المجلَّد الأساسي، ويكون مساراً مطلقاً، يُستعمل لتحليل نقاط الدخول والـ loaders انطلاقاً من التخصيص.

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

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

export default {
  // ...
  context: path.resolve(__dirname, "app"),
};

يستخدم webpack افتراضياً مجلَّد العمل الحالي لـ Node.js، غير أنّ من المُستحسَن أن تُمرِّر قيمة صريحة في تخصيصك، فبذلك يصبح تخصيصك مستقلاً عن CWD (مجلَّد العمل الحالي).

entry

string [string] object = { <key> string | [string] | object = { import string | [string], dependOn string | [string], filename string, layer string, runtime string | false }} (function() => string | [string] | object = { <key> string | [string] } | object = { import string | [string], dependOn string | [string], filename string, layer string, runtime string | false })

النقطة أو النقاط التي ينطلق منها webpack ليبدأ عملية حزم التطبيق. وإن مُرِّرت مصفوفة، فستُعالَج جميع عناصرها.

الوحدة المُحمَّلة ديناميكياً ليست نقطة دخول.

قاعدة جديرة بالاعتبار: نقطة دخول واحدة لكلّ صفحة HTML. فالـ SPA يحتاج إلى نقطة واحدة، أمّا الـ MPA فيحتاج إلى نقاط متعدّدة.

export default {
  // ...
  entry: {
    home: "./home.js",
    about: "./about.js",
    contact: "./contact.js",
  },
};

التسمية

إن مُرِّر نصّ أو مصفوفة نصوص، فإنّ الـ chunk يحصل على الاسم main. وإن مُرِّر كائن، فإنّ كلّ مفتاح فيه يكون اسماً لـ chunk، وقيمته تصف نقطة الدخول الموافقة له.

واصف نقطة الدخول

إن مُرِّر كائن، فقد تكون قيمة كلّ مفتاح نصّاً أو مصفوفة نصوص أو واصفاً:

export default {
  // ...
  entry: {
    home: "./home.js",
    shared: ["react", "react-dom", "redux", "react-redux"],
    catalog: {
      import: "./catalog.js",
      filename: "pages/catalog.js",
      dependOn: "shared",
      chunkLoading: false, // تعطيل الـ chunks التي تُحمَّل عند الطلب، ووضع كلّ شيء في الـ chunk الرئيسي.
    },
    personal: {
      import: "./personal.js",
      filename: "pages/personal.js",
      dependOn: "shared",
      chunkLoading: "jsonp",
      asyncChunks: true, // إنشاء chunks غير متزامنة تُحمَّل عند الطلب.
      layer: "name of layer", // تعيين الطبقة (layer) لنقطة دخول.
    },
  },
};

تُستعمَل صياغة الواصف لتمرير خيارات إضافية إلى نقطة الدخول.

اسم ملفّ الإخراج

افتراضياً، يُؤخذ اسم ملفّ الإخراج لـ chunk نقطة الدخول من output.filename، غير أنّ بإمكانك تحديد اسم إخراج خاص بنقطة دخول بعينها:

export default {
  // ...
  entry: {
    app: "./app.js",
    home: { import: "./contact.js", filename: "pages/[name].js" },
    about: { import: "./about.js", filename: "pages/[name].js" },
  },
};

استُعملت هنا صياغة الواصف لتمرير الخيار filename إلى نقاط دخول بعينها.

الاعتماديات

افتراضياً، يحتفظ كلّ chunk من chunks نقاط الدخول بجميع الوحدات التي يستعملها. ومع الخيار dependOn تستطيع مشاركة وحدات chunk نقطة دخولٍ مع غيرها:

export default {
  // ...
  entry: {
    app: { import: "./app.js", dependOn: "react-vendors" },
    "react-vendors": ["react", "react-dom", "prop-types"],
  },
};

لن يحتوي chunk المُسمَّى app على الوحدات التي يحتويها react-vendors.

كما يقبل الخيار dependOn مصفوفة نصوص:

export default {
  // ...
  entry: {
    moment: { import: "moment-mini", runtime: "runtime" },
    reactvendors: { import: ["react", "react-dom"], runtime: "runtime" },
    testapp: {
      import: "./wwwroot/component/TestApp.tsx",
      dependOn: ["reactvendors", "moment"],
    },
  },
};

كما يمكنك تحديد عدّة ملفّات لنقطة دخول واحدة باستعمال مصفوفة:

export default {
  // ...
  entry: {
    app: { import: ["./app.js", "./app2.js"], dependOn: "react-vendors" },
    "react-vendors": ["react", "react-dom", "prop-types"],
  },
};

نقطة الدخول الديناميكية

إن مُرِّرت دالّة، فستُستدعى مع كلّ حدث make.

لاحظ أنّ حدث make يُطلق حين يبدأ webpack وحين يقع كلّ إبطال (invalidation) عند مراقبة تغيّر الملفّات.

export default {
  // ...
  entry: () => "./demo",
};

أو

export default {
  // ...
  entry: () =>
    new Promise((resolve) => {
      resolve(["./demo", "./demo2"]);
    }),
};

نقاط دخول متعدّدة في مجلَّدات مختلفة

أحياناً ترغب في تنظيم نقاط الدخول داخل مجلَّدات منفصلة لتحسين البنية وسهولة الصيانة. وفيما يلي كيفية تعريف عدّة نقاط دخول واقعة في مجلَّدات مختلفة:

export default {
  entry: {
    "/scriptFolder/one/app": "./src/one/app.js",
    "/scriptFolder/two/main": "./src/two/main.js",
  },
};

ومثال على ذلك: يمكنك استعمال نقاط الدخول الديناميكية للحصول على نقاط الدخول الفعلية من مصدر خارجي (خادوم بعيد، أو نظام ملفّات، أو قاعدة بيانات):

webpack.config.js

export default {
  entry() {
    return fetchPathsFromSomeExternalSource(); // يُرجع promise يُحَلّ بقيمة مشابهة لـ ['src/main-layout.js', 'src/admin-layout.js']
  },
};

عند الدمج مع الخيار output.library: إن مُرِّرت مصفوفة، فلن يُصدَّر منها إلا العنصر الأخير.

Runtime chunk

تتيح هذه الخاصية تعيين runtime chunk لنقطة دخولٍ ما، وضبطه على false لتجنّب إنشاء runtime chunk جديد، وذلك منذ webpack v5.43.0.

ويتيح optimization.runtimeChunk ضبطه على المستوى العام لنقاط الدخول التي لم تُحدَّد صراحةً.

export default {
  // ...
  entry: {
    home: {
      import: "./home.js",
      runtime: "home-runtime",
    },
    about: {
      import: "./about.js",
      runtime: false,
    },
  },
};