سؤال في الفرونت اند : لماذا المبرمجين بدأئو باستخدام الـ webpack رغم ان الـ gulp تؤدي نفس الامر لكن بالية اخرى ؟

السلام عليكم

لن أدخل في شرح كل واحدة فيهم فانا بالفعل قمت بشرح دورات تعليمية لل Gulpjs

جميع هذه الأدوات تسمى Task Runners وتقوم بعمل نفس الفكرة والمطلوب

وهناك منهم من هو أسهل في عمل Configure وهناك من هو أسرع في عمل المهام

وهناك من هو أسهل في التعلم وهناك الأصعب

لذلك من وجهة نظري كلهم يؤدوا نفس الغرض

وإذا وجدت واحدة من الأدوات تفيدك وسهلة في التعلم فقم بإستعمالها ولا تركز كثيرا في باقي الأدوات

ولا مانع من المقارنة بينهم لتخرج بأفضل واحدة من وجهة نظرك

تعتبر ال gulp و ال webpack أداتان مختلفتان حيث تعتبر task runner gulp وتقوم بتنفيذ جميع المهام(في مرحلة ال development) غير التي ترتبط بالكود مثل إنشاء ملف أو حذفه أيضاً دمج بعض الملفات إضافة أو تحويل بعض الشيفرات

أما بالنسبة لل webpack فهي module bundler في الأساس يعني تقوم بدمج العديد من الملفات بالعديد من الصيغ في ملف واحد ولكن يمكن لها القيام بوظيفة ال gulp فبالتالي يمكن لكلاهما القيام بنفس الوظيفة

ولكن لماذا يفضل بعض المطورين webpack ؟

عندما يتعلق الأمر بال modules أو بمعنى آخر إذا كان المشروع الخاص بك يحتوي على العديد من الملفات وال modules إذاً في هذه الحالة يفضل إستخدام webpack لما توفره من مميزات مثل عمل code splitting وإستدعاء كل ملف عند احتياجه بمعنى ال lazy loading

يمكن أيضاً ل gulp عمل ما يسمى بال modules bundling بإستخدام browserify

أما بالنسبة لل npm scripts يمكنها أيضاً عمل نفس وظيفة ال gulp وبدون تلك الأكواد الخاصة ب gulp ولكن يصعب العمل بال npm scripts في المشاريع الكبيرة على عكس ال gulp أما في المشاريع الصغيرة والمتوسطة تعتبر ال npm scripts حل مثالي

لذلك يعتمد استخدامك لأي أداة على المشروع الخاص بك ومن عيوب ال webpack هو ملف ال configuration صعب قليلاً عن ال gulp فيمكنك قراءة مميزات كلاهما وإختيار الأداة التي تناسب مشروعك

Gulp.js، webpack وغيرهم من الأدوات في JavaScript هي أدوات لتنفيذ مهام البناء على NodeJS، مثلًا لديك شيفرة، هذه الشيفرة قبل أن ترسل للمستخدم، يجب أن تحول إلى ES5 من ES6 مثلًا وتضغط وتضع في مجلدًا معينًا، القيام بالإمر بشكل يدوي مملٌ كل مرة تكتب تعديلًا جديدًا، ولكي يفهم كيف يبني مطورون أخرون الشيفرة، لهذا تستخدم أدوات البناء تنشيء مُهِمّة للقيام بالضغط ومهمة للنقل، وهكذا..

تستخدم webpack لأنها تتضمن نفس مهام glup بالإضافة لمهمات أخرى و بطريقة أفضل..

ما هي Webpack؟

هي عبارة عن مجمع واحدات (Module Bundler) أو أداة بناء (Build Tool) وهي تحول شجرة تبعية الملفات وتُجمعها في ملف واحد، أي بدل تضمين عدة ملفات جافاسكربت في ملف HTML ما يؤدي لعدة عمليات تحميل للملفات و هذا يؤثر على سرعة الموقع، تقوم ويب باك بتجميع كل شيفرات جافاسكربت من كل الملفات و تضعهم في ملف واحد و تقوم بعدها باستدعائه.

وهذا يقلل الوقت اللازم لتحميل الموقع بشكل عام و تسريع عمليه العرض في المتصفح.

لا يقتصر عمل ويب باك على ملفات جافاسكربت إنما تعمل نفس الفكرة لعدة أنواع ملفات باستخدام Loaders:

المُحملات (Loaders): مع استخدام المُحمل المخصص يمكنك تحميل أي ملف إلى التطبيق إذ يمكنك استخدام الدالة reuiqre ليس فقط لتحميل ملفات جافاسكربت فقط وإنما ملفات التنسيقات وملفات SaSS وملفات Less بالإضافة إلى إمكانية تحميل الصور والخطوط والملفات والكثير غيرها (دمج ملفات التنسيقات المضمنة في صفحة الويب إلى ملف واحد).

كم تحوي ويب باك الملحقات (Plugins): تقدم Webpack ميزة الملحقات مجموعة واسعة من المهام مثل تحسين الحزمة وإدارة

الملحقات (مثل الصور) بالإضافة إلى ذلك يمكننا حتى التلاعب بالملفات قبل تحميلها وتحزيمها في الملف الهدف (على سبيل المثال إمكانية ضغط الصور قبل رفعها على المخدم).

كما تقوم بعمل minify حيث تحذف المحارف الزائدة من الملفات مثل الفراغات و الأسطر الفارغة .. مما يقلل حجم الملف.

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

يمكنك قراءة "دليل Webpack الشامل" المقدم من أكاديمية حسوب فهو يحوي المزيد من التفاصيل.

يوجد العديد من المقالات على أكاديمية حسوب و حسوب IO