Skip to content

web-infra-dev/rspack-dev-server

Repository files navigation

Rspack Banner

@rspack/dev-server

npm version downloads node version license

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

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.js
module.exports = {
  // ...
  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.js';

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

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

License

MIT licensed.

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy