@rspack/dev-server

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

Note

The main branch is under active development for 2.0. The stable 1.x releases are maintained in the v1.x branch.

Installation

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

Usage

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

With the CLI

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.

With the API

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.

Credits

This plugin is forked from webpack-dev-server, and is used to smooth out some differences between rspack and webpack, while also providing rspack-specific new features.

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

License

MIT licensed.