ما هي فائدة webpack؟

Webpack عبارة عن مُجمّع ملفات ثابتة (مثل الصور وتنسيقات CSS وغيرها) لتطبيقات JavaScript الحديثة. ويوفر Webpack مجموعة كبيرة من الإعدادات والإضافات التي تسهل هذه العملية، كما يوفر Webpack أيضًا ما يسمى المحملات loaders التي تمكننا من التعامل مع أنواع مختلفة من الملفات وضغطها وتوفيرها في مجلد المشروع النهائي، ونفس الأمر بالنسبة لكود CSS أو SCSS و JavaScript حيث يقوم Webpack بمساعدة babel على سبيل المثال من تحويل كود JavaScript من نسخة حديثة مثل ES6 أو ES7 إلى إصدار أقدم من JavaScript وبالتالي يمكن لمجموعة أكبر من المتصفحات تنفيذ كود JavaScript بدون مشكلة.

كما يمكن إستخدام Webpack بملف إعدادات مختلف webpack.config.js لبناء أكثر من نسخة من نفس المشروع، نسخة للتطوير development ونسخة أخرى للنشر production على سبيل المثال.

وكل ملخص لما سبق، يقوم Webpack بإستخدام Node.js لعمل الكثير من المهام المعتادة وأتمتتها بسهولة من خلال الكثير من الإضافات plugins والمحملات loaders.

أنت لا تحتاج استخدام webpack على الأقل مباشرة في مشاريعك لأن التكنولوجيات المتوفرة حاليا تجهز كل الاحتياجات لك في الخلفية يمكنك ان تحتاج webpack عندما تريد انشاء مشروع من الصفر و لا يوجد سبب في وقتنا هذا يدفعك لذلك غير تعلم التكنولوجيا في حد ذاتها لكنك حتما ستحتاج webpack اذا كنت تطور أشياء يستخدمها المطورين وكمثال على ذلك عندما طورو react وخرج للعلن قامو بانشاء أداة create react app المطورين الذين طورو الأداة كانو بحاجة ماسة ل webpack لذا الأمر يعتمد فقط على احتياجاتك 

Webpack عبارة عن أداة تجميع "bundler". إن ما يفعله webpack بشكل أساسي هو أنه يجمع كل ال assets والملفات الخاصة بك في حزم packages.
حسناً لماذا  نحتاج عملية التجميع هذه، لماذا لانترك السكريبت كما هو؟! الإجابة هي أنك تستطيع الاستغناء عنها لكن ذلك سيؤدي لمشكلة أو عدة مشاكل في المستقبل. افترض أن لديك سكريبت لصفحتك مكون من 20 ألف سطر من JS هنا تبدأ المشاكل بالظهور... لأن إدارة كل هذه التعليمات البرمجية في ملف واحد سيكون متعباً ومزعجاً للغاية ويزداد الأمر سوءاً عندما يكون هناك عدة أشخاص يعملون على نفس الملف في وقت واحد.
لذلك لابد من قسيم الكود إلى أجزاء مختلفة، مثلاً قسم ملفنا الضخم إلى 20 ملف أصغر ، وأدخلنا 20 سمة <script> في الصفحة. ومع ذلك ما زلنا بحاجة إلى ضمان الترتيب الصحيح للملفات المراد ربطها، وسنحتاج إلى مراقبة تحديثات الكود في الملفات الموجودة، أو في حالة الحاجة إلى إضافة أي ملفات إضافية ، ثم ترتيبها….. لذا نحن بحاجة لطريقة أقوى للتعامل مع هذه القضايا من أجل الربط بينها والتعامل معها..
تتمثل الطريقة الأفضل في أن يخبرنا كل ملف بطريقة ما بالملفات الأخرى التي يتطلبها (التبعيات) ومن ثم يمكننا الاستفادة من ذلك للربط بين هذه الملفات. وهنا تدخل حزمة الويب webpack. توجد آليات لتحديد التبعيات والواردات في ES6 و nodeJS. يستخدم Webpack هذه الآليات لإنشاء غراف (بيان) لجميع الملفات وتبعياتها، وتجميع جميع الملفات في حزم.