Entry Points

كما ذُكر في دليل البدء، توجد عدة طرق لتعريف خاصية entry في تكوين webpack. سنعرض الطرق التي يمكنك بها ضبط خاصية entry، إلى جانب شرح سبب فائدتها لك.

ببساطة، تخبر نقطة الدخول webpack من أين يبدأ بناء مخطط التبعيات الداخلي. انطلاقًا من هذا الملف، يتتبع webpack بشكل تكراري كل الوحدات والأصول المستوردة لتحديد ما يجب تضمينه في الحزمة النهائية.

تُكتب نتيجة هذه العملية لاحقًا إلى القرص وفقًا لتكوين output، الذي يتحكم في مكان وكيفية إصدار الملفات المجمعة.

صيغة نقطة دخول واحدة (مختصرة)

الاستخدام: entry: string | [string]

• string: ملف دخول واحد
• [string]: عدة ملفات دخول

webpack.config.js

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

صيغة نقطة الدخول الواحدة لخاصية entry هي اختصار لما يلي:

webpack.config.js

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

يمكننا أيضًا تمرير مصفوفة من مسارات الملفات إلى خاصية entry، وهذا ينشئ ما يُعرف باسم "multi-main entry". يكون ذلك مفيدًا عندما تريد حقن عدة ملفات مترابطة معًا ورسم تبعياتها داخل "chunk" واحد.

webpack.config.js

export default {
  entry: ["./src/file_1.js", "./src/file_2.js"],
};

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

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

مثال: حقن polyfill

export default {
  entry: {
    main: ["@babel/polyfill", "./src/index.js"],
  },
};

تُعد صيغة نقطة الدخول الواحدة خيارًا جيدًا عندما تريد إعداد تكوين webpack بسرعة لتطبيق أو أداة ذات نقطة دخول واحدة، مثل مكتبة. لكن هذه الصيغة لا تمنح مرونة كبيرة عند توسيع التكوين أو جعله قابلًا للنمو.

صيغة الكائن

الاستخدام: entry: { <entryChunkName> string | [string] } | {}

• <entryChunkName>: اسم entry chunk
• string: ملف دخول واحد
• [string]: عدة ملفات دخول
• {}: كائن فارغ

webpack.config.js

export default {
  entry: {
    app: "./src/app.js",
    adminApp: "./src/adminApp.js",
  },
};

صيغة الكائن أكثر تفصيلًا، لكنها الطريقة الأكثر قابلية للتوسع لتعريف نقطة أو نقاط الدخول في تطبيقك.

كائن EntryDescription

هو كائن يصف نقطة الدخول. يمكنك تحديد الخصائص الآتية:

• dependOn: نقاط الدخول التي تعتمد عليها نقطة الدخول الحالية. يجب تحميلها قبل تحميل نقطة الدخول الحالية.
• filename: يحدد اسم كل ملف إخراج على القرص.
• import: الوحدة أو الوحدات التي تُحمّل عند بدء التشغيل.
• library: يحدد خيارات المكتبة لتجميع مكتبة من نقطة الدخول الحالية.
• runtime: اسم runtime chunk. عند تعيينه، يُنشأ runtime chunk جديد. ويمكن تعيينه إلى false لتجنب إنشاء runtime chunk جديد منذ webpack 5.43.0.
• publicPath: يحدد عنوان URL عام لملفات الإخراج الخاصة بنقطة الدخول هذه عندما يُشار إليها في المتصفح. راجع أيضًا output.publicPath.

webpack.config.js

export default {
  entry: {
    a2: "dependingfile.js",
    b2: {
      dependOn: "a2",
      import: "./src/app.js",
    },
  },
};

لا ينبغي استخدام runtime و dependOn معًا في نقطة دخول واحدة، لذلك يكون التكوين التالي غير صالح وسيرمي خطأ:

webpack.config.js

export default {
  entry: {
    a2: "./a",
    b2: {
      runtime: "x2",
      dependOn: "a2",
      import: "./b",
    },
  },
};

تأكد من أن runtime لا يشير إلى اسم نقطة دخول موجودة. على سبيل المثال، سيرمي التكوين التالي خطأ:

export default {
  entry: {
    a1: "./a",
    b1: {
      runtime: "a1",
      import: "./b",
    },
  },
};

كذلك يجب ألا يكون dependOn دائريًا. المثال التالي سيرمي خطأ أيضًا:

export default {
  entry: {
    a3: {
      import: "./a",
      dependOn: "b3",
    },
    b3: {
      import: "./b",
      dependOn: "a3",
    },
  },
};

سيناريوهات

فيما يلي قائمة بتكوينات entry واستخداماتها الواقعية:

فصل مدخل التطبيق ومدخل vendor

webpack.config.js

export default {
  entry: {
    main: "./src/app.js",
    vendor: "./src/vendor.js",
  },
};

عند البناء في وضع production:

webpack.prod.js

export default {
  output: {
    filename: "[name].[contenthash].bundle.js", // eg: main.abc123.bundle.js, vendor.abc123.bundle.js
  },
};

عند البناء في وضع development:

webpack.dev.js

export default {
  output: {
    filename: "[name].bundle.js", // eg: main.bundle.js, vendor.bundle.js
  },
};

ماذا يفعل هذا؟ نخبر webpack أننا نريد نقطتي دخول منفصلتين، كما في المثال أعلاه.

لماذا؟ بهذه الطريقة يمكنك استيراد المكتبات أو الملفات المطلوبة التي لا تتغير كثيرًا، مثل Bootstrap و jQuery والصور وغيرها، داخل vendor.js، وسيتم تجميعها معًا في chunk خاص بها. يبقى content hash كما هو، مما يسمح للمتصفح بتخزينها مؤقتًا بشكل منفصل وبالتالي تقليل وقت التحميل.

تطبيق متعدد الصفحات

webpack.config.js

export default {
  entry: {
    pageOne: "./src/pageOne/index.js",
    pageTwo: "./src/pageTwo/index.js",
    pageThree: "./src/pageThree/index.js",
  },
};

ماذا يفعل هذا؟ نخبر webpack أننا نريد ثلاثة مخططات تبعيات منفصلة، كما في المثال أعلاه.

لماذا؟ في التطبيق متعدد الصفحات، سيجلب الخادم مستند HTML جديدًا لك. تعيد الصفحة تحميل هذا المستند الجديد وتُحمّل الأصول مرة أخرى. لكن هذا يمنحنا فرصة مميزة لاستخدام أشياء مثل optimization.splitChunks لإنشاء حزم من كود التطبيق المشترك بين كل صفحة. التطبيقات متعددة الصفحات التي تعيد استخدام قدر كبير من الكود أو الوحدات بين نقاط الدخول يمكن أن تستفيد كثيرًا من هذه التقنيات مع زيادة عدد نقاط الدخول.