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

محمد لارافيل · 23 فبراير 2023

أرغب في التشغيل التلقائي والتحديث التلقائي لخادم webpack-dev-server عند استخدام الحزمة AutoSave OnChange من Atom وتشغيل تطبيقي.
webpack-dev-server الخاص بي

devServer: {
        contentBase: './src/index.js',
        host: '0.0.0.0',
        compress: true,
        port: 3001, // port number
        historyApiFallback: true,
        quiet: true,
    }

package.json الخاص بي:

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

هل يمكنكم مساعدتي؟

Mustafa Suleiman · 23 فبراير 2023

لتمكين التحديث التلقائي (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"
    }
  ]
}

في هذه الحالة، ستعمل هذه المهمة على تشغيل الأمر npm start والذي يشغل webpack-dev-server. عند الانتهاء من إنشاء الملف، يمكنك تشغيل المهمة من خلال الضغط على Ctrl+Shift+B في VSCode، واختيار المهمة start، مما سيقوم بتشغيل webpack-dev-server والسماح لك بالتحديث التلقائي.

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

السؤال

محمد لارافيل

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية