Use Rspack with a development server that provides live reloading. This should be used for development only.

@rspack/dev-server is based on webpack-dev-server@5

First of all, install @rspack/dev-server and @rspack/core by your favorite package manager:

# npm $ npm install @rspack/dev-server @rspack/core --save-dev # yarn $ yarn add @rspack/dev-server @rspack/core --dev # pnpm $ pnpm add @rspack/dev-server @rspack/core --save-dev # bun $ bun add @rspack/dev-server @rspack/core -D

There are two recommended ways to use @rspack/dev-server:

The easiest way to use it is with the @rspack/cli.

You can install it in your project by:

# npm $ npm install @rspack/cli --save-dev # yarn $ yarn add @rspack/cli --dev # pnpm $ pnpm add @rspack/cli --save-dev # bun $ bun add @rspack/cli -D

And then start the development server by:

# with rspack.config.js $ rspack serve # with custom config file $ rspack serve -c ./your.config.js

See CLI for more details.

While starting the development server, you can specify the configuration by the devServer field of your Rspack config file:

// rspack.config.mjs export default { // ... devServer: { // the configuration of the development server port: 8080, }, };

See DevServer for all configuration options.

While it's recommended to run @rspack/dev-server via the CLI, you may also choose to start a server via the API.

import { RspackDevServer } from "@rspack/dev-server"; import rspack from "@rspack/core"; import rspackConfig from "./rspack.config.mjs"; const compiler = rspack(rspackConfig); const devServerOptions = { ...rspackConfig.devServer, // override port: 8888, }; const server = new RspackDevServer(devServerOptions, compiler); server.startCallback(() => { console.log("Successfully started server on http://localhost:8888"); });

Cause @rspack/dev-server is based on webpack-dev-server@5, you can see the webpack-dev-server API for more methods of the server instance.

Thanks to the webpack-dev-server project created by @sokra

MIT licensed.