DevServer

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

Options that are compatible with webpack-dev-middleware have 🔑 next to them.

devServer

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 simple example that gzips and serves everything from our dist/ directory in the project root:

webpack.config.js

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 a second parameter instead: new WebpackDevServer(compiler, <. >) . See here for an example of how to use webpack-dev-server through the Node.js API.

warning

You cannot use the second compiler argument (a callback) when using WebpackDevServer .

warning

Be aware that when exporting multiple configurations only the devServer options for the first configuration will be taken into account and 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 /invalidate route will invalidate the current compilation of the bundle and recompile it for you via webpack-dev-middleware. Depending on your configuration, URL may look like http://localhost:9000/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.

Usage via CLI

You can invoke webpack-dev-server via CLI by:

A list of CLI options for serve is available here

devServer.after

function (app, server, compiler)

Provides the ability to execute custom middleware after all other middleware internally within the server.

webpack.config.js

devServer.allowedHosts

This option allows you to whitelist services that are allowed to access the dev server.

webpack.config.js

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 .

webpack.config.js

To use this option with the CLI pass the —allowed-hosts as following:

devServer.before

function (app, server, compiler)

Provides the ability to execute custom middleware prior to all other middleware internally within the server. This could be used to define custom handlers, for example:

webpack.config.js

devServer.bonjour

This option broadcasts the server via ZeroConf networking on start

webpack.config.js

Usage via the CLI

devServer.clientLogLevel

string = ‘info’: ‘silent’ | ‘trace’ | ‘debug’ | ‘info’ | ‘warn’ | ‘error’ | ‘none’ | ‘warning’

warning

none and warning are going to be deprecated at the next major version.

When using inline mode, the console in your DevTools will show you messages e.g. before reloading, before an error or when Hot Module Replacement is enabled.

devServer.clientLogLevel may be too verbose, you can turn logging off by setting it to ‘silent’ .

webpack.config.js

Usage via the CLI

devServer.compress

Enable gzip compression for everything served:

webpack.config.js

Usage via the CLI

devServer.contentBase

boolean: false string [string] number

Tell the server where to serve content from. This is only necessary if you want to serve static files. devServer.publicPath will be used to determine where the bundles should be served from, and takes precedence.

It is recommended to use an absolute path.

By default, it will use your current working directory to serve content. To disable contentBase set it to false .

webpack.config.js

It is also possible to serve from multiple directories in case you want to serve static content at multiple URLs with contentBasePublicPath :

webpack.config.js

Usage via the CLI

devServer.contentBasePublicPath

Tell the server at what URL to serve devServer.contentBase static content. If there was a file assets/manifest.json , it would be served at /serve-content-base-at-this-url/manifest.json

webpack.config.js

Provide an array of strings in case you have multiple static folders set in contentBase .

webpack.config.js

devServer.disableHostCheck

When set to true this option bypasses host checking. THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks.

webpack.config.js

Usage via the CLI

devServer.filename 🔑

This option lets you reduce the compilations in lazy mode. By default in lazy mode, every request results in a new compilation. With filename , it’s possible to only compile when a certain file is requested.

If output.filename is set to ‘bundle.js’ and devServer.filename is used like this:

webpack.config.js

It will now only compile the bundle when /bundle.js is requested.

filename has no effect when used without lazy mode.

devServer.headers 🔑

Adds headers to all responses:

webpack.config.js

devServer.historyApiFallback

boolean = false object

When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true :

webpack.config.js

By passing an object this behavior can be controlled further using options like rewrites :

webpack.config.js

When using dots in your path (common with Angular), you may need to use the disableDotRule :

webpack.config.js

Usage via the CLI

For more options and information, see the connect-history-api-fallback documentation.

devServer.host

Specify a host to use. If you want your server to be accessible externally, specify it like this:

webpack.config.js

Usage via the CLI

devServer.hot

webpack.config.js

Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the —hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js . See the HMR concepts page for more information.

devServer.hotOnly

Enables Hot Module Replacement (see devServer.hot ) without page refresh as a fallback in case of build failures.

webpack.config.js

Usage via the CLI

devServer.http2

Serve over HTTP/2 using spdy. This option is ignored for Node 10.0.0 and above, as spdy is broken for those versions. The dev server will migrate over to Node’s built-in HTTP/2 once Express supports it.

If devServer.http2 is not explicitly set to false , it will default to true when devServer.https is enabled. When devServer.http2 is enabled but the server is unable to serve over HTTP/2, the server defaults to HTTPS.

HTTP/2 with a self-signed certificate:

webpack.config.js

Provide your own certificate using the https option:

webpack.config.js

To pass your own certificate via CLI, use the following options

devServer.https

By default, dev-server will be served over HTTP. It can optionally be served over HTTP/2 with HTTPS:

webpack.config.js

With the above setting, a self-signed certificate is used, but you can provide your own:

webpack.config.js

This object is passed straight to Node.js HTTPS module, so see the HTTPS documentation for more information.

Usage via the CLI

To pass your own certificate via the CLI use the following options

devServer.index

The filename that is considered the index file.

webpack.config.js

devServer.injectClient

boolean = false function (compilerConfig) => boolean

Tells devServer to inject a client. Setting devServer.injectClient to true will result in always injecting a client. It is possible to provide a function to inject conditionally:

devServer.injectHot

boolean = false function (compilerConfig) => boolean

Tells devServer to inject a Hot Module Replacement. Setting devServer.injectHot to true will result in always injecting. It is possible to provide a function to inject conditionally:

warning

Make sure that devServer.hot is set to true because devServer.injectHot only works with HMR.

devServer.inline

Toggle between the dev-server’s two different modes. By default, the application will be served with inline mode enabled. This means that a script will be inserted in your bundle to take care of live reloading, and build messages will appear in the browser console.

It is also possible to use iframe mode, which uses an under a notification bar with messages about the build. To switch to iframe mode:

webpack.config.js

Usage via the CLI

Notice that there’s no way to disable it from CLI.

Inline mode is recommended for Hot Module Replacement as it includes an HMR trigger from the websocket. Polling mode can be used as an alternative, but requires an additional entry point, ‘webpack/hot/poll?1000’ .

devServer.lazy 🔑

When devServer.lazy is enabled, the dev-server will only compile the bundle when it gets requested. This means that webpack will not watch any file changes. We call this lazy mode.

webpack.config.js

Usage via the CLI

watchOptions will have no effect when used with lazy mode.

If you use the CLI, make sure inline mode is disabled.

devServer.liveReload

By default, the dev-server will reload/refresh the page when file changes are detected. devServer.hot option must be disabled or devServer.watchContentBase option must be enabled in order for liveReload to take effect. Disable devServer.liveReload by setting it to false :

webpack.config.js

Usage via the CLI

Notice that there’s no way to disable it from CLI.

devServer.mimeTypes 🔑

Allows dev-server to register custom mime types. The object is passed to the underlying webpack-dev-middleware . See documentation for usage notes.

webpack.config.js

devServer.noInfo 🔑

Tells dev-server to suppress messages like the webpack bundle information. Errors and warnings will still be shown.

webpack.config.js

devServer.onListening

Provides an option to execute a custom function when webpack-dev-server starts listening for connections on a port.

webpack.config.js

devServer.open

boolean = false string object

Tells dev-server to open the browser after server had been started. Set it to true to open your default browser.

webpack.config.js

Provide browser name to use instead of the default one:

webpack.config.js

If you want to use flags when opening the browser like opening an incognito window ( —incognito flag), you can set open to an object. The object accepts all open options, app property must be an array. The first element in the array must be the browser name and the other following elements are the flags you want to use. For example:

webpack.config.js

Usage via the CLI

The browser application name is platform dependent. Don’t hard code it in reusable modules. For example, ‘Chrome’ is ‘Google Chrome’ on macOS, ‘google-chrome’ on Linux and ‘chrome’ on Windows.

devServer.openPage

Specify a page to navigate to when opening the browser.

webpack.config.js

Usage via the CLI

warning

Do not prepend / for the page as webpack-dev-server will do it automatically, otherwise the browser will open urls like http://localhost:8080//different/page .

If you wish to specify multiple pages to open in the browser.

webpack.config.js

Usage via the CLI

devServer.overlay

boolean = false object:

Shows a full-screen overlay in the browser when there are compiler errors or warnings. If you want to show only compiler errors:

webpack.config.js

If you want to show warnings as well as errors:

webpack.config.js

devServer.pfx

When used via the CLI, a path to an SSL .pfx file. If used in options, it should be the bytestream of the .pfx file.

webpack.config.js

Usage via the CLI

devServer.pfxPassphrase

The passphrase to a SSL PFX file.

webpack.config.js

Usage via the CLI

devServer.port

Specify a port number to listen for requests on:

webpack.config.js

Usage via the CLI

devServer.proxy

object [object, function]

Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain.

The dev-server makes use of the powerful http-proxy-middleware package. Check out its documentation for more advanced usages. Note that some of http-proxy-middleware ‘s features do not require a target key, e.g. its router feature, but you will still need to include a target key in your configuration here, otherwise webpack-dev-server won’t pass it along to http-proxy-middleware ).

With a backend on localhost:3000 , you can use this to enable proxying:

webpack.config.js

A request to /api/users will now proxy the request to http://localhost:3000/api/users .

If you don’t want /api to be passed along, we need to rewrite the path:

webpack.config.js

A backend server running on HTTPS with an invalid certificate will not be accepted by default. If you want to, modify your configuration like this:

webpack.config.js

Sometimes you don’t want to proxy everything. It is possible to bypass the proxy based on the return value of a function.

In the function you get access to the request, response, and proxy options.

• Return null or undefined to continue processing the request with proxy.
• Return false to produce a 404 error for the request.
• Return a path to serve from, instead of continuing to proxy the request.

E.g. for a browser request, you want to serve an HTML page, but for an API request you want to proxy it. You could do something like this:

webpack.config.js

If you want to proxy multiple, specific paths to the same target, you can use an array of one or more objects with a context property:

webpack.config.js

Note that requests to root won’t be proxied by default. To enable root proxying, the devServer.index option should be specified as a falsy value:

webpack.config.js

The origin of the host header is kept when proxying by default, you can set changeOrigin to true to override this behaviour. It is useful in some cases like using name-based virtual hosted sites.

webpack.config.js

devServer.progress — CLI only

Output running progress to console.

devServer.public

When using inline mode and you’re proxying dev-server, the inline client script does not always know where to connect to. It will try to guess the URL of the server based on window.location , but if that fails you’ll need to use this.

For example, the dev-server is proxied by nginx, and available on myapp.test :

webpack.config.js

Usage via the CLI

devServer.publicPath 🔑

The bundled files will be available in the browser under this path.

Imagine that the server is running under http://localhost:8080 and output.filename is set to bundle.js . By default the devServer.publicPath is ‘/’ , so your bundle is available as http://localhost:8080/bundle.js .

Change devServer.publicPath to put bundle under specific directory:

webpack.config.js

The bundle will now be available as http://localhost:8080/assets/bundle.js .

Make sure devServer.publicPath always starts and ends with a forward slash.

It is also possible to use a full URL.

webpack.config.js

The bundle will also be available as http://localhost:8080/assets/bundle.js .

It is recommended that devServer.publicPath is the same as output.publicPath .

devServer.quiet 🔑

With devServer.quiet enabled, nothing except the initial startup information will be written to the console. This also means that errors or warnings from webpack are not visible.

webpack.config.js

Usage via the CLI

devServer.serveIndex

Tells dev-server to use serveIndex middleware when enabled.

serveIndex middleware generates directory listings on viewing directories that don’t have an index.html file.

devServer.setup

function (app, server)

warning

This option is deprecated in favor of devServer.before and will be removed in v3.0.0.

Here you can access the Express app object and add your own custom middleware to it. For example, to define custom handlers for some paths:

webpack.config.js

devServer.sockHost

Tells clients connected to devServer to use provided socket host.

webpack.config.js

devServer.sockPath

The path at which to connect to the reloading socket.

webpack.config.js

Usage via the CLI

devServer.sockPort

Tells clients connected to devServer to use provided socket port.

webpack.config.js

devServer.staticOptions

It is possible to configure advanced options for serving static files from contentBase . See the Express documentation for the possible options.

webpack.config.js

This only works when using devServer.contentBase as a string .

devServer.stats 🔑

string: ‘none’ | ‘errors-only’ | ‘minimal’ | ‘normal’ | ‘verbose’ object

This option lets you precisely control what bundle information gets displayed. This can be a nice middle ground if you want some bundle information, but not all of it.

To show only errors in your bundle:

webpack.config.js

This option has no effect when used with quiet or noInfo .

devServer.stdin — CLI only

This option closes the server when stdin ends.

devServer.transportMode

string = ‘sockjs’: ‘sockjs’ | ‘ws’ object

warning

transportMode is an experimental option, meaning its usage could potentially change without warning.

Providing a string to devServer.transportMode is a shortcut to setting both devServer.transportMode.client and devServer.transportMode.server to the given string value.

This option allows us either to choose the current devServer transport mode for client/server individually or to provide custom client/server implementation. This allows to specify how browser or other client communicates with the devServer .

The current default mode is ‘sockjs’ . This mode uses SockJS-node as a server, and SockJS-client on the client.

‘ws’ mode will become the default mode in the next major devServer version. This mode uses ws as a server, and native WebSockets on the client.

When providing a custom client and server implementation make sure that they are compatible with one another to communicate successfully.

devServer.transportMode.client

To create a custom client implementation, create a class that extends BaseClient .

Using path to CustomClient.js , a custom WebSocket client implementation, along with the compatible ‘ws’ server:

devServer.transportMode.server

string path function

To create a custom server implementation, create a class that extends BaseServer .

Using path to CustomServer.js , a custom WebSocket server implementation, along with the compatible ‘ws’ client:

Using class exported by CustomServer.js , a custom WebSocket server implementation, along with the compatible ‘ws’ client:

Using custom, compatible WebSocket client and server implementations:

devServer.useLocalIp

This option lets the browser open with your local IP.

webpack.config.js

Usage via the CLI

devServer.watchContentBase

Tell dev-server to watch the files served by the devServer.contentBase option. It is disabled by default. When enabled, file changes will trigger a full page reload.

webpack.config.js

Usage via the CLI

devServer.watchOptions 🔑

Control options related to watching the files.

webpack uses the file system to get notified of file changes. In some cases, this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. In these cases, use polling:

webpack.config.js

If this is too heavy on the file system, you can change this to an integer to set the interval in milliseconds.

See WatchOptions for more options.

devServer.writeToDisk 🔑

boolean = false function (filePath) => boolean