DevServer

يمكن استخدام webpack-dev-server لتطوير التطبيق بسرعة. راجع دليل التطوير للبدء.

تصف هذه الصفحة الخيارات التي تؤثر على سلوك webpack-dev-server (باختصار: dev-server) version >= 5.0.0. يمكن العثور على دليل الترحيل من v4 إلى v5 هنا.

devServer

object

يلتقط webpack-dev-server مجموعة الخيارات هذه، ويمكنك استخدامها لتغيير سلوكه بطرق مختلفة. في المثال البسيط التالي نفعّل ضغط gzip ونخدم كل شيء من دليل public/ في جذر المشروع:

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    compress: true,
    port: 9000,
  },
};

عند بدء تشغيل server، ستكون هناك رسالة قبل قائمة الحلول modules:

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
<i> [webpack-dev-server] On Your Network (IPv4): http://197.158.164.104:9000/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:9000/
<i> [webpack-dev-server] Content not from webpack is served from '/path/to/public' directory

سيعطي ذلك بعض المعلومات الأساسية عن مكان وجود server وما الذي يقدمه.

إذا كنت تستخدم dev-server من خلال Node.js API، فسيتم تجاهل الخيارات الموجودة في devServer. قم بتمرير الخيارات كمعلمة أولى بدلاً من ذلك: new WebpackDevServer({...}, compiler). انظر هنا للحصول على مثال حول كيفية استخدام webpack-dev-server من خلال Node.js API.

الاستخدام عبر CLI

يمكنك استدعاء webpack-dev-server عبر CLI عن طريق:

npx webpack serve

تتوفر قائمة بخيارات CLI لـ serve هنا

الاستخدام عبر API

بينما يوصى بتشغيل webpack-dev-server عبر CLI، يمكنك أيضًا اختيار بدء server عبر API.

راجع وثائق API ذات الصلة بـ webpack-dev-server.

devServer.app

function

يسمح لك باستخدام تطبيقات server المخصصة، مثل connect، fastify، وما إلى ذلك. التطبيق الافتراضي المستخدم هو express.

webpack.config.js

import connect from "connect";

export default {
  // ...
  devServer: {
    app: () => connect(),
  },
};

devServer.allowedHosts

'auto' | 'all' [string]

يتيح لك هذا الخيار إدراج الخدمات المسموح لها بالوصول إلى server في القائمة المسموح بها.

webpack.config.js

export default {
  // ...
  devServer: {
    allowedHosts: [
      "host.com",
      "subdomain.host.com",
      "subdomain2.host.com",
      "host2.com",
    ],
  },
};

لتقليد ALLOWED_HOSTS الخاص بـ Django، يمكن استخدام القيمة التي تبدأ بـ . كحرف بدل للنطاق الفرعي. سوف يتطابق .host.com مع host.com وwww.host.com وأي نطاق فرعي آخر لـ host.com.

webpack.config.js

export default {
  // ...
  devServer: {
    // وهذا يحقق نفس تأثير المثال الأول
    // مع ميزة عدم الاضطرار إلى تحديث التخصيص الخاص بك
    // إذا كانت النطاقات الفرعية الجديدة بحاجة إلى الوصول إلى server dev
    allowedHosts: [".host.com", "host2.com"],
  },
};

الاستخدام عبر CLI:

npx webpack serve --allowed-hosts .host.com --allowed-hosts host2.com

عند التعيين على 'all'، يتجاوز هذا الخيار فحص المضيف. هذا غير مستحسن لأن التطبيقات التي لا تتحقق من المضيف تكون عرضة لهجمات إعادة ربط DNS.

webpack.config.js

export default {
  // ...
  devServer: {
    allowedHosts: "all",
  },
};

الاستخدام عبر CLI:

npx webpack serve --allowed-hosts all

عند التعيين على 'auto'، يسمح هذا الخيار دائمًا بـ localhost وhost وclient.webSocketURL.hostname:

webpack.config.js

export default {
  // ...
  devServer: {
    allowedHosts: "auto",
  },
};

الاستخدام عبر CLI:

npx webpack serve --allowed-hosts auto

devServer.bonjour

boolean = false object

يقوم هذا الخيار ببث server عبر شبكة ZeroConf عند البداية.

webpack.config.js

export default {
  // ...
  devServer: {
    bonjour: true,
  },
};

الاستخدام عبر CLI:

npx webpack serve --bonjour

للتعطيل:

npx webpack serve --no-bonjour

يمكنك أيضًا تمرير الخيارات المخصصة إلى صباح الخير، على سبيل المثال:

webpack.config.js

export default {
  // ...
  devServer: {
    bonjour: {
      type: "http",
      protocol: "udp",
    },
  },
};

devServer.client

تسجيل

يسمح بتعيين مستوى السجل في browser، على سبيل المثال، قبل إعادة التحميل، قبل حدوث خطأ أو عند تمكين Hot Module Replacement.

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      logging: "info",
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --client-logging info

تراكب

boolean = true object

يعرض تراكبًا بملء الشاشة في browser عند وجود أخطاء أو تحذيرات compiler.

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      overlay: true,
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --client-overlay

للتعطيل:

npx webpack serve --no-client-overlay

يمكنك توفير object بالخصائص التالية لمزيد من التحكم الدقيق:

الملكية	شرح
`errors`	compilation أخطاء
`runtimeErrors`	أخطاء runtime لم تتم معالجتها
`warnings`	compilation تحذيرات

جميع الخصائص اختيارية وتكون افتراضيًا true عندما لا يتم توفيرها.

على سبيل المثال، لتعطيل تحذيرات compilation، يمكنك توفير التخصيص التالي:

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: false,
        runtimeErrors: true,
      },
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --client-overlay-errors --no-client-overlay-warnings --client-overlay-runtime-errors

للتصفية بناءً على الخطأ الذي تم طرحه، يمكنك تمرير function الذي يقبل المعلمة error ويعيد boolean.

على سبيل المثال، لتجاهل الأخطاء التي يلقيها AbortController.abort():

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      overlay: {
        runtimeErrors: (error) => {
          if (error instanceof DOMException && error.name === "AbortError") {
            return false;
          }
          return true;
        },
      },
    },
  },
};

التقدم

boolean

يطبع compilation التقدم بالنسبة المئوية في browser.

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      progress: true,
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --client-progress

للتعطيل:

npx webpack serve --no-client-progress

أعد الاتصال

boolean = true number

v4.4.0+

يخبر dev-server number بالمرات التي يجب أن يحاول فيها إعادة توصيل client. عندما true سيحاول إعادة الاتصال مرات غير محدودة.

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      reconnect: true,
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --client-reconnect

عند التعيين على false، لن يحاول إعادة الاتصال.

export default {
  // ...
  devServer: {
    client: {
      reconnect: false,
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --no-client-reconnect

يمكنك أيضًا تحديد number بالضبط للمرات التي يجب أن يحاول فيها client إعادة الاتصال.

export default {
  // ...
  devServer: {
    client: {
      reconnect: 5,
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --client-reconnect 5

webSocketTransport

'ws' | 'sockjs' string

يتيح لنا هذا الخيار إما اختيار وضع النقل devServer الحالي للعملاء بشكل فردي أو توفير تنفيذ client مخصص. يسمح هذا بتحديد كيفية اتصال browser أو client الأخرى مع devServer.

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      webSocketTransport: "ws",
    },
    webSocketServer: "ws",
  },
};

الاستخدام عبر CLI:

npx webpack serve --client-web-socket-transport ws --web-socket-server-type ws

لإنشاء تطبيق client مخصص، قم بإنشاء فئة تمتد BaseClient.

باستخدام المسار إلى CustomClient.js، تطبيق WebSocket client المخصص، بالإضافة إلى 'ws' server المتوافق:

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      webSocketTransport: import.meta.resolve("./CustomClient.js"),
    },
    webSocketServer: "ws",
  },
};

استخدام تطبيقات WebSocket client وserver المخصصة والمتوافقة:

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      webSocketTransport: import.meta.resolve("./CustomClient.js"),
    },
    webSocketServer: import.meta.resolve("./CustomServer.js"),
  },
};

webSocketURL

string object

يسمح هذا الخيار بتحديد عنوان URL لـ WebSocket server، وهذا مفيد عندما تضع dev-server خلف proxy ولا يعرف client script دائمًا أين يتصل.

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      webSocketURL: "ws://0.0.0.0:8080/ws",
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --client-web-socket-url ws://0.0.0.0:8080/ws

يمكنك أيضًا تحديد object بالخصائص التالية:

hostname: يخبر العملاء المتصلين بـ devServer لاستخدام اسم المضيف المقدم.
pathname: يخبر العملاء المتصلين بـ devServer لاستخدام المسار المتوفر للاتصال.
password: يخبر العملاء المتصلين بـ devServer لاستخدام كلمة المرور المقدمة للمصادقة.
port: يخبر العملاء المتصلين بـ devServer باستخدام المنفذ المتوفر.
protocol: يخبر العملاء المتصلين بـ devServer لاستخدام البروتوكول المتوفر.
username: يخبر العملاء المتصلين بـ devServer لاستخدام اسم المستخدم المقدم للمصادقة.

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      webSocketURL: {
        hostname: "0.0.0.0",
        pathname: "/ws",
        password: "dev-server",
        port: 8080,
        protocol: "ws",
        username: "webpack",
      },
    },
  },
};

devServer.compress

boolean = true

تمكين ضغط gzip لكل ما يتم تقديمه:

webpack.config.js

export default {
  // ...
  devServer: {
    compress: true,
  },
};

الاستخدام عبر CLI:

npx webpack serve --compress

للتعطيل:

npx webpack serve --no-compress

devServer.devMiddleware

object

قم بتوفير خيارات لـ webpack-dev-middleware الذي يتعامل مع webpack assets.

webpack.config.js

export default {
  devServer: {
    devMiddleware: {
      index: true,
      mimeTypes: { phtml: "text/html" },
      publicPath: "/publicPathForDevServe",
      serverSideRender: true,
      writeToDisk: true,
    },
  },
};

devServer.headers

array function object

إضافة رؤوس إلى كافة الردود:

webpack.config.js

export default {
  // ...
  devServer: {
    headers: {
      "X-Custom-Foo": "bar",
    },
  },
};

يمكنك أيضًا تمرير array:

webpack.config.js

export default {
  // ...
  devServer: {
    headers: [
      {
        key: "X-Custom",
        value: "foo",
      },
      {
        key: "Y-Custom",
        value: "bar",
      },
    ],
  },
};

يمكنك أيضًا تمرير function:

export default {
  // ...
  devServer: {
    headers: () => ({ "X-Bar": ["key1=value1", "key2=value2"] }),
  },
};

devServer.historyApiFallback

boolean = false object

عند استخدام HTML5 History API، من المحتمل أن يتم عرض صفحة index.html بدلاً من أي ردود 404. قم بتمكين devServer.historyApiFallback عن طريق ضبطه على true:

webpack.config.js

export default {
  // ...
  devServer: {
    historyApiFallback: true,
  },
};

الاستخدام عبر CLI:

npx webpack serve --history-api-fallback

للتعطيل:

npx webpack serve --no-history-api-fallback

من خلال توفير object يمكن التحكم في هذا السلوك بشكل أكبر باستخدام خيارات مثل rewrites:

webpack.config.js

export default {
  // ...
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: "/views/landing.html" },
        { from: /^\/subpage/, to: "/views/subpage.html" },
        { from: /./, to: "/views/404.html" },
      ],
    },
  },
};

عند استخدام النقاط في المسار الخاص بك (الشائعة مع Angular)، قد تحتاج إلى استخدام disableDotRule:

webpack.config.js

export default {
  // ...
  devServer: {
    historyApiFallback: {
      disableDotRule: true,
    },
  },
};

لمزيد من الخيارات والمعلومات، راجع وثائق connect-history-api-fallback.

devServer.host

'local-ip' | 'local-ipv4' | 'local-ipv6' string

حدد مضيفًا للاستخدام. إذا كنت تريد إمكانية الوصول إلى server خارجيًا، فحدده على النحو التالي:

webpack.config.js

export default {
  // ...
  devServer: {
    host: "0.0.0.0",
  },
};

الاستخدام عبر CLI:

npx webpack serve --host 0.0.0.0

يعمل هذا أيضًا مع IPv6:

npx webpack serve --host ::

local-ip

تحديد local-ip كمضيف سيحاول resolve خيار المضيف كعنوان IPv4 المحلي إذا كان متاحًا، وإذا لم يكن IPv4 متاحًا، فسيحاول resolve عنوان IPv6 المحلي الخاص بك.

npx webpack serve --host local-ip

local-ipv4

تحديد local-ipv4 كمضيف سيحاول resolve خيار المضيف كعنوان IPv4 المحلي الخاص بك.

npx webpack serve --host local-ipv4

local-ipv6

سيؤدي تحديد local-ipv6 كمضيف إلى محاولة resolve خيار المضيف كعنوان IPv6 المحلي الخاص بك.

npx webpack serve --host local-ipv6

devServer.hot

'only' boolean = true

تمكين ميزة Hot Module Replacement الخاصة بـ webpack:

webpack.config.js

export default {
  // ...
  devServer: {
    hot: true,
  },
};

الاستخدام عبر CLI:

npx webpack serve --hot

للتعطيل:

npx webpack serve --no-hot

لتمكين Hot Module Replacement بدون تحديث الصفحة كإجراء احتياطي في حالة فشل build، استخدم hot: 'only':

webpack.config.js

export default {
  // ...
  devServer: {
    hot: "only",
  },
};

الاستخدام عبر CLI:

npx webpack serve --hot only

devServer.ipc

true string

مقبس Unix للاستماع إليه (بدلاً من host).

سيؤدي ضبطه على true إلى الاستماع إلى المقبس عند /your-os-temp-dir/webpack-dev-server.sock:

webpack.config.js

export default {
  // ...
  devServer: {
    ipc: true,
  },
};

الاستخدام عبر CLI:

npx webpack serve --ipc

يمكنك أيضًا الاستماع إلى مقبس مختلف باستخدام:

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    ipc: path.join(__dirname, "my-socket.sock"),
  },
};

devServer.liveReload

boolean = true

افتراضيًا، سيقوم dev-server بإعادة تحميل/تحديث الصفحة عند اكتشاف تغييرات في الملف. يجب تعطيل خيار devServer.hot أو يجب تمكين خيار devServer.watchFiles حتى يصبح liveReload ساري المفعول. قم بتعطيل devServer.liveReload عن طريق ضبطه على false:

webpack.config.js

export default {
  // ...
  devServer: {
    liveReload: false,
  },
};

الاستخدام عبر CLI:

npx webpack serve --live-reload

للتعطيل:

npx webpack serve --no-live-reload

devserver.onListening

function (devServer)

يوفر القدرة على تنفيذ function مخصص عندما يبدأ webpack-dev-server في الاستماع للاتصالات الموجودة على المنفذ.

webpack.config.js

export default {
  // ...
  devServer: {
    onListening(devServer) {
      if (!devServer) {
        throw new Error("webpack-dev-server is not defined");
      }

      const { port } = devServer.server.address();
      console.log("Listening on port:", port);
    },
  },
};

devServer.open

boolean string object [string, object]

يخبر dev-server بفتح browser بعد بدء server. اضبطه على true لفتح browser الافتراضي.

webpack.config.js

export default {
  // ...
  devServer: {
    open: true,
  },
};

الاستخدام عبر CLI:

npx webpack serve --open

للتعطيل:

npx webpack serve --no-open

لفتح صفحة محددة في browser:

webpack.config.js

export default {
  // ...
  devServer: {
    open: ["/my-page"],
  },
};

الاستخدام عبر CLI:

npx webpack serve --open /my-page

لفتح عدة صفحات محددة في browser:

webpack.config.js

export default {
  // ...
  devServer: {
    open: ["/my-page", "/another-page"],
  },
};

الاستخدام عبر CLI:

npx webpack serve --open /my-page --open /another-page

قم بتوفير اسم browser لاستخدامه بدلاً من الاسم الافتراضي:

webpack.config.js

export default {
  // ...
  devServer: {
    open: {
      app: {
        name: "google-chrome",
      },
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --open-app-name 'google-chrome'

يقبل object جميع خيارات فتح:

webpack.config.js

export default {
  // ...
  devServer: {
    open: {
      target: ["first.html", "http://localhost:8080/second.html"],
      app: {
        name: "google-chrome",
        arguments: ["--incognito", "--new-window"],
      },
    },
  },
};

devServer.port

'auto' string number

حدد منفذ number للاستماع للطلبات على:

webpack.config.js

export default {
  // ...
  devServer: {
    port: 8080,
  },
};

الاستخدام عبر CLI:

npx webpack serve --port 8080

لا يمكن أن يكون خيار port null أو string فارغًا، لاستخدام منفذ مجاني تلقائيًا، يرجى استخدام port: 'auto':

webpack.config.js

export default {
  // ...
  devServer: {
    port: "auto",
  },
};

الاستخدام عبر CLI:

npx webpack serve --port auto

devServer.proxy

[object, function]

يمكن أن يكون تفويض بعض عناوين URL مفيدًا عندما يكون لديك تطوير خلفي منفصل API server وتريد إرسال طلبات API على نفس النطاق.

يستفيد dev-server من [http-proxy-middleware] القوي (https://github.com/chimurai/http-proxy-middleware) package. تحقق من الوثائق لمعرفة المزيد من الاستخدامات المتقدمة. لاحظ أن بعض ميزات http-proxy-middleware لا تتطلب مفتاح target، على سبيل المثال، ميزة router الخاصة بها، ولكنك ستظل بحاجة إلى تضمين مفتاح target في التخصيص الخاص بك هنا، وإلا فلن يمرره webpack-dev-server إلى http-proxy-middleware.

مع الواجهة الخلفية على localhost:3000، يمكنك استخدام هذا لتمكين الوكيل:

webpack.config.js

export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
      },
    ],
  },
};

سيؤدي الطلب إلى /api/users الآن إلى وكيل الطلب إلى http://localhost:3000/api/users.

إذا كنت لا تريد تمرير /api، فنحن بحاجة إلى إعادة كتابة المسار:

webpack.config.js

export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        pathRewrite: { "^/api": "" },
      },
    ],
  },
};

لن يتم قبول الواجهة الخلفية server التي تعمل على HTTPS بشهادة غير صالحة افتراضيًا. إذا كنت ترغب في ذلك، قم بتعديل التخصيص الخاص بك مثل هذا:

webpack.config.js

export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        secure: false,
      },
    ],
  },
};

في بعض الأحيان لا تريد وكيل كل شيء. من الممكن تجاوز الوكيل بناءً على القيمة المرجعة لـ function.

في function، يمكنك الوصول إلى خيارات الطلب والاستجابة والوكيل.

قم بإرجاع null أو undefined لمواصلة معالجة الطلب بالوكيل.
قم بإرجاع false لإنتاج خطأ 404 للطلب.
قم بإرجاع مسار للعرض منه، بدلاً من الاستمرار في وكيل الطلب.

على سبيل المثال بالنسبة لطلب browser، فأنت تريد عرض صفحة HTML، ولكن بالنسبة لطلب API، فأنت تريد إنشاء وكيل لها. يمكنك أن تفعل شيئا مثل هذا:

webpack.config.js

export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        bypass(req, res, proxyOptions) {
          if (req.headers.accept.includes("html")) {
            console.log("Skipping proxy for browser request.");
            return "/index.html";
          }
        },
      },
    ],
  },
};

إذا كنت تريد إنشاء مسارات متعددة ومحددة لنفس target، فيمكنك استخدام array لكائن واحد أو أكثر مع خاصية context:

webpack.config.js

export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/auth", "/api"],
        target: "http://localhost:3000",
      },
    ],
  },
};

لاحظ أن طلبات الوصول إلى الجذر لن يتم تحويلها إلى وكيل افتراضيًا. لتمكين وكيل الجذر، يجب تحديد الخيار devMiddleware.index كقيمة زائفة:

webpack.config.js

export default {
  // ...
  devServer: {
    devMiddleware: {
      index: false, // specify to enable root proxying
    },
    proxy: [
      {
        context: () => true,
        target: "http://localhost:1234",
      },
    ],
  },
};

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

webpack.config.js

export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        changeOrigin: true,
      },
    ],
  },
};

devServer.server

'http' | 'https' | 'spdy' string object

v4.4.0+

يسمح بتعيين server والخيارات (افتراضيًا "http").

webpack.config.js

export default {
  // ...
  devServer: {
    server: "http",
  },
};

الاستخدام عبر CLI:

npx webpack serve --server-type http

لخدمة أكثر من HTTPS بشهادة موقعة ذاتيًا:

webpack.config.js

export default {
  // ...
  devServer: {
    server: "https",
  },
};

الاستخدام عبر CLI:

npx webpack serve --server-type https

للعرض على HTTP/2 باستخدام spdy مع شهادة موقعة ذاتيًا:

webpack.config.js

export default {
  // ...
  devServer: {
    server: "spdy",
  },
};

الاستخدام عبر CLI:

npx webpack serve --server-type spdy

استخدم بناء الجملة object لتقديم شهادتك الخاصة:

webpack.config.js

export default {
  // ...
  devServer: {
    server: {
      type: "https",
      options: {
        ca: "./path/to/server.pem",
        pfx: "./path/to/server.pfx",
        key: "./path/to/server.key",
        cert: "./path/to/server.crt",
        passphrase: "webpack-dev-server",
        requestCert: true,
      },
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --server-type https --server-options-key ./path/to/server.key --server-options-cert ./path/to/server.crt --server-options-ca ./path/to/ca.pem --server-options-passphrase webpack-dev-server

كما يسمح لك أيضًا بتعيين خيارات TLS إضافية مثل minVersion ويمكنك تمرير محتويات الملفات المعنية مباشرة:

webpack.config.js

import fs from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    server: {
      type: "https",
      options: {
        minVersion: "TLSv1.1",
        key: fs.readFileSync(path.join(__dirname, "./server.key")),
        pfx: fs.readFileSync(path.join(__dirname, "./server.pfx")),
        cert: fs.readFileSync(path.join(__dirname, "./server.crt")),
        ca: fs.readFileSync(path.join(__dirname, "./ca.pem")),
        passphrase: "webpack-dev-server",
        requestCert: true,
      },
    },
  },
};

devServer.setupExitSignals

boolean = true

يسمح بإغلاق dev server والخروج من العملية عند إشارات SIGINT وSIGTERM.

webpack.config.js

export default {
  // ...
  devServer: {
    setupExitSignals: true,
  },
};

devServer.setupMiddlewares

function (middlewares, devServer)

v4.7.0+

يوفر القدرة على تنفيذ function مخصص وتطبيق البرامج الوسيطة المخصصة.

webpack.config.js

export default {
  // ...
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error("webpack-dev-server is not defined");
      }

      devServer.app.get("/setup-middleware/some/path", (_, response) => {
        response.send("setup-middlewares option GET");
      });

      // استخدم الطريقة `unshift` إذا كنت تريد تشغيل برنامج وسيط قبل كافة البرامج الوسيطة الأخرى
      // أو عند الترحيل من الخيار `onBeforeSetupMiddleware`
      middlewares.unshift({
        name: "first-in-array",
        // `path` is optional
        path: "/foo/path",
        middleware: (req, res) => {
          res.send("Foo!");
        },
      });

      // استخدم الطريقة `push` إذا كنت تريد تشغيل برنامج وسيط بعد كل البرامج الوسيطة الأخرى
      // أو عند الترحيل من الخيار `onAfterSetupMiddleware`
      middlewares.push({
        name: "hello-world-test-one",
        // `path` is optional
        path: "/foo/bar",
        middleware: (req, res) => {
          res.send("Foo Bar!");
        },
      });

      middlewares.push((req, res) => {
        res.send("Hello World!");
      });

      return middlewares;
    },
  },
};

devServer.static

boolean string object [string, object]

يتيح هذا الخيار تخصيص خيارات لخدمة الملفات الثابتة من الدليل (بشكل افتراضي الدليل "العام"). لتعطيله، اضبطه على false:

webpack.config.js

export default {
  // ...
  devServer: {
    static: false,
  },
};

الاستخدام عبر CLI:

npx webpack serve --static

للتعطيل:

npx webpack serve --no-static

إلى watch دليل واحد:

webpack.config.js

export default {
  // ...
  devServer: {
    static: ["assets"],
  },
};

الاستخدام عبر CLI:

npx webpack serve --static assets

إلى watch أدلة ثابتة متعددة:

webpack.config.js

export default {
  // ...
  devServer: {
    static: ["assets", "css"],
  },
};

الاستخدام عبر CLI:

npx webpack serve --static assets --static css

الدليل

string = path.join(process.cwd(), 'public')

أخبر server من أين سيتم تقديم المحتوى. يعد هذا ضروريًا فقط إذا كنت تريد تقديم ملفات ثابتة. سيتم استخدام static.publicPath لتحديد المكان الذي يجب تقديم bundles منه ويكون له الأولوية.

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
  },
};

قم بتوفير array من الكائنات في حالة وجود مجلدات ثابتة متعددة:

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, "assets"),
      },
      {
        directory: path.join(__dirname, "css"),
      },
    ],
  },
};

staticOptions

object

من الممكن تخصيص خيارات متقدمة لخدمة الملفات الثابتة من static.directory. راجع الوثائق السريعة للتعرف على الخيارات الممكنة.

webpack.config.js

export default {
  // ...
  devServer: {
    static: {
      staticOptions: {
        redirect: true,
      },
    },
  },
};

publicPath

string = '/' [string]

أخبر server بعنوان URL الذي سيتم عرض محتوى static.directory عليه. على سبيل المثال، لعرض ملف assets/manifest.json في /serve-public-path-url/manifest.json، يجب أن تكون التخصيصات الخاصة بك كما يلي:

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "assets"),
      publicPath: "/serve-public-path-url",
    },
  },
};

قم بتوفير array من الكائنات في حالة وجود مجلدات ثابتة متعددة:

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, "assets"),
        publicPath: "/serve-public-path-url",
      },
      {
        directory: path.join(__dirname, "css"),
        publicPath: "/other-serve-public-path-url",
      },
    ],
  },
};

serverIndex

boolean object = { icons: true }

أخبر dev-server باستخدام البرنامج الوسيط serveIndex عند تمكينه.

serveIndex تنشئ البرامج الوسيطة قوائم الأدلة عند عرض الدلائل التي لا تحتوي على ملف index.html.

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
      serveIndex: true,
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --static-serve-index

للتعطيل:

npx webpack serve --no-static-serve-index

watch

boolean object

أخبر dev-server إلى watch بالملفات التي يقدمها الخيار static.directory. يتم تمكينه افتراضيًا، وستؤدي تغييرات الملف إلى إعادة تحميل الصفحة بالكامل. يمكن تعطيل ذلك عن طريق ضبط خيار watch على false.

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
      watch: false,
    },
  },
};

الاستخدام عبر CLI:

npx webpack serve --static-watch

للتعطيل:

npx webpack serve --no-static-watch

من الممكن تخصيص خيارات متقدمة للملفات الثابتة watching من static.directory. راجع وثائق chokidar للتعرف على الخيارات الممكنة.

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
      watch: {
        ignored: "*.txt",
        usePolling: false,
      },
    },
  },
};

devServer.watchFiles

string object [string, object]

يتيح لك هذا الخيار تخصيص قائمة من globs/directories/files إلى watch لتغييرات الملف. على سبيل المثال:

webpack.config.js

export default {
  // ...
  devServer: {
    watchFiles: ["src/**/*.php", "public/**/*"],
  },
};

من الممكن تخصيص خيارات متقدمة لملفات watching. راجع وثائق chokidar للتعرف على الخيارات الممكنة.

webpack.config.js

export default {
  // ...
  devServer: {
    watchFiles: {
      paths: ["src/**/*.php", "public/**/*"],
      options: {
        usePolling: false,
      },
    },
  },
};

devServer.webSocketServer

false | 'sockjs' | 'ws' string function object

يتيح هذا الخيار اختيار WebSocket server الحالي أو توفير تنفيذ WebSocket server مخصص.

الوضع الافتراضي الحالي هو 'ws'. يستخدم هذا الوضع ws باعتباره server، وWebSockets الأصلي على client.

webpack.config.js

export default {
  // ...
  devServer: {
    webSocketServer: "ws",
  },
};

لإنشاء تطبيق server مخصص، قم بإنشاء فئة تمتد BaseServer.

باستخدام المسار إلى CustomServer.js، تطبيق WebSocket server المخصص، بالإضافة إلى 'ws' client المتوافق:

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      webSocketTransport: "ws",
    },
    webSocketServer: import.meta.resolve("./CustomServer"),
  },
};

استخدام تطبيقات WebSocket client وserver المخصصة والمتوافقة:

webpack.config.js

export default {
  // ...
  devServer: {
    client: {
      webSocketTransport: import.meta.resolve("./CustomClient"),
    },
    webSocketServer: import.meta.resolve("./CustomServer"),
  },
};

Edit this page·

« Previous

Plugins

Cache

DevServer

devServer

الاستخدام عبر CLI

الاستخدام عبر API

devServer.app

devServer.allowedHosts

devServer.bonjour

devServer.client

تسجيل

تراكب

التقدم

أعد الاتصال

webSocketTransport

webSocketURL

devServer.compress

devServer.devMiddleware

devServer.headers

devServer.historyApiFallback

devServer.host

local-ip

local-ipv4

local-ipv6

devServer.hot

devServer.ipc

devServer.liveReload

devserver.onListening

devServer.open

devServer.port

devServer.proxy

devServer.server

devServer.setupExitSignals

devServer.setupMiddlewares

devServer.static

الدليل

staticOptions

publicPath

serverIndex

watch

devServer.watchFiles

devServer.webSocketServer

1 Contributor