webpack logo

webpack-dev-server API

webpack-dev-server provides a Node.js API which can be used directly in Node.js runtime.

Installation

To start using the webpack-dev-server Node.js API, first install webpack and webpack-dev-server if you haven’t yet:

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

Then require the modules in your Node.js script:

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

start

It instructs webpack-dev-server instance to start the 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();

And then run the server with the following command:

node server.js

startCallback(callback)

It instructs webpack-dev-server instance to start the server and then run the callback function.

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

And then run the server with the following command:

node server.js

stop

It instructs webpack-dev-server instance to stop the 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);

And then run the server with the following command:

node server.js

stopCallback(callback)

It instructs webpack-dev-server instance to stop the server and then run the callback function.

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

And then run the server with the following command:

node server.js

apply(compiler)

v6.0.0+

webpack-dev-server can be used as a webpack plugin, without explicitly passing a compiler to the constructor. The server integrates with the compiler lifecycle: it starts once the first compilation in watch mode completes, is not started multiple times on recompilation, and stops cleanly when the compiler is closed. MultiCompiler setups are supported as well, where each configuration can run its own plugin server.

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

Alternatively, call apply on an existing compiler:

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

server.apply(compiler);

findIp(gatewayOrFamily, isInternal)

v5.1.0+

Returns the resolved local IP address synchronously, or undefined when no matching address is found.

  • gatewayOrFamily: an IP family ("v4" | "v6") or a gateway IP address. When a gateway address is passed, the address of the local interface that belongs to the same subnet is returned.
  • isInternal: optional. When set to false, only externally reachable (LAN) addresses are considered; when set to true, only internal (e.g. loopback) addresses are considered. When omitted, both are considered.

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);
Edit this page·
« Previous
Stats Data
Next »
Hot Module Replacement

2 Contributors

snitin315bjohansebas