تكوين إدخال مفهوم Webpack الأساسي (إدخال)

إذا كانت تبعيات كل وحدة في المشروع تعتبر شجرة، فإن الإدخال هو جذر شجرة التبعية.

سيتم تغليف هذه الوحدات التابعة في قطعة عند التعبئة. إذن ما هي القطعة؟

تعني كلمة Chunk حرفيًا كتلة التعليمات البرمجية، والتي يمكن فهمها في Webpack على أنها بعض الوحدات التي تم استخلاصها وتعبئتها. إنها مثل حقيبة ملفات تحتوي على العديد من الملفات، حيث تضيف كل وحدة Webpack طبقة من التغليف من الخارج لتشكل قطعة:

اعتمادًا على التكوين المحدد، قد يتم إنشاء قطعة واحدة أو أكثر عند حزم المشروع.

يمكن تعريف إدخالات متعددة في المشروع، وسيؤدي كل إدخال إلى إنشاء مورد نتيجة.

على سبيل المثال، هناك مدخلان في مشروعنا، src/index.js و src/lib.js dist/index.js الظروف العادية dist/lib.js .

في بعض الحالات الخاصة، قد يؤدي الإدخال الواحد إلى إنشاء أجزاء متعددة وفي النهاية

إدخالات حزمة متعددة.

المعلمات: إدخال الإدخال

• هو المدخل إلى وحدة التكوين ، والتي يمكن تلخيصها في الإدخال. ستكون الخطوة الأولى لتنفيذ Webpack للبناء هي البحث عن جميع الوحدات المعتمدة على الإدخال وتحليلها بشكل متكرر،
• وإذا لم يكن الأمر كذلك بعد تعبئتها، سيقوم Webpack بالإبلاغ عن خطأ والخروج من

Module.exports = {
	الإدخال:'./src/index.js', // يشير إلى ملف الإدخال، أي الدخول إلى مشروعنا من Index.js};

①مثال نوع الإدخال

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

② اسم القطعة

Webpack سيعطي اسمًا لكل قطعة تم إنشاؤها يرتبط اسم القطعة بتكوين الإدخال:

• إذا كان الإدخال إذا كانت سلسلة أو مصفوفة، فسيتم إنشاء قطعة واحدة فقط في هذا الوقت، ويكون اسم القطعة رئيسيًا؛
• إذا كان الإدخال كائنًا، فقد تظهر قطع متعددة في هذا الوقت مفتاح في زوج قيمة مفتاح الكائن

③ديناميكيات تكوين الإدخال.

إذا كان هناك صفحات متعددة في المشروع، فأنت بحاجة إلى تكوين إدخال لكل صفحة، ولكن قد يستمر عدد هذه الصفحات في النمو، ثم يتم تكوين الإدخال سوف تتأثر بعوامل أخرى ولا يمكن كتابتها كقيمة ثابتة. الحل هو تعيين الإدخال في دالة لإرجاع التكوين المذكور أعلاه ديناميكيًا، ويكون الرمز كما يلي:

// إدخال دالة متزامنة: () => {.
  يعود {
    أ:'./الصفحات/أ'،
    ب:'./الصفحات/ب'،
  }
};
// إدخال دالة غير متزامنة: () => {
  إرجاع وعد جديد((الحل)=>{
    حل({
       أ:'./الصفحات/أ'،
       ب:'./الصفحات/ب'،
    });
  });
};

المعلمة:

سيستخدم السياق Webpack السياق كدليل جذر عند البحث عن الملفات ذات المسارات النسبية . يتم تعيين السياق افتراضيًا إلى دليل العمل الحالي حيث يبدأ Webpack. إذا كنت تريد تغيير التكوين الافتراضي للسياق، فيمكنك تعيينه على هذا النحو في ملف التكوين:

Module.exports = {
	السياق: path.resolve(__dirname, 'app')
}

لاحظ أن السياق يجب أن يكون سلسلة مسار مطلقة.

تكوين ملف الإدخال الفردي

عن طريق إحضار المعلمة webpack --context عند بدء تشغيل Webpack.

الاستخدام: entry:string|Array<string>

1. بناء الجملة المختصر

webpack.config.js

// نظرًا لأنه مفرد، يمكن اختصاره على النحو التالي:
وحدة التصدير = {
  الإدخال: "./main.js"
};

تمت كتابة تكوين الإدخال أعلاه فعليًا بالاختصار التالي

Module.exports = {
  الإدخال: {
    رئيسي: './main.js'
  }
};

2.

وحدة بناء جملة المصفوفة.exports = {
  الإدخال: {
    الرئيسي:['./main.js','./main2.js']
  }
};

وظيفة التمرير في المصفوفة هي دمج موارد متعددة مسبقًا عند التعبئة، سيستخدم Webpack العنصر الأخير في المصفوفة كمسار إدخال

فعلي طريقة تغيير اسم القطعة، يمكن أن تكون "الرئيسية" الافتراضية فقط.

تكوين ملف الإدخال المتعدد

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

بناء جملة الكائن.الصادرات

= {
  الإدخال: {
    التطبيق: "./src/app.js"،
    البائعون: './src/vendors.js'
  }
};

سيكون هذا أكثر تعقيدًا. ومع ذلك، فهذه هي الطريقة الأكثر توسعًا لتحديد نقاط الدخول في التطبيق.

"تكوين حزمة الويب القابلة للتوسيع" : قابل لإعادة الاستخدام ويمكن دمجه مع تكوينات أخرى. يعد هذا أسلوبًا شائعًا لفصل الاهتمامات عن البيئة وبناء الهدف ووقت التشغيل. ثم قم بدمجها باستخدام أدوات متخصصة مثل webpack-merge.

سيناريوهات التطبيق

1. تتم الإشارة إلى التطبيقات ذات الصفحة الواحدة

، سواء كانت أطر عمل أو مكتبات أو وحدات نمطية في كل صفحة، من خلال نقطة إدخال واحدة في app.js وتتمثل ميزة ذلك في أنه سيتم إنشاء ملف JS واحد فقط وستكون التبعيات واضحة .

وحدة التصدير = {
  الإدخال: "./src/app.js"
};

هذا الأسلوب له أيضًا عيوب، حيث يتم تجميع جميع الوحدات معًا عندما يزيد حجم التطبيق إلى مستوى معين، سيكون حجم الموارد الذي تم إنشاؤه كبيرًا جدًا، مما يقلل من سرعة عرض صفحة المستخدم

بشكل افتراضي تكوين Webpack، عندما تكون الحزمة أكبر من 250 كيلو بايت (قبل الضغط)، سيتم اعتبار الحزمة كبيرة جدًا، وسيظهر تحذير أثناء التعبئة، كما هو موضح في الشكل:

2. افصل مكتبة الطرف الثالث (البائع)

لحل المشكلة المذكورة أعلاه، يمكنك استخراج مكتبة الطرف الثالث (البائع).

في Webpack، يشير البائع عمومًا إلى جهات خارجية مثل المكتبات والأطر المستخدمة في المشروع

.
  الإدخال: {
    التطبيق: "./src/app.js"،
    البائعون: ['react','react-dom','react-router']،
  }
};

بناءً على مثال التطبيق، أضفنا مدخلاً جديدًا باسم قطعة vendor ، ووضعنا وحدات الطرف الثالث التي يعتمد عليها المشروع في شكل

مصفوفة ماذا يجب أن تفعل Webpack؟

في هذا الوقت، يمكننا استخدام CommonsChunkPlugin (تم التخلي عن CommonsChunkPlugin بعد Webpack 4، ويمكنك استخدام optimization.splitChunks) لاستخراج الوحدات النمطية المشتركة في جزأين التطبيق والمورد،

باستخدام هذا التكوين، سيتم تشغيل الحزمة التي تم إنشاؤها بواسطة app.js فقط تحتوي على سيتم استخراج وحدة الأعمال ووحدات الطرف الثالث التي تعتمد عليها لإنشاء حزمة جديدة، وهو ما يحقق أيضًا هدفنا المتمثل في استخراج البائع

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

يُستخدم CommonsChunkPlugin بشكل أساسي لاستخراج مكتبات الجهات الخارجية والوحدات العامة لمنع ملفات الحزمة المحملة على الشاشة الأولى أو ملفات الحزمة المحملة عند الطلب من أن تكون كبيرة جدًا، مما يؤدي إلى أوقات تحميل طويلة.

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

بالنسبة لسيناريوهات التطبيق متعدد الصفحات، من أجل تقليل حجم الموارد قدر الإمكان، نأمل أن تقوم كل صفحة بتحميل المنطق الضروري الخاص بها فقط، بدلاً من تجميع كل الصفحات في نفس الحزمة. لذلك، تحتاج كل صفحة إلى حزمة مستقلة . في هذه الحالة، نستخدم إدخالات متعددة لتحقيق ذلك. يرجى الاطلاع على المثال التالي:

Module.exports = {
  الإدخال: {
    الصفحة الأولى: './src/pageOne/index.js'،
    الصفحة الثانية: './src/pageTwo/index.js'،
    الصفحة الثالثة: './src/pageThree/index.js'
  }
};

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