javascript Webpack مقابل webpack-dev-server مقابل webpack-dev-middleware مقابل webpack-hot-middleware vs etc




node.js (2)

أبدأ العمل مع webpack مع بيئة node/express تطوير تطبيق ReactJS جانب ReactJS خادم مع react-router ReactJS . إنني في حيرة من أمري حول دور كل حزمة webpack لبيئات dev و prod (وقت التشغيل).

إليكم ملخص فهمي:

webpack : عبارة عن حزمة ، وهي أداة webpack بين أجزاء مختلفة من تطبيق ويب وحزمة ، ثم في ملف .js واحد (عادة bundle.js ). بعد ذلك يتم تقديم ملف النتائج في بيئة prod ليتم تحميله بواسطة التطبيق ويحتوي على جميع المكونات اللازمة لتشغيل الكود. تشمل الميزات تقليص الكود ، التصغير ، إلخ.

webpack-dev-server : هي حزمة تقدم خادمًا لمعالجة ملفات موقع الويب. كما أنه ينشئ ملف .js واحد ( bundle.js ) من مكونات العميل ولكنه يخدم في الذاكرة. كما أن لديها الخيار ( -hot ) لمراقبة جميع ملفات البناء وإنشاء حزمة جديدة في الذاكرة في حالة حدوث تغييرات في الكود. يتم تقديم الخادم مباشرة في المتصفح (على سبيل المثال: http:/localhost:8080/webpack-dev-server/whatever ). يتيح الجمع بين تحميل الذاكرة والمعالجة الساخنة وخدمة المتصفح للمستخدم الحصول على تحديث التطبيق على المتصفح عندما يتغير الرمز ، مما يجعله مثاليًا لبيئة التطوير.

إذا كانت لدي شكوك حول النص أعلاه ، لست متأكدًا حقًا من المحتوى أدناه ، لذا يرجى إعلامني إذا لزم الأمر

هناك مشكلة شائعة عند استخدام webpack-dev-server مع node/express وهي أن webpack-dev-server هو خادم ، مثل node/express . هذا يجعل هذه البيئة صعبة لتشغيل كل من العميل وبعض العقدة / رمز صريح (API الخ). ملاحظة: هذا ما واجهته ولكن سيكون من الرائع فهم سبب حدوث ذلك في مزيد من التفاصيل ...

webpack-dev-middleware : هذا برنامج webpack-dev-server نفس وظائف webpack-dev-server (تجميع مؤقت ، إعادة تحميل ساخن) ، ولكن بالتنسيق الذي يمكن حقنه في تطبيق server/express التطبيق server/express . بهذه الطريقة ، لديك نوع من الخادم (خادم webpack-dev-server ) من خادم العقدة. عفوًا ، هل هذا حلم مجنون؟ كيف يمكن لهذه القطعة أن تحل معادلة ديف و prod وتجعل الحياة أكثر بساطة

webpack-hot-middleware : هذا ... تمسك هنا ... وجدت هذه القطعة عندما تبحث عن webpack-dev-middleware ... لا فكرة عن كيفية استخدامها.

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

https://code.i-harness.com


webpack

كما وصفت ، Webpack عبارة عن حزمة للوحدة النمطية ، فهي تجمع تنسيقات الوحدات النمطية المختلفة في المقام الأول حتى يمكن تشغيلها في المستعرض. إنه يوفر CLI برمجة تطبيقات ( CLI و Node API .

webpack-dev-middleware

Webpack Dev Middleware هو برنامج وسيط يمكن تثبيته في خادم سريع لخدمة أحدث مجموعة من باقتك أثناء التطوير. هذا يستخدم webpack Node API في وضع المراقبة وبدلاً من الإخراج إلى نظام الملفات ، فإنه يخرج إلى الذاكرة .

للمقارنة ، يمكنك استخدام شيء مثل express.static بدلاً من هذه الوسيطة في الإنتاج.

webpack-dev-server

يعد Webpack Dev Server نفسه خادمًا صريحًا يستخدم webpack-dev-middleware لخدمة أحدث حزمة بالإضافة إلى معالجة طلبات استبدال الوحدة النمطية الساخنة (HMR) لتحديثات الوحدة النمطية المباشرة في العميل.

webpack-hot-middleware

يعد Webpack Hot Middleware بديلاً webpack-dev-server ولكن بدلاً من بدء تشغيل الخادم نفسه ، يسمح لك webpack-dev-middleware خادم سريع موجود / مخصص إلى جانب webpack-dev-middleware .

أيضا...

webpack-hot-server-middleware

فقط للتشويش على الأشياء أكثر ، هناك أيضًا Webpack Hot Server Middleware والتي تم تصميمها لاستخدامها مع webpack-dev-middleware و webpack-hot-middleware للتعامل مع استبدال الوحدة الساخنة للتطبيقات المقدمة من الخادم.


اعتبارًا من التحديث في عام 2018 والنظر في ملاحظة webpack-dev-server على صفحة GitHub الرسمية:

Project in Maintenance يرجى ملاحظة أن webpack-dev-server في وضع الصيانة فقط ولن يقبل أي ميزات إضافية في المدى القريب. يمكن إنجاز معظم طلبات الميزات الجديدة باستخدام برنامج الوسيطة Express. يرجى النظر في استخدام قبل وبعد السنانير في الوثائق.

ماذا سيكون الخيار الطبيعي لبناء HMR webpack؟





webpack-dev-middleware