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

  • EMOSER

السلام عليكم و رحمة الله تعالى و بركاته , مرحبا , كيف حالكم جميعا , ارجو من الله سبحانه و تعالى جل و علا

ان تكونو بخير و صحة و سلامة و عافية و اما بعد , اخواني الكرام عندي سؤال بسيط و السؤال على الشكل التالي

ان شاء الله تعالى , :

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


الية عمل الـ webpack

تتلخص الية عمل هذه التقنية بـ جمع عدد هائل من الملفات مثل html and css و ذلك من اماكن مختلفة

ثم جمعهم كلهم في ملفات js منفصلة اي :

html file = html js

css file = css js

ثم بعدها يتم جمع كل الملفات السابقة في ملف واحد js ثم يتم طبخ العناصر باستخدام هذه التقنية

و بعدها يثم تصديرهم على شكل ملفات مضغوطة بـ الامتدادات الرئيسية اي html minfile and css minfile


الية عمل الـ gulp

لدينا مجموعة ملفات html and css and js and images كل واحدة تأخذ مهمة , بعدها يتم جمعهم كلهم في ملفات

خاصة مثل html file all بعدها يتم طبخهم في هذه التقنية و اخراج ملفات مضغوطة مثل : html minfile


السؤال الان :

ما هو المميز في تقنية الـ webpack و الذي يعد افضل من الـ gulp ؟

فـ عند قرائتي في احد المقالات وجدتت ان الـ webpack تقنية تجميع اما الـ gulp تقنية تنفيذ مهام , لكن الـ gulp

تجمع و تؤدي المهام , فـ لماذا يا ترى الـ webpack مفضلة ؟ و اعتذر سؤال اخر غير موجود في العنوان لماذا يجد

المبرمجين npm script افضل من الـ 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

السلام عليكم و رحمة الله تعالى و بركاته , مرحبا , اهلين اخي الكريم

شكرا لك على سرعة الرد , لكن اخي العزيز , تعريف الـ webpack و ما بعده , يشعرني انني اقرء من ترجمة جوجل

فـ هناك العديد من الجمل الغير مترابطة و العديد من المفردات الغريبة , فـ هل بامكانك تبسيط المعلومة اكثر ؟

و شكرا ^_^

تفضل أخي، أخبرني باي جزء لإعادة شرحه لك.