docs: polish up guide docs (#6922)

* docs: polish up guide docs

* Update website/docs/zh/config/resolve.mdx

Co-authored-by: neverland <jait.chen@foxmail.com>

* Update website/docs/zh/guide/tech/json.mdx

Co-authored-by: neverland <jait.chen@foxmail.com>

* Update website/docs/zh/guide/tech/json.mdx

Co-authored-by: neverland <jait.chen@foxmail.com>

* update

---------

Co-authored-by: neverland <jait.chen@foxmail.com>

website/docs/en/config/resolve.mdx

@@ -120,7 +120,67 @@ module.exports = {
 - **Type:** `Record<string, false | string>`
 - **Default:** `{}`
 
-Redirect in case of failed parsing.
+Redirect module requests when normal resolving fails.
+
+```js title="rspack.config.js"
+module.exports = {
+  //...
+  resolve: {
+    fallback: {
+      abc: false, // do not include a polyfill for abc
+      xyz: path.resolve(__dirname, 'path/to/file.js'), // include a polyfill for xyz
+    },
+  },
+};
+```
+
+Rspack does not polyfills Node.js core modules automatically which means if you use them in your code running in browsers or alike, you will have to install compatible modules from NPM and include them yourself.
+
+You could use [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin) to polyfill Node.js core API automatically.
+
+```js title="rspack.config.js"
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+
+module.exports = {
+  // ...
+  plugins: [new NodePolyfillPlugin()],
+};
+```
+
+Or refer to the list of Node.js polyfills used by webpack 4:
+
+```js title="rspack.config.js"
+module.exports = {
+  //...
+  resolve: {
+    fallback: {
+      assert: require.resolve('assert'),
+      buffer: require.resolve('buffer'),
+      console: require.resolve('console-browserify'),
+      constants: require.resolve('constants-browserify'),
+      crypto: require.resolve('crypto-browserify'),
+      domain: require.resolve('domain-browser'),
+      events: require.resolve('events'),
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify'),
+      os: require.resolve('os-browserify/browser'),
+      path: require.resolve('path-browserify'),
+      punycode: require.resolve('punycode'),
+      process: require.resolve('process/browser'),
+      querystring: require.resolve('querystring-es3'),
+      stream: require.resolve('stream-browserify'),
+      string_decoder: require.resolve('string_decoder'),
+      sys: require.resolve('util'),
+      timers: require.resolve('timers-browserify'),
+      tty: require.resolve('tty-browserify'),
+      url: require.resolve('url'),
+      util: require.resolve('util'),
+      vm: require.resolve('vm-browserify'),
+      zlib: require.resolve('browserify-zlib'),
+    },
+  },
+};
+```
 
 ## resolve.importsFields
 

website/docs/en/guide/tech/_meta.json

@@ -2,7 +2,6 @@
   "typescript",
   "css",
   "json",
-  "nodejs",
   "react",
   "preact",
   "vue",

website/docs/en/guide/tech/css.mdx

@@ -6,13 +6,13 @@ CSS is a first-class citizen with Rspack. Rspack has the ability to handle CSS o
 
 By default, files ending in `*.css` are treated as CSS types. Files ending in `*.module.css` are treated as [CSS Modules](https://github.com/css-modules/css-modules) module types.
 
-If you're migrating from Webpack, you can remove the `css-loader` or `style-loader` components from your configuration to use Rspack's built-in CSS processing capabilities, as described in [migration guide](/guide/migration/webpack#removing-css-loader-and-style-loader-and-mini-css-extract-plugin).
+If you're migrating from webpack, you can remove the `css-loader` or `style-loader` components from your configuration to use Rspack's built-in CSS processing capabilities, as described in [migration guide](/guide/migration/webpack#removing-css-loader-and-style-loader-and-mini-css-extract-plugin).
 
 ## CSS Modules
 
 By default, Rspack treats files with a `*.module.css` extension as CSS Modules. You can import them into your JavaScript files, and then access each class defined in the CSS file as an export from the module.
 
-```ts title="index.module.css"
+```css title="index.module.css"
 .red {
   color: red;
 }
@@ -77,7 +77,7 @@ module.exports = {
             },
           },
         ],
-        // set to 'css/auto' if you want to support '*.module.css' as CSS Module, otherwise set type to 'css'
+        // set to 'css/auto' if you want to support '*.module.css' as CSS Modules, otherwise set type to 'css'
         type: 'css/auto',
       },
     ],
@@ -110,7 +110,7 @@ module.exports = {
             },
           },
         ],
-        // set to 'css/auto' if you want to support '*.module.(scss|sass)' as CSS Module, otherwise set type to 'css'
+        // set to 'css/auto' if you want to support '*.module.(scss|sass)' as CSS Modules, otherwise set type to 'css'
         type: 'css/auto',
       },
     ],
@@ -140,7 +140,7 @@ module.exports = {
             },
           },
         ],
-        // set to 'css/auto' if you want to support '*.module.less' as CSS Module, otherwise set type to 'css'
+        // set to 'css/auto' if you want to support '*.module.less' as CSS Modules, otherwise set type to 'css'
         type: 'css/auto',
       },
     ],

website/docs/en/guide/tech/json.mdx

@@ -2,6 +2,8 @@
 
 [JSON](https://en.wikipedia.org/wiki/JSON) is a first-class citizen with Rspack. You can import it directly, for example:
 
+## Default import
+
 ```json title="example.json"
 {
   "foo": "bar"
@@ -10,5 +12,20 @@
 
 ```ts title="index.js"
 import json from './example.json';
-json.foo; // bar
+console.log(json.foo); // "bar"
+```
+
+## Named import
+
+In non-`.mjs` non-strict ESM files, you can directly import properties from JSON.
+
+```json title="example.json"
+{
+  "foo": "bar"
+}
+```
+
+```ts title="index.js"
+import { foo } from './example.json';
+console.log(foo); // "bar"
 ```

website/docs/en/guide/tech/nestjs.mdx

@@ -5,7 +5,7 @@ Rspack provides NestJS [example](https://github.com/rspack-contrib/rspack-exampl
 
 ## Native node modules
 
-When building Node.js applications with Rspack, you may encounter dependencies that include Node.js native addon dependencies (.node modules). Because .node modules cannot be packaged into JavaScript artifacts, special handling is usually required. node-loader can be used to handle addon packaging very well.
+When building Node.js applications with Rspack, you may encounter dependencies that include Node.js native addon dependencies (`.node` modules). Because `.node` modules cannot be packaged into JavaScript artifacts, special handling is usually required. node-loader can be used to handle addon packaging very well.
 
 ```js title="rspack.config.js"
 module.exports = {

website/docs/en/guide/tech/preact.mdx

@@ -5,7 +5,10 @@ import { ApiMeta, Stability } from '@components/ApiMeta.tsx';
 
 ## How to Use
 
-You can refer to the current document to manually add configurations for Preact.
+Rspack provides two solutions to support Preact:
+
+- **Use Rsbuild**: Rsbuild provides out-of-the-box support for Preact, allowing you to quickly create a Preact project. See [Rsbuild - Preact](https://rsbuild.dev/guide/framework/preact) for details.
+- **Manually configure Rspack**: You can refer to the current document to manually add configurations for Preact.
 
 ## Configure JSX/TSX
 

website/docs/en/guide/tech/react.mdx

@@ -7,8 +7,8 @@ import { ApiMeta, Stability } from '@components/ApiMeta.tsx';
 
 Rspack provides two solutions to support React:
 
-- **Use Rsbuild**: Rsbuild provides out-of-the-box support for React, allowing you to quickly create a React project. See ["Rsbuild - React"](https://rsbuild.dev/guide/framework/react) for details.
-- **Manual configuration**: You can refer to the current document to manually add configurations for React.
+- **Use Rsbuild**: Rsbuild provides out-of-the-box support for React, allowing you to quickly create a React project. See [Rsbuild - React](https://rsbuild.dev/guide/framework/react) for details.
+- **Manual configure Rspack**: You can refer to the current document to manually add configurations for React.
 
 ## Configure JSX/TSX
 
@@ -61,25 +61,9 @@ Refer to [Builtin swc-loader](guide/features/builtin-swc-loader) for detailed co
 
 There are currently two ways to enable React Fast Refresh in Rspack:
 
-### builtins.react.refresh
-
-<ApiMeta stability={Stability.Deprecated} />
-
-In the early stage of Rspack, React Fast Refresh functionality was built into @rspack/dev-server and @rspack/core to provide an out-of-the-box experience for some projects. This means that if you are using @rspack/cli or @rspack/dev-server, React Fast Refresh is automatically enabled in development mode, ready for you to use directly in your projects. This enhanced the usability of Rspack for React projects but also led to various issues.
-
-This approach made Rspack not entirely framework-agnostic. If you were using other frameworks like Vue, you had to manually disable React Fast Refresh functionality using [builtins.react.refresh](/config/builtins#builtinsreact) to avoid injecting React Fast Refresh-related code into some Vue modules.
-
-Recognizing this issue, we aim to gradually transition users to a more correct approach through [experiments.rspackFuture.disableTransformByDefault](/config/experiments#disabletransformbydefault) and [@rspack/plugin-react-refresh](/guide/tech/react#rspackplugin-react-refresh), which represents the second method mentioned.
-
-### @rspack/plugin-react-refresh
-
 <ApiMeta addedVersion={'0.3.5'} />
 
-:::warning
-`@rspack/plugin-react-refresh` depends on [experiments.rspackFuture.disableTransformByDefault](/config/experiments#disabletransformbydefault)
-:::
-
-First you need to install the dependencies:
+First you need to install [@rspack/plugin-react-refresh](https://www.npmjs.com/package/@rspack/plugin-react-refresh) to support React Fast Refresh.
 
 <PackageManagerTabs command="add @rspack/plugin-react-refresh react-refresh -D" />
 
@@ -133,6 +117,25 @@ Compared to the previous approach, this method decouples the React Fast Refresh
 - For usage with `builtin:swc-loader`, you can refer to the example at [examples/react-refresh](https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/react-refresh/rspack.config.js), When using with `swc-loader`, simply replace `builtin:swc-loader` with `swc-loader`.
 - For usage with `babel-loader`, you can refer to the example at [examples/react-refresh-babel-loader](https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/react-refresh-babel-loader/rspack.config.js)
 
+<details>
+<summary>
+  <h2 style={{ fontWeight: "bold" }} >builtins.react.refresh (deprecated)</h2>
+</summary>
+
+<ApiMeta
+  deprecatedVersion="0.3.10"
+  removedVersion="0.5.0"
+  stability={Stability.Removed}
+/>
+
+In the early stage of Rspack, React Fast Refresh functionality was built into @rspack/dev-server and @rspack/core to provide an out-of-the-box experience for some projects. This means that if you are using @rspack/cli or @rspack/dev-server, React Fast Refresh is automatically enabled in development mode, ready for you to use directly in your projects. This enhanced the usability of Rspack for React projects but also led to various issues.
+
+This approach made Rspack not entirely framework-agnostic. If you were using other frameworks like Vue, you had to manually disable React Fast Refresh functionality using [builtins.react.refresh](/config/builtins#builtinsreact) to avoid injecting React Fast Refresh-related code into some Vue modules.
+
+Recognizing this issue, we aim to gradually transition users to a more correct approach through [experiments.rspackFuture.disableTransformByDefault](/config/experiments#disabletransformbydefault) and [@rspack/plugin-react-refresh](/guide/tech/react#rspackplugin-react-refresh), which represents the second method mentioned.
+
+</details>
+
 ## React Compiler
 
 React Compiler is an experimental compiler introduced in React 19 that can automatically optimize your React code.
@@ -234,4 +237,4 @@ module.exports = {
 };
 ```
 
-For detailed usage of SVGR, please refer to [SVGR Documentation - Webpack](https://react-svgr.com/docs/webpack/).
+For detailed usage of SVGR, please refer to [SVGR Documentation - webpack](https://react-svgr.com/docs/webpack/).

website/docs/en/guide/tech/solid.mdx

@@ -1,15 +1,15 @@
-# SolidJS
+# Solid
 
 ## How to Use
 
 Rspack provides two solutions to support Solid:
 
-- **Use Rsbuild**: Rsbuild provides out-of-the-box support for Solid, allowing you to quickly create a Solid project. See ["Rsbuild - Solid"](https://rsbuild.dev/guide/framework/solid) for details.
-- **Manual configuration**: You can refer to the current document to manually add configurations for Solid.
+- **Use Rsbuild**: Rsbuild provides out-of-the-box support for Solid, allowing you to quickly create a Solid project. See [Rsbuild - Solid](https://rsbuild.dev/guide/framework/solid) for details.
+- **Manually configure Rspack**: You can refer to the current document to manually add configurations for Solid.
 
 ## Configure Solid
 
-Thanks to the good compatibility of Rspack with the babel-loader, it is very easy to use SolidJS in rspack. All you need is babel-loader and solidjs babel preset. Rspack provides SolidJS [example](https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/solid) for reference.
+Thanks to the good compatibility of Rspack with the babel-loader, it is very easy to use Solid in Rspack. All you need is babel-loader and Solid babel preset. Rspack provides Solid [example](https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/solid) for reference.
 
 ```js title="rspack.config.js"
 /** @type {import('@rspack/cli').Configuration} */
@@ -26,7 +26,7 @@ const config = {
           {
             loader: 'babel-loader',
             options: {
-              presets: [['solid']],
+              presets: ['solid'],
               plugins: ['solid-refresh/babel'],
             },
           },

website/docs/en/guide/tech/svelte.mdx

@@ -5,7 +5,7 @@
 Rspack provides two solutions to support Svelte:
 
 - **Use Rsbuild**: Rsbuild provides out-of-the-box support for Svelte, allowing you to quickly create a Svelte project. See ["Rsbuild - Svelte"](https://rsbuild.dev/guide/framework/svelte) for details.
-- **Manual configuration**: You can refer to the current document to manually add configurations for Svelte.
+- **Manually configure Rspack**: You can refer to the current document to manually add configurations for Svelte.
 
 ## Configure svelte-loader