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

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

يظهر من الصورة أنك تقومين بفتح مشروع الـ 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"
},

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

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

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

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

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