شعار 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

internalIP(family: "v4" | "v6")

ترجع هذه الدالة عنوان IPv4 أو IPv6 الداخلي بشكل غير متزامن.

server.js

import WebpackDevServer from "webpack-dev-server";

const logInternalIPs = async () => {
  const localIPv4 = await WebpackDevServer.internalIP("v4");
  const localIPv6 = await WebpackDevServer.internalIP("v6");

  console.log("Local IPv4 address:", localIPv4);
  console.log("Local IPv6 address:", localIPv6);
};

logInternalIPs();

internalIPSync(family: "v4" | "v6")

ترجع هذه الدالة عنوان IPv4 أو IPv6 الداخلي بشكل متزامن.

server.js

import WebpackDevServer from "webpack-dev-server";

const localIPv4 = WebpackDevServer.internalIPSync("v4");
const localIPv6 = WebpackDevServer.internalIPSync("v6");

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

1 مساهم

RlxChap2