شعار 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 صراحةً إلى المنشئ. يتكامل الخادم مع دورة حياة compiler: يبدأ بعد اكتمال أول عملية تصريف في وضع المراقبة، ولا يبدأ مرة أخرى عند كل إعادة تصريف، ويتوقف بصورة سليمة عند إغلاق 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