webpack-dev-server API

webpackjsorg-mainAPI 参考

title: webpack-dev-server API
sort: 3
contributors:

snitin315
bjohansebas

webpack-dev-server 提供了一个 Node.js API，可以直接在 Node.js 运行时中使用。

安装

要开始使用 webpack-dev-server Node.js API，请先安装 webpack 和 webpack-dev-server（如果尚未安装）：

bash 复制代码

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

然后在你的 Node.js 脚本中引入这些模块：

js 复制代码

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

警告： webpack-dev-server@6 需要 Node.js 22.15.0 或更高版本，以及 webpack 5.101.0 或更高版本。

提示： 从版本 6 开始，包的源码为原生 ESM。推荐使用 import 语法；CommonJS 使用者仍然可以通过 exports 字段暴露的 CommonJS 构建，使用 require("webpack-dev-server")。

start

它指示 webpack-dev-server 实例启动服务器。

server.js

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();

然后使用以下命令运行服务器：

bash 复制代码

node server.js

startCallback(callback)

它指示 webpack-dev-server 实例启动服务器，然后运行回调函数。

server.js

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");
});

然后使用以下命令运行服务器：

bash 复制代码

node server.js

stop

它指示 webpack-dev-server 实例停止服务器。

server.js

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);

然后使用以下命令运行服务器：

bash 复制代码

node server.js

stopCallback(callback)

它指示 webpack-dev-server 实例停止服务器，然后运行回调函数。

server.js

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);

然后使用以下命令运行服务器：

bash 复制代码

node server.js

apply(compiler)

v6.0.0+

webpack-dev-server 可以作为 webpack 插件使用，而无需显式地将 compiler 传入构造函数。服务器会与编译器的生命周期集成：当 watch 模式下的首次编译完成时启动；重新编译时不会多次启动；并在编译器关闭时正常停止。同时支持 MultiCompiler 配置，其中每个配置都可以运行自己的插件服务器。

server.js

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);
  }
});

或者，在现有的 compiler 上调用 apply：

js 复制代码

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

server.apply(compiler);

提示： 在插件模式下，服务器仅在 watch 模式下启动：一次性的 compiler.run() 构建会在不启动服务器的情况下结束。

findIp(gatewayOrFamily, isInternal)

v5.1.0+

同步返回解析后的本地 IP 地址；当没有找到匹配的地址时返回 undefined。

gatewayOrFamily：IP 地址族（"v4" | "v6"）或网关 IP 地址。当传入网关地址时，返回属于同一子网的本地接口地址。
isInternal：可选。当设置为 false 时，仅考虑外部可访问（LAN）地址；当设置为 true 时，仅考虑内部（例如回环）地址。省略时，两者均会被考虑。

server.js

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);

警告： internalIP(family) 和 internalIPSync(family) 静态方法已在 webpack-dev-server@6 中被移除。请使用 findIp(family, false) 来获得相同的结果。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。