كيف يتم تشغيل Webpack-dev-server تلقائيا بعد كل حفظ؟

لتمكين التحديث التلقائي (hot reloading) في webpack-dev-server ، يجب إضافة خيار --hot إلى أمر البدء (start script) في package.json كما يلي:

"scripts": {
    "start": "webpack-dev-server --mode development --inline --progress --hot",
    "build": "webpack --mode production"
},

بمجرد إضافة --hot ، سيتم تشغيل خادم التطوير بشكل تلقائي ويقوم بالتحديث التلقائي للملفات بمجرد حفظ التغييرات.

إذا كنت ترغب في تشغيل التحديث التلقائي لـ webpack-dev-server عند استخدام VSCode، يمكنك استخدام ميزة "Tasks" الخاصة بـ VSCode. يمكنك إنشاء مهمة تشغيل webpack-dev-server في ملف tasks.json في مجلد .vscode في مشروعك.

يمكنك إنشاء الملف بنفسك من خلال القائمة المنسدلة Terminal في القائمة الرئيسية، ثم اختيار Configure Tasks وإنشاء ملف جديد.

يجب أن تكون هذه هي المهمة التي يجب تضمينها في tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "start",
      "type": "npm",
      "script": "start",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": "$tsc"
    }
  ]
}