مفاهيم رئيسية للإطارwebpack (ترتيب المعرفة)

ما هو webpack

webpack هو أداة بناء للبنية الأمامية (ليس مكتبة أو إطار عمل)، يمكنه معالجة وتشغيل أنواع مختلفة من الموارد مثل JS (بما في ذلك JSX)، coffee، css (بما في ذلك less/sass)، الصور وما إلى ذلك كوحدات.

1. معلومات أساسية

　　1.1 webpack هو مُعبئ (module bundler) حديث لمتطبيقات JavaScript. عند معالجة تطبيق من قبل webpack، يقوم ببناء رسم لـ dependency graph يحتوي على كل وحدة تحتاجها التطبيق، ثم يعبأ جميع هذه الوحدات إلى bundle واحد أو أكثر.

　　1.2 مفاهيم رئيسية webpack الأربعة:

　　　　1.2.1 entry (البداية): entry point، نقطة البداية (يمكن أن تكون متعددة)، سينطلق webpack من هذه النقطة لمعرفة أي ملفات تعتمد على ملف البداية، وبالتالي بناء هيكل الاعتماد الداخلي، ثم التعامل معه وإخراجه إلى ملفات تُدعى bundles.

　　　　1.2.2 output (الإخراج): يحدد مسار (path) واسم (filename) الملفات المعبأة بعد معالجة entry point.　　　　

　　　　1.2.3 loader (مزود): يستخدم لمعالجة ملفات ليست JS، يمكنه تحويل جميع الملفات إلى وحدات يمكن لـ webpack معالجتها، ثم تقديمها إلى webpack للتعامل مع التعبئة والتغليف وما إلى ذلك؛ بشكل أساسي، loader لـ webpack هو تحويل جميع أنواع الملفات إلى وحدات يمكن للنظام المapplcation الاعتماد عليها مباشرة في رسم هيكل الاعتماد، ولديه هدفان:

　　　　　　1.2.3.1 استخدم خصائص test للتعرف على الملفات القابلة للتحويل المناسبة للملحق

　　　　　　1.2.3.2 استخدم خصائص use لتحويل هذه الملفات لضمان إضافتها إلى خريطة الاعتماد، وستتم إضافتها إلى bundle في النهاية

　　　　　　إذا كنت تريد تعريف محول في تكوين webpack، يجب عليك تعريفه في module.rules وليس في rules

　　　　1.2.4 ملحقات (plugins): من تحسين التعبئة والتضييق، حتى تعريف المتغيرات في البيئة. واجهة الملحقات قوية للغاية، ويمكنها تنفيذ أنواع مختلفة من المهام

　　　　　　لإضافة ملحق، تحتاج إلى استدعاء require()، ثم إضافته إلى مجموعة plugins. يمكن تخصيص معظم الملحقات عن طريق الخيارات (option). يمكنك أيضًا استخدام نفس الملحق في ملف تكوين واحد لأغراض مختلفة، في هذه الحالة، تحتاج إلى إنشاء نموذج جديد باستخدام عميل new.

　　　　　　يقدم webpack العديد من الملحقات القابلة للتثبيت بوضع مسبق! https://doc.webpack-china.org/concepts/.

ملخص

ما تم ذكره أعلاه هو مفاهيم رئيسية (تنظيم المعرفة) لمكتبة Webpack التي قدمها المحرر لكم، نأمل أن يكون هذا مفيدًا لكم، إذا كان لديكم أي أسئلة، يرجى ترك تعليق، وسأقوم بالرد على رسائلكم في أقرب وقت ممكن. أود أيضًا أن أعبأ بعميق الشكر على دعمكم لتعليمات الصراخ!

بيان: محتوى هذا المقال تم جمعه من الإنترنت، حقوق النشر تخص صاحبها، المحتوى تم إضافته من قبل مستخدمي الإنترنت بطرقهم الخاصة، ويستخدم هذا الموقع دون امتلاك حقوق الملكية، ولا يتم تعديل المحتوى بشكل إنساني، ولا يتحمل الموقع أي مسؤولية قانونية. إذا اكتشفت محتوى يشتبه في أنه مخالف للحقوق النشرية، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لإبلاغنا، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.