https://github.com/web-infra-dev/rspack-dev-server

Dev server for Rspack, provides the same API as webpack-dev-server.
https://github.com/web-infra-dev/rspack-dev-server

devserver rspack

Last synced: 3 months ago
JSON representation

Dev server for Rspack, provides the same API as webpack-dev-server.

• Host: GitHub
• URL: https://github.com/web-infra-dev/rspack-dev-server
• Owner: web-infra-dev
• License: mit
• Created: 2024-09-23T08:33:14.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-10-22T02:15:05.000Z (4 months ago)
• Last Synced: 2024-10-23T03:07:10.816Z (4 months ago)
• Topics: devserver, rspack
• Language: JavaScript
• Homepage: https://rspack.dev/config/dev-server
• Size: 215 KB
• Stars: 6
• Watchers: 8
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-rspack - @rspack/dev-server - dev-server. (Libraries / Rspress Plugins)

README

        

  

  

# @rspack/dev-server



  

  

  

  



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:

```bash

# 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`](https://www.npmjs.com/package/@rspack/cli).

You can install it in your project by:

```bash

# 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:

```bash

# with rspack.config.js

$ rspack serve

# with custom config file

$ rspack serve -c ./your.config.js

```

> See [CLI](https://rspack.dev/api/cli) for more details.

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

```js

// rspack.config.js

module.exports = {

  // ...

  devServer: {

    // the configuration of the development server

    port: 8080

  },

};

```

> See [DevServer](https://rspack.dev/config/dev-server) 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.

```js

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](https://webpack.js.org/api/webpack-dev-server/) for more methods of the server instance.

## Credits

Thanks to the [webpack-dev-server](https://github.com/webpack/webpack-dev-server) project created by [@sokra](https://github.com/sokra)

## License

[MIT licensed](https://github.com/web-infra-dev/rspack-dev-server/blob/main/LICENSE).