اذهب إلى المحتوى
  • 0

التنسيقات لا تظهر عند تشغيل المشروع عن طريق webpack

عطاف الدسوقي

السؤال

لقد تم تحميل جميع ملفات npm و لكن عند فتح ملف dist تظهر بشكل غير منظم على المتصفح قمت بعمل clear data و run بعد ذلك و لكن لم تظهر كما بالتنسيق المطلوب

كيف بامكاني تجاوز هذه المشكلة بكل مرة تواجهني بكل مرة افتح المشروع و أرى تلك المشكلة قد قمت بفتح ملف سابق لتأكيد على أنه الخلل ليس من المشروع الحالي تم عمله مع المدرب على الwebpack ظهرت تلك المشكلة أيضا 

كيف بامكانني تجاوز تلك المشكلة عندما تظهر لدي بكل مرة

 

 

 

 

IMG-20210510-WA0004.jpg

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

مرحبا عطاف
المشكلة كما هو واضح في الصورة التي أرفقتيها أن بوتستراب غير مثبتة أو انها مثبتة ولكن غير مضمنة بشكل صحيح
ثانيا تثبيت كل الحزم غير كافي لعمل المشروع بشكل جيد, يجب أن تكتبي جميع الأكواد اللازمة لمعالجة كافة الملفات في ملف webpack.config.js , وأيضا تأكدي بانك تضمنين كافة الملفات في ملف index.js
وتأكدي بأنك تضمنين ملف index.js بطريقة صحيحة في ملف index.html
شكرا لك

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يظهر من الصورة أنك تقومين بفتح مشروع الـ webpack عن طريق ملف الـ index بداخل مجلد dist . و هذا في الغالب سيؤدي بكل مسارات الملفات من الشكل main.css/ التي قد قمت بتضمينها تظهر على هذا النحو بعد البناء :

file:///main.css

و بالتالي فهي غير قابلة للوصول من الأساس و لو قمت بفتح الـ console ستجدين خطأ يخبرك أن الملفات غير موجودة . 

فالحل هو فتح المشروع عن طريق طباعة الأمر :  

npm run serve

الذي سيقوم بدوره بطباعة التالي : 

Project is running at http://localhost:9000/
webpack output is served from /
Content not from webpack is served from /path/to/some/path/project/dist
wait until bundle finished: /
Compiled successfully.

بعد البناء بنجاح يمكنك التصفح إلى المسار الموصوف على هذا النحو : 

http://localhost:9000/

و سيتم إظهار كل الملفات شاملة ملفات التنسيق و السكربتات بشكل صحيح . 

ملاحظات :

في حالة ما لم يعمل الأمر بشكل صحيح و قمت بمواجهة خطأ من هذا النوع : 

missing script: serve

فتأكدي أن تقومي بتسجيل الأمر و إضافته إلى كائن scripts بملف package.json على هذا النحو : 

"scripts": {
    
    "serve": "webpack serve --mode development"
},

و الان يمكنك طباعة الأمر و التصفح إلى المسار الموصوف بعد نجاح البناء , و إستعراض مشروعك بشكل عادي . 

تم التعديل في بواسطة Adnane Kadri
خطأ إملائي
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

مشكلتك يمكن أن يسببها الكثير من الأخطاء والهفوات وعادة مشكلة كهذه تكون بسبب

  • نسيان تثبيت bootstrap
  • نسيان تثبيت ال loaders التي تتعامل مع css في webpack.config.js
  • نسيان تضمين الrules الخاصة بالloaders في webpack.config.js
  • نسيان تضمين ملفات css في index.js

طرق مساعدة لحل المشكلة

  • تشغيل المشروع لرؤية ما ان تواجد خطأ
  • تفحص مجلد dist وبالتحديد main.css ويمكن ان يكون ملف ال css الرئيسي الخاص بك اسمه مغاير لكن الكود داخله سوف يعطيك فكرة عن المشكلة 
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...