From c40006c48d5fb4f6eaba98ce5edb57e899a217a9 Mon Sep 17 00:00:00 2001
From: LingyuCoder <lingyucoder@gmail.com>
Date: Tue, 24 Sep 2024 18:08:35 +0800
Subject: [PATCH] docs: update README.md

---
 README.md | 104 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 100 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 6aa232c..47fb478 100644
--- a/README.md
+++ b/README.md
@@ -5,12 +5,108 @@
 
 # @rspack/dev-server
 
-Development server for rspack.
+Use Rspack with a development server that provides live reloading. This should be used for development only.
 
-## Documentation
+> `@rspack/dev-server` is based on `webpack-dev-server@5`
 
-See [https://rspack.dev](https://rspack.dev) for details.
+## 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
 
-Rspack is [MIT licensed](https://github.com/web-infra-dev/rspack/blob/main/LICENSE).
+[MIT licensed](https://github.com/web-infra-dev/rspack-dev-server/blob/main/LICENSE).