webpack-dev-server

5.2.3 verified Sat Apr 25 auth: no javascript

A development server that provides live reloading for webpack projects, using webpack-dev-middleware for fast in-memory asset access. Current stable version is 5.2.3 (released January 2026). Active maintenance with frequent patch releases. Major differentiating features include: live reloading, HMR, overlay for runtime errors, proxy for API forwarding, HTTPS support, and TypeScript type definitions. Requires Node >= 18.12.0 and webpack ^5.0.0 as peer dependency. Breaking changes in v5 include stricter CORS and WebSocket security, removal of certain options like `inline` and `lazy`, and migration from webpack-cli v4 to v5.

Common errors

error Cannot find module 'webpack-dev-server' ↓

cause Missing local installation or using deprecated CLI command without local webpack-dev-server.

fix

Run 'npm install --save-dev webpack-dev-server' in project directory.

error Error: listen EADDRINUSE :::8080 ↓

cause Port 8080 already in use by another process.

fix

Change port in config (e.g., --port 3000) or kill process using the port.

error Invalid configuration object. webpack-dev-server has been initialized using a configuration object that does not match the API schema. ↓

cause Using a deprecated option (e.g., 'inline', 'lazy') in v5 config.

fix

Remove deprecated options. See migration guide: https://github.com/webpack/webpack-dev-server/releases/tag/v5.0.0

Warnings

breaking Cross-origin requests are not allowed unless allowed by Access-Control-Allow-Origin header; requests with IP addresses in Origin header are not allowed to connect to WebSocket server unless configured by allowedHosts. ↓

fix Configure allowedHosts or ensure Origin header matches Host for WebSocket connections.

breaking Security: bump webpack-dev-middleware to address directory traversal vulnerability. ↓

fix Upgrade to webpack-dev-server >=5.0.4 (or >=4.15.2 for v4).

deprecated Options 'inline', 'lazy', 'noInfo', 'reporter', 'quiet', 'colors' are removed in v5. ↓

fix Use webpack-dev-server v4 or adjust config (e.g., use 'client.webSocketURL' instead of 'inline').

gotcha Using 'webpack-dev-server' bin directly (e.g., npx webpack-dev-server) is deprecated in favor of 'webpack serve'. ↓

fix Run 'npx webpack serve' instead, which integrates with webpack-cli.

gotcha TypeScript types for Configuration require explicit import from 'webpack-dev-server'. ↓

fix Use 'import type { Configuration } from 'webpack-dev-server';' not from 'webpack'.

Install

npm install webpack-dev-server

yarn add webpack-dev-server

pnpm add webpack-dev-server

Imports

webpack-dev-server
wrong
```
npx webpack-dev-server
```
correct
```
npx webpack serve
```
Use 'webpack serve' CLI command; 'webpack-dev-server' bin is deprecated in v5.

WebpackDevServer

wrong

const WebpackDevServer = require('webpack-dev-server');

correct

import WebpackDevServer from 'webpack-dev-server';

ESM-only since v5; default export for API usage.

Configuration
wrong
```
import { Configuration } from 'webpack';
```
correct
```
import type { Configuration } from 'webpack-dev-server';
```
TypeScript users should import the server-specific Configuration type from 'webpack-dev-server'.

Quickstart

Shows programmatic usage of WebpackDevServer with ESM imports, async start, and hot module replacement enabled.

// webpack.config.js (ESM)
import WebpackDevServer from 'webpack-dev-server';
import webpack from 'webpack';

const compiler = webpack({ /* webpack config */ });
const devServerOptions = { port: 3000, hot: true };
const server = new WebpackDevServer(devServerOptions, compiler);

async function start() {
  await server.start();
  console.log('Dev server running on http://localhost:3000');
}
start();