DevServer | webpack

webpack-dev-server can be used to quickly develop an application. See the development guide to get started.
This page describes the options that affect the behavior of webpack-dev-server (short: dev-server) version >= 5.0.0. Migration guide from v4 to v5 can be found here.
webpack-dev-server v5.0.0+ requires node >= v18.12.0, webpack >= v5.0.0 and webpack-cli >= v4.7.0, we recommend using the latest version.
This set of options is picked up by webpack-dev-server and can be used to change its behavior in various ways. Here's a rudimentary example that gzips and serves everything from our public/ directory in the project root:
When the server is started, there will be a message prior to the list of resolved modules:
that will give some background on where the server is located and what it's serving.
If you're using dev-server through the Node.js API, the options in devServer will be ignored. Pass the options as the first parameter instead: new WebpackDevServer({...}, compiler). See here for an example of how to use webpack-dev-server through the Node.js API.
You cannot use the second compiler argument (a callback) when using WebpackDevServer.
Be aware that when exporting multiple configurations the devServer options are taken from the first configuration that defines devServer; if none does, from the first configuration with a web-like target (a web or universal platform, which covers web, webworker, electron-preload, electron-renderer, node-webkit and an unset target), and otherwise from the first configuration. They are used for all the configurations in the array.
If you're having trouble, navigating to the /webpack-dev-server route will show where files are served. For example, http://localhost:9000/webpack-dev-server.
If you want to manually recompile the bundle, navigating to the /webpack-dev-server/invalidate route will invalidate the current compilation of the bundle and recompile it for you via webpack-dev-middleware. Depending on your configuration, the URL may look like http://localhost:9000/webpack-dev-server/invalidate.
HTML template is required to serve the bundle, usually, it is an index.html file. Make sure that script references are added into HTML, webpack-dev-server doesn't inject them automatically.
You can invoke webpack-dev-server via CLI by:
A list of CLI options for serve is available here
While it's recommended to run webpack-dev-server via the CLI, you may also choose to start a server via the API.
See the related API documentation for webpack-dev-server.
Allows you to use custom server applications, such as connect, fastify, etc. The default application used is express.
'auto' | 'all' string string[]
This option allows you to allowlist services that are allowed to access the dev server.
Mimicking Django's ALLOWED_HOSTS, a value beginning with . can be used as a subdomain wildcard. .host.com will match host.com, www.host.com, and any other subdomain of host.com.
When set to 'all' this option bypasses host checking. THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks.
When set to 'auto' this option always allows localhost, host, and client.webSocketURL.hostname:
boolean = false object
This option broadcasts the server via ZeroConf networking on start.
You can also pass custom options to bonjour, for example:
'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'
Allows to set log level in the browser, e.g. before reloading, before an error or when Hot Module Replacement is enabled.
boolean = true object
Shows a full-screen overlay in the browser when there are compiler errors or warnings.
You can provide an object with the following properties for more granular control:
All properties are optional and default to true when not provided.
For example, to disable compilation warnings, you can provide the following configuration:
To filter based on the thrown error, you can pass a function that accepts an error parameter and returns a boolean.
For example, to ignore errors thrown by AbortController.abort():
The function will not have access to the variables declared in the outer scope within the configuration file.
boolean 'linear' | 'circular'
Prints compilation progress in percentage in the browser. 'linear' and 'circular' additionally show a visual indicator.
Tells dev-server the number of times it should try to reconnect the client, 10 by default. When true it will try to reconnect unlimited times; false disables reconnecting.
When set to false it will not try to reconnect.
You can also specify the exact number of times the client should try to reconnect.