Upgrading webpack-dev-server 3 to 4

Breaking3.11.3 → 4.15.2Breaking40Security2New59Fixed112Other1

Full comparison Back to webpack-dev-server

SecurityBumps webpack-dev-middleware to address a security issue.4116209 ↗

BreakingUpgrade verdict

40 breaking changes and 2 security fixes.

In plain terms

Rename client.transport to client.webSocketTransport.
Remove entry options (i.e. hotEntry and needClientEntry) in favor manual setup entries.
the https.ca option was removed in favor the https.cacert option.
the dev option was renamed to devMiddleware.

Must act Top 5 of 42 that need code or config changes

webpack-dev-server publishes an official migration guide for version 4. It covers more than the release notes do.

Migration guide ↗

Node.js requirement changed in 4.0.0-beta.3: >= 6.11.5 → >= 12.13.0.

Adds @types/bonjour ^3.5.9, @types/connect-history-api-fallback ^1.3.5, @types/express ^4.17.13, @types/serve-index ^1.9.1, @types/serve-static ^1.13.10, @types/sockjs ^0.3.33, @types/ws ^8.5.5, bonjour-service ^1.0.11, colorette ^2.0.10, default-gateway ^6.0.3, graceful-fs ^4.2.6, ipaddr.js ^2.0.1, launch-editor ^2.6.0, open ^8.0.9, rimraf ^3.0.2.

Drops bonjour, debug, del, import-local, internal-ip, ip, is-absolute-url, killable, loglevel, opn, portfinder, semver, sockjs-client, strip-ansi, supports-color, url, webpack-log, yargs.

Installs 217 packages in all (was 398).

Also installs @types/body-parser, @types/connect, @types/express-serve-static-core, @types/http-errors, @types/http-proxy, @types/json-schema, @types/mime, @types/node-forge, @types/qs, @types/range-parser, @types/retry, @types/send, ajv-formats, define-lazy-prop, fast-uri and 13 more.

No longer installs @isaacs/nonrecursive-glob-match, @types/glob, @types/minimatch, ajv-errors, ansi-colors, ansi-regex, ansi-styles, arr-diff, arr-flatten, arr-union, array-union, array-uniq, array-unique, assign-symbols, async and 137 more.

Moves ajv 6.15.0 → 8.20.0, ajv-keywords 3.5.2 → 5.1.0, anymatch 2.0.0 → 3.1.3, array-flatten 1.1.1, 2.1.2 → 1.1.1, balanced-match 1.0.2, 4.0.4 → 1.0.2, binary-extensions 1.13.1 → 2.3.0, brace-expansion 1.1.21, 5.0.12 → 1.1.21, braces 2.3.2 → 3.0.3, chokidar 2.1.8 → 3.6.0, connect-history-api-fallback 1.6.0 → 2.0.0, cross-spawn 6.0.6 → 7.0.6, debug 2.6.9, 3.2.7, 4.4.3 → 2.6.9, 4.4.3, default-gateway 4.2.0 → 6.0.3, execa 1.0.0 → 5.1.1, fill-range 4.0.0 → 7.1.1 and 32 more. Your build may pick other versions.

What you must change

Breaking40

Rename client.transport to client.webSocketTransport.

client.transportclient.webSocketTransport

4.0.0-rc.0GitHub ReleaseOriginalView source

Remove entry options (i.e. hotEntry and needClientEntry) in favor manual setup entries.

hotEntryneedClientEntry

4.0.0-rc.0GitHub ReleaseOriginalView source

the https.ca option was removed in favor the https.cacert option.

https.cahttps.cacert

4.0.0-beta.3GitHub ReleaseOriginalView source

the dev option was renamed to devMiddleware.

devdevMiddleware

4.0.0-beta.3GitHub ReleaseOriginalView source

the client.overlay option is true by default and show warnings by default.

client.overlaytrue

4.0.0-beta.3GitHub ReleaseOriginalView source

use server port for websocket connection by default, if you proxied webpack-dev-server, please update webpack-cli to v4.7.0.

webpack-dev-serverwebpack-cli

4.0.0-beta.3GitHub ReleaseOriginalView source

the openPage option and the --open-page CLI option were removed in favor { open: ['/my-page', '/my-other-page/'] } for Node.js API and --open-target [URL] (without [URL] dev server will open a…

openPage--open-page[URL]host

4.0.0-beta.2GitHub ReleaseOriginalView source

the useLocalIp option was removed in favor { host: 'local-ip' }, alternative you can provide values: local-ipv4 for IPv4 and local-ipv6 for IPv6.

useLocalIplocal-ipv4local-ipv6

4.0.0-beta.2GitHub ReleaseOriginalView source

stdin option was removed in favor --watch-options-stdin.

stdin--watch-options-stdin

4.0.0-beta.2GitHub ReleaseOriginalView source

injectClient and injectHot was removed in favor client.needClientEntry and client.needHotEntry.

injectClientinjectHotclient.needClientEntryclient.needHotEntry

4.0.0-beta.2GitHub ReleaseOriginalView source

--hot-only option was removed.

--hot-only

4.0.0-beta.1GitHub ReleaseOriginalView source

default value of the static option is path.resolve(process.cwd(), 'public'), previously path.resolve(process.cwd(), 'static').

staticpath.resolve(process.cwd(), 'public')path.resolve(process.cwd(), 'static')

4.0.0-beta.1GitHub ReleaseOriginalView source

Drop support Node.js@6 and Node.js@8, minimum supported Node.js version is Node@10.

Node.js@6Node.js@8Node.jsNode@10

4.0.0-beta.0GitHub ReleaseOriginalView source

the hot option is true by default.

hottrue

4.0.0-beta.0GitHub ReleaseOriginalView source

the hotOnly option was removed, if you need hot only mode, use hot: 'only' value.

hotOnly

4.0.0-beta.0GitHub ReleaseOriginalView source

the default transportMode is switched from sockjs to ws (IE 11 and other old browsers doesn't support WebSocket, set sockjs value for transportMode if you need supports IE 11).

transportModesockjsws

4.0.0-beta.0GitHub ReleaseOriginalView source

before, after and setup were removed in favor onBeforeSetupMiddleware (previously before) and onAfterSetupMiddleware options (previously after).

beforeaftersetuponBeforeSetupMiddlewareonAfterSetupMiddleware

4.0.0-beta.0GitHub ReleaseOriginalView source

the clientOptions was renamed to the client option.

clientOptionsclient

4.0.0-beta.0GitHub ReleaseOriginalView source

the sockHost, sockPath and sockPort options were removed in client option.

sockHostsockPathsockPortclient

4.0.0-beta.0GitHub ReleaseOriginalView source

the inline option (iframe live mode) was removed.

inlineiframe

4.0.0-beta.0GitHub ReleaseOriginalView source

the lazy and filename options were removed.

lazyfilename

4.0.0-beta.0GitHub ReleaseOriginalView source

the features option was removed.

features

4.0.0-beta.0GitHub ReleaseOriginalView source

the log, logLevel, logTime, noInfo, quiet, reporter and warn options were removed in favor of built-in webpack logger, please read this to enable and setup logging output.

loglogLevellogTimenoInfoquietreporter

4.0.0-beta.0GitHub ReleaseOriginalView source

the stats option was removed, please use the stats option from webpack.config.js.

statswebpack.config.js

4.0.0-beta.0GitHub ReleaseOriginalView source

the socket option was removed.

socket

4.0.0-beta.0GitHub ReleaseOriginalView source

the contentBase, contentBasePublicPath, serveIndex, staticOptions, watchContentBase, watchOptions were removed in favor of the static option.

contentBasecontentBasePublicPathserveIndexstaticOptionswatchContentBasewatchOptions

4.0.0-beta.0GitHub ReleaseOriginalView source

the disableHostCheck and allowedHosts options were removed in favor of the firewall option.

disableHostCheckallowedHostsfirewall

4.0.0-beta.0GitHub ReleaseOriginalView source

the profile option was removed, to print profile data, set client: { progress: 'profile' }.

profile

4.0.0-beta.0GitHub ReleaseOriginalView source

client uses the port of the current location (location.port, equivalent to sockPort: 'location'), by default.

location.portclient.port

4.0.0-beta.0GitHub ReleaseOriginalView source

client uses the hostname of the current location (location.hostname), by default.

location.hostnameclient.host

4.0.0-beta.0GitHub ReleaseOriginalView source

Move web socket client to web socket server class, i.e. to get web socket clients use this.webSocketServer.clients.

this.webSocketServer.clients

4.0.0-rc.0GitHub ReleaseOriginalView source

you need to reset CLI options using reset option, please look them in webpack serve --help.

reset

4.0.0-rc.0GitHub ReleaseOriginalView source

host and port options can't be null or empty string.

hostportnull

4.0.0-rc.0GitHub ReleaseOriginalView source

minimum supported Node.js version is 12.13.0.

4.0.0-beta.3GitHub ReleaseOriginalView source

the overlay option was moved into the client option.

overlayclient

4.0.0-beta.1GitHub ReleaseOriginalView source

the key, cert, pfx, pfx-passphrase, cacert, ca and requestCert options were moved to https options, please use https.{key|cert|pfx|passphrase|requestCert|cacert|ca|requestCert}.

keycertpfxpfx-passphrasecacertca

4.0.0-beta.0GitHub ReleaseOriginalView source

the fs, index, mimeTypes, publicPath, serverSideRender, and writeToDisk options were moved in the dev option (webpack-dev-middleware options).

fsindexmimeTypespublicPathserverSideRenderwriteToDisk

4.0.0-beta.0GitHub ReleaseOriginalView source

updating webpack-dev-middleware to v4, which includes many breaking options changes, please read.

webpack-dev-middleware

4.0.0-beta.0GitHub ReleaseOriginalView source

server.listen() will find free port if the port is not set and the port argument is not passed, also print a warning if the port option and the port argument passed to server.listen() are different.

server.listen()port

4.0.0-beta.0GitHub ReleaseOriginalView source

the progress option is moved to the client option, set client: {progress: true}.

progressclient

4.0.0-beta.0GitHub ReleaseOriginalView source

Security2

Bumps webpack-dev-middleware to address a security issue.

webpack-dev-middleware

4.15.2GitHub ReleaseSummarizedView source

Update selfsigned to 2.0.0 version.

selfsigned

4.7.3GitHub ReleaseOriginalView source