شعار webpack

webpack-dev-server API

يوفّر webpack-dev-server واجهة Node.js API يمكنك استخدامها مباشرة من داخل بيئة تشغيل Node.js.

التثبيت

لاستخدام Node.js API الخاص بـ webpack-dev-server، ثبّت أولًا webpack وwebpack-dev-server إذا لم يكونا مثبتين لديك:

npm install --save-dev webpack webpack-dev-server

بعد ذلك استورد الحزم داخل سكربت Node.js:

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";

start

تستخدم start لتشغيل الخادم من instance الخاص بـ webpack-dev-server.

server.js

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";
import webpackConfig from "./webpack.config.js";

const compiler = webpack(webpackConfig);
const devServerOptions = { ...webpackConfig.devServer, open: true };
const server = new WebpackDevServer(devServerOptions, compiler);

const runServer = async () => {
  console.log("Starting server...");
  await server.start();
};

runServer();

ثم شغّل الخادم بهذا الأمر:

node server.js

startCallback(callback)

تستخدم startCallback(callback) لتشغيل الخادم، ثم تنفيذ دالة callback بعد بدء التشغيل.

server.js

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";
import webpackConfig from "./webpack.config.js";

const compiler = webpack(webpackConfig);
const devServerOptions = { ...webpackConfig.devServer, open: true };
const server = new WebpackDevServer(devServerOptions, compiler);

server.startCallback(() => {
  console.log("Successfully started server on http://localhost:8080");
});

ثم شغّل الخادم بهذا الأمر:

node server.js

stop

تستخدم stop لإيقاف الخادم من instance الخاص بـ webpack-dev-server.

server.js

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";
import webpackConfig from "./webpack.config.js";

const compiler = webpack(webpackConfig);
const devServerOptions = { ...webpackConfig.devServer, open: true };
const server = new WebpackDevServer(devServerOptions, compiler);

const runServer = async () => {
  console.log("Starting server...");
  await server.start();
};

const stopServer = async () => {
  console.log("Stopping server...");
  await server.stop();
};

runServer();

setTimeout(stopServer, 5000);

ثم شغّل الخادم بهذا الأمر:

node server.js

stopCallback(callback)

تستخدم stopCallback(callback) لإيقاف الخادم، ثم تنفيذ دالة callback بعد اكتمال الإيقاف.

server.js

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";
import webpackConfig from "./webpack.config.js";

const compiler = webpack(webpackConfig);
const devServerOptions = { ...webpackConfig.devServer, open: true };
const server = new WebpackDevServer(devServerOptions, compiler);

server.startCallback(() => {
  console.log("Successfully started server on http://localhost:8080");
});

const stopServer = () =>
  server.stopCallback(() => {
    console.log("Server stopped.");
  });

setTimeout(stopServer, 5000);

ثم شغّل الخادم بهذا الأمر:

node server.js

apply(compiler)

v6.0.0+

يمكن استخدام webpack-dev-server بوصفه plugin لـ webpack دون تمرير compiler صراحةً إلى constructor. يندمج الخادم مع دورة حياة compiler؛ فيبدأ بعد اكتمال أول compilation في وضع المراقبة، ولا يبدأ مرة أخرى عند كل recompilation، ويتوقف بصورة سليمة عند إغلاق compiler. كما يدعم إعدادات MultiCompiler، بحيث يستطيع كل تخصيص تشغيل خادم plugin مستقل.

server.js

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";

const compiler = webpack({
  // ...
  mode: "development",
  plugins: [new WebpackDevServer({ port: 8080 })],
});

compiler.watch({}, (error) => {
  if (error) {
    console.error(error);
  }
});

وبديلًا من ذلك، يمكنك استدعاء apply على compiler موجود:

const server = new WebpackDevServer({ port: 8080 });

server.apply(compiler);

findIp(gatewayOrFamily, isInternal)

v5.1.0+

تعيد هذه الدالة عنوان IP المحلي بعد تحديده بصورة متزامنة، أو تعيد undefined إذا لم تجد عنوانًا مطابقًا.

  • gatewayOrFamily: عائلة عناوين IP ("v4" أو "v6") أو عنوان IP لبوابة الشبكة. عند تمرير عنوان بوابة، تعيد الدالة عنوان الواجهة المحلية الواقعة ضمن الشبكة الفرعية نفسها.
  • isInternal: خيار اختياري. عند ضبطه على false، لا تؤخذ في الحسبان إلا العناوين المتاحة خارجيًا ضمن الشبكة المحلية (LAN). وعند ضبطه على true، لا تؤخذ إلا العناوين الداخلية، مثل loopback. أما عند حذفه فتؤخذ الفئتان في الحسبان.

server.js

import WebpackDevServer from "webpack-dev-server";

const localIPv4 = WebpackDevServer.findIp("v4", false);
const localIPv6 = WebpackDevServer.findIp("v6", false);

console.log("Local IPv4 address:", localIPv4);
console.log("Local IPv6 address:", localIPv6);
·تعديل هذه الصفحة
السابق ›
بيانات Stats
‹ التالي
Hot Module Replacement

3 مساهمون

snitin315bjohansebasRlxChap2