From 3126737e6e0fdce8f58149f76ca26dd8e7d2dfbd Mon Sep 17 00:00:00 2001
From: fi3ework <fi3ework@gmail.com>
Date: Mon, 18 Nov 2024 20:58:30 +0800
Subject: [PATCH] docs: add plugins / output / tools

---
 website/docs/en/config/rsbuild/_meta.json  |  11 ++-
 website/docs/en/config/rsbuild/output.mdx  | 102 +++++++++++++++++++++
 website/docs/en/config/rsbuild/plugins.mdx |  81 +++++++++++++++-
 website/docs/en/config/rsbuild/tools.mdx   |  40 ++++++++
 4 files changed, 232 insertions(+), 2 deletions(-)

diff --git a/website/docs/en/config/rsbuild/_meta.json b/website/docs/en/config/rsbuild/_meta.json
index 258e26896..03c9920bb 100644
--- a/website/docs/en/config/rsbuild/_meta.json
+++ b/website/docs/en/config/rsbuild/_meta.json
@@ -1 +1,10 @@
-["plugins", "source", "output", "tools"]
+[
+  "source",
+  "output",
+  "tools",
+  {
+    "type": "file",
+    "name": "plugins",
+    "label": "plugins"
+  }
+]
diff --git a/website/docs/en/config/rsbuild/output.mdx b/website/docs/en/config/rsbuild/output.mdx
index 2580f6310..b4ce5fa16 100644
--- a/website/docs/en/config/rsbuild/output.mdx
+++ b/website/docs/en/config/rsbuild/output.mdx
@@ -1 +1,103 @@
+import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
+
 # output
+
+Configure the build outputs.
+
+{/* ## output.assetPrefix <RsbuildDocBadge path="/config/output/asset-prefix" text="output.assetPrefix" /> */}
+
+{/* In [production mode](https://rsbuild.dev/config/mode), use this option to set the URL prefix for static assets, such as setting it to a CDN URL. */}
+
+## output.charset <RsbuildDocBadge path="/config/output/charset" text="output.charset" />
+
+The `charset` config allows you to specify the [character encoding](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding) for output files to ensure they are displayed correctly in different environments.
+
+## output.cleanDistPath <RsbuildDocBadge path="/config/output/clean-dist-path" text="output.cleanDistPath" />
+
+Whether to clean up all files under the output directory before the build starts (the output directory defaults to `dist`).
+
+## output.copy <RsbuildDocBadge path="/config/output/copy" text="output.copy" />
+
+Copies the specified file or directory to the dist directory, implemented based on [rspack.CopyRspackPlugin](https://rspack.dev/plugins/rspack/copy-rspack-plugin).
+
+## output.cssModules <RsbuildDocBadge path="/config/output/css-modules" text="output.cssModules" />
+
+For custom CSS Modules configuration.
+
+## output.dataUriLimit <RsbuildDocBadge path="/config/output/data-uri-limit" text="output.dataUriLimit" />
+
+Set the size threshold to inline static assets such as images and fonts.
+
+## output.distPath <RsbuildDocBadge path="/config/output/dist-path" text="output.distPath" />
+
+Set the directory of the dist files. Rsbuild will output files to the corresponding subdirectory according to the file type.
+
+{/* ## output.emitAssets <RsbuildDocBadge path="/config/output/emit-assets" text="output.emitAssets" /> */}
+
+{/* Control whether to emit static assets such as images, fonts, audio, video, etc. */}
+
+## output.emitCss <RsbuildDocBadge path="/config/output/emit-css" text="output.emitCss" />
+
+Whether to emit CSS to the output bundles.
+
+## output.externals <RsbuildDocBadge path="/config/output/externals" text="output.externals" />
+
+At build time, prevent some `import` dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.
+
+It is important to note that `output.externals` differs from [source.alias](/config/rsbuild/source#sourcealias). Check out [source.alias](/config/rsbuild/source#sourcealias) documentation for more information.
+
+## output.filenameHash <RsbuildDocBadge path="/config/output/filename-hash" text="output.filenameHash" />
+
+Whether to add a hash value to the filename after the production build.
+
+## output.filename <RsbuildDocBadge path="/config/output/filename" text="output.filename" />
+
+Sets the filename of dist files.
+
+{/* ## output.injectStyles <RsbuildDocBadge path="/config/output/inject-styles" text="output.injectStyles" /> */}
+
+{/* Whether to inject styles into DOM. */}
+
+## output.inlineScripts <RsbuildDocBadge path="/config/output/inline-scripts" text="output.inlineScripts" />
+
+Whether to inline output scripts files (.js files) into HTML with `<script>` tags.
+
+## output.inlineStyles <RsbuildDocBadge path="/config/output/inline-styles" text="output.inlineStyles" />
+
+Whether to inline output style files (.css files) into HTML with `<style>` tags.
+
+## output.legalComments <RsbuildDocBadge path="/config/output/legal-comments" text="output.legalComments" />
+
+Configure how to handle the legal comment.
+
+## output.manifest <RsbuildDocBadge path="/config/output/manifest" text="output.manifest" />
+
+Whether to generate a manifest file that contains information of all assets, and the mapping relationship between [entry module](https://rsbuild.dev/config/source/entry) and assets.
+
+## output.minify <RsbuildDocBadge path="/config/output/minify" text="output.minify" />
+
+Configure whether to enable code minification in production mode, or to configure minimizer options.
+
+## output.overrideBrowserslist <RsbuildDocBadge path="/config/output/override-browserslist" text="output.overrideBrowserslist" />
+
+Specifies the range of target browsers that the project is compatible with.
+
+## output.polyfill <RsbuildDocBadge path="/config/output/polyfill" text="output.polyfill" />
+
+Through the `output.polyfill` option, you can control the injection mode of the polyfills.
+
+:::warning
+Rsbuild's `output.polyfill` injects polyfills into the global scope, which can unexpectedly modify global variables for library consumers. For a non-global polyfill solution for browsers, please refer to [Polyfill - Browser](/guide/advanced/output-compatibility#browser).
+:::
+
+## output.sourceMap <RsbuildDocBadge path="/config/output/source-map" text="output.sourceMap" />
+
+Used to set whether to generate source map files, and which format of source map to generate.
+
+## output.target <RsbuildDocBadge path="/config/output/target" text="output.target" />
+
+Setting the build target of Rsbuild.
+
+:::info
+Check out the [Solution](/guide/solution) to learn more about the build target.
+:::
diff --git a/website/docs/en/config/rsbuild/plugins.mdx b/website/docs/en/config/rsbuild/plugins.mdx
index f130fd14e..5bb4aeb54 100644
--- a/website/docs/en/config/rsbuild/plugins.mdx
+++ b/website/docs/en/config/rsbuild/plugins.mdx
@@ -1 +1,80 @@
-# plugins
+import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
+
+# plugins <RsbuildDocBadge path="/config/plugins" text="plugins" />
+
+Used to register Rsbuild plugins.
+
+## Official Plugins
+
+The following are official plugins that can be used in Rsbuild, and applicable to Rslib.
+
+### For React
+
+Plugins available for the React framework:
+
+- [React Plugin](https://rsbuild.dev/plugins/list/plugin-react): Provides support for React.
+- [SVGR Plugin](https://rsbuild.dev/plugins/list/plugin-svgr): Support convert SVG to React components.
+- [Styled Components Plugin](https://github.com/rsbuild-contrib/rsbuild-plugin-styled-components): Provide compile-time support for styled-components.
+
+{/* ### For Vue */}
+
+{/* Plugins available for the Vue framework: */}
+
+{/* - [Vue Plugin](https://rsbuild.dev/plugins/list/plugin-vue): Provides support for Vue 3 SFC (Single File Components). */}
+{/* - [Vue JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx): Provides support for Vue 3 JSX / TSX syntax. */}
+{/* - [Vue2 Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2): Provides support for Vue 2 SFC (Single File Components). */}
+{/* - [Vue2 JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx): Provides support for Vue 2 JSX / TSX syntax. */}
+
+### For Preact
+
+Plugins available for the Preact framework:
+
+- [Preact Plugin](https://rsbuild.dev/plugins/list/plugin-preact): Provides support for Preact.
+
+{/* ### For Svelte */}
+
+{/* Plugins available for the Svelte framework: */}
+
+{/* - [Svelte Plugin](https://rsbuild.dev/plugins/list/plugin-svelte): Provides support for Svelte components (`.svelte` files). */}
+
+{/* ### For Solid */}
+
+{/* Plugins available for the Solid framework: */}
+
+{/* - [Solid Plugin](https://rsbuild.dev/plugins/list/plugin-solid): Provides support for Solid. */}
+
+### Common
+
+The following are common framework-agnostic plugins:
+
+{/* - [Assets Retry Plugin](https://rsbuild.dev/plugins/list/plugin-assets-retry): Used to automatically resend requests when static assets fail to load. */}
+
+- [Babel Plugin](https://rsbuild.dev/plugins/list/plugin-babel): Provides support for Babel transpilation capabilities.
+- [Sass Plugin](https://rsbuild.dev/plugins/list/plugin-sass): Use Sass as the CSS preprocessor.
+- [Less Plugin](https://rsbuild.dev/plugins/list/plugin-less): Use Less as the CSS preprocessor.
+- [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus): Use Stylus as the CSS preprocessor.
+  {/* - [Basic SSL Plugin](https://github.com/rspack-contrib/rsbuild-plugin-basic-ssl): Generate an untrusted, self-signed certificate for the HTTPS server. */}
+- [ESLint Plugin](https://github.com/rspack-contrib/rsbuild-plugin-eslint): Run ESLint checks during the compilation.
+- [Type Check Plugin](https://github.com/rspack-contrib/rsbuild-plugin-type-check): Run TypeScript type checker on a separate process.
+- [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compress the image assets.
+- [MDX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-mdx): Provide support for MDX.
+- [Node Polyfill Plugin](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill): Used to inject polyfills of Node core modules in the browser side.
+- [Source Build Plugin](https://github.com/rspack-contrib/rsbuild-plugin-source-build): This plugin is designed for the monorepo scenario. It supports referencing source code from other subdirectories and performs build and hot update.
+- [Check Syntax Plugin](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax): Check the syntax compatibility of output files and determine if there are any advanced syntaxes that could cause compatibility issues.
+- [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer): Used to customize CSS minimizer, switch to [cssnano](https://github.com/cssnano/cssnano) or other tools for CSS compression.
+- [Typed CSS Modules Plugin](https://github.com/rspack-contrib/rsbuild-plugin-typed-css-modules): Generate TypeScript declaration file for CSS Modules.
+- [Pug Plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug): Provides support for the Pug template engine.
+- [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem): Implements the rem adaptive layout for mobile pages.
+- [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd): Generate outputs in UMD format.
+- [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml): Import YAML files and convert them into JavaScript objects.
+- [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml): Import TOML files and convert them into JavaScript objects.
+
+:::tip
+You can find the source code of all official plugins in [web-infra-dev/rsbuild](https://github.com/web-infra-dev/rsbuild) and [rspack-contrib](https://github.com/rspack-contrib).
+:::
+
+## Community Plugins
+
+You can check out the Rsbuild plugins provided by the community at [awesome-rspack - Rsbuild Plugins](https://github.com/web-infra-dev/awesome-rspack?tab=readme-ov-file#rsbuild-plugins).
+
+You can also discover more Rsbuild plugins on npm by searching for the keyword [rsbuild-plugin](https://www.npmjs.com/search?q=rsbuild-plugin&ranking=popularity).
diff --git a/website/docs/en/config/rsbuild/tools.mdx b/website/docs/en/config/rsbuild/tools.mdx
index 896a03e8d..cae246ad6 100644
--- a/website/docs/en/config/rsbuild/tools.mdx
+++ b/website/docs/en/config/rsbuild/tools.mdx
@@ -1 +1,41 @@
+import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
+ 
 # tools
+
+Configure the low-level tools.
+
+## tools.bundlerChain <RsbuildDocBadge path="/config/tools/bundler-chain" text="tools.bundlerChain" />
+
+[rspack-chain](https://github.com/rspack-contrib/rspack-chain) is a utility library for configuring Rspack.
+
+{/* ## tools.cssExtract <RsbuildDocBadge path="/config/tools/css-extract" text="tools.cssExtract" /> */}
+
+{/* Rsbuild uses the CssExtractRspackPlugin plugin by default to extract CSS into separate files. */}
+
+## tools.cssLoader <RsbuildDocBadge path="/config/tools/css-loader" text="tools.cssLoader" />
+
+Rsbuild uses [css-loader](https://github.com/webpack-contrib/css-loader) by default to handle CSS resources. You can modify the options of css-loader through `tools.cssLoader`.
+
+{/* ## tools.htmlPlugin <RsbuildDocBadge path="/config/tools/html-plugin" text="tools.htmlPlugin" /> */}
+
+{/* The configs of [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) can be modified through `tools.htmlPlugin`. */}
+
+## tools.lightningcssLoader <RsbuildDocBadge path="/config/tools/lightningcss-loader" text="tools.lightningcssLoader" />
+
+You can set the options for [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) through `tools.lightningcssLoader`.
+
+## tools.postcss <RsbuildDocBadge path="/config/tools/postcss" text="tools.postcss" />
+
+Rsbuild integrates PostCSS by default, you can configure [postcss-loader](https://github.com/webpack-contrib/postcss-loader) through `tools.postcss`.
+
+## tools.rspack <RsbuildDocBadge path="/config/tools/rspack" text="tools.rspack" />
+
+`tools.rspack` is used to configure [Rspack](https://rspack.dev/).
+
+## tools.styleLoader <RsbuildDocBadge path="/config/tools/style-loader" text="tools.styleLoader" />
+
+The config of [style-loader](https://github.com/webpack-contrib/style-loader) can be set through `tools.styleLoader`.
+
+## tools.swc <RsbuildDocBadge path="/config/tools/swc" text="tools.swc" />
+
+You can set the options of [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) through `tools.swc`.