Use Rspack with a development server that provides live reloading. This should be used for development only.
2.x: For Rspack v21.x: For Rspack v1, see v1.x - README for usage guide.
First of all, install @rspack/dev-server and @rspack/core by your favorite package manager:
# npm
$ npm install -D @rspack/dev-server @rspack/core
# yarn
$ yarn add -D @rspack/dev-server @rspack/core
# pnpm
$ pnpm add -D @rspack/dev-server @rspack/core
# bun
$ bun add -D @rspack/dev-server @rspack/coreThere 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 -D @rspack/cli
# yarn
$ yarn add -D @rspack/cli
# pnpm
$ pnpm add -D @rspack/cli
# bun
$ bun add -D @rspack/cliAnd then start the development server by:
# with rspack.config.js
$ rspack serve
# with custom config file
$ rspack serve -c ./your.config.jsSee 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 Rspack - 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 config from './rspack.config.mjs';
const compiler = rspack(config);
const devServerOptions = {
...config.devServer,
// override
port: 8888,
};
const server = new RspackDevServer(devServerOptions, compiler);
server.startCallback(() => {
console.log('Successfully started server on http://localhost:8888');
});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