Skip to content

Commit 5871389

Browse files
fi3eworkfi3ework
authored
docs: add plugins / output / tools (#450)
1 parent 1106890 commit 5871389

File tree

4 files changed

+232
-2
lines changed

4 files changed

+232
-2
lines changed

‎website/docs/en/config/rsbuild/_meta.json

+10-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1-
["plugins", "source", "output", "tools"]
1+
[
2+
"source",
3+
"output",
4+
"tools",
5+
{
6+
"type": "file",
7+
"name": "plugins",
8+
"label": "plugins"
9+
}
10+
]

‎website/docs/en/config/rsbuild/output.mdx

+102
Original file line numberDiff line numberDiff line change
@@ -1 +1,103 @@
1+
import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
2+
13
# output
4+
5+
Configure the build outputs.
6+
7+
{/* ## output.assetPrefix <RsbuildDocBadge path="/config/output/asset-prefix" text="output.assetPrefix" /> */}
8+
9+
{/* 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. */}
10+
11+
## output.charset <RsbuildDocBadge path="/config/output/charset" text="output.charset" />
12+
13+
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.
14+
15+
## output.cleanDistPath <RsbuildDocBadge path="/config/output/clean-dist-path" text="output.cleanDistPath" />
16+
17+
Whether to clean up all files under the output directory before the build starts (the output directory defaults to `dist`).
18+
19+
## output.copy <RsbuildDocBadge path="/config/output/copy" text="output.copy" />
20+
21+
Copies the specified file or directory to the dist directory, implemented based on [rspack.CopyRspackPlugin](https://rspack.dev/plugins/rspack/copy-rspack-plugin).
22+
23+
## output.cssModules <RsbuildDocBadge path="/config/output/css-modules" text="output.cssModules" />
24+
25+
For custom CSS Modules configuration.
26+
27+
## output.dataUriLimit <RsbuildDocBadge path="/config/output/data-uri-limit" text="output.dataUriLimit" />
28+
29+
Set the size threshold to inline static assets such as images and fonts.
30+
31+
## output.distPath <RsbuildDocBadge path="/config/output/dist-path" text="output.distPath" />
32+
33+
Set the directory of the dist files. Rsbuild will output files to the corresponding subdirectory according to the file type.
34+
35+
{/* ## output.emitAssets <RsbuildDocBadge path="/config/output/emit-assets" text="output.emitAssets" /> */}
36+
37+
{/* Control whether to emit static assets such as images, fonts, audio, video, etc. */}
38+
39+
## output.emitCss <RsbuildDocBadge path="/config/output/emit-css" text="output.emitCss" />
40+
41+
Whether to emit CSS to the output bundles.
42+
43+
## output.externals <RsbuildDocBadge path="/config/output/externals" text="output.externals" />
44+
45+
At build time, prevent some `import` dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.
46+
47+
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.
48+
49+
## output.filenameHash <RsbuildDocBadge path="/config/output/filename-hash" text="output.filenameHash" />
50+
51+
Whether to add a hash value to the filename after the production build.
52+
53+
## output.filename <RsbuildDocBadge path="/config/output/filename" text="output.filename" />
54+
55+
Sets the filename of dist files.
56+
57+
{/* ## output.injectStyles <RsbuildDocBadge path="/config/output/inject-styles" text="output.injectStyles" /> */}
58+
59+
{/* Whether to inject styles into DOM. */}
60+
61+
## output.inlineScripts <RsbuildDocBadge path="/config/output/inline-scripts" text="output.inlineScripts" />
62+
63+
Whether to inline output scripts files (.js files) into HTML with `<script>` tags.
64+
65+
## output.inlineStyles <RsbuildDocBadge path="/config/output/inline-styles" text="output.inlineStyles" />
66+
67+
Whether to inline output style files (.css files) into HTML with `<style>` tags.
68+
69+
## output.legalComments <RsbuildDocBadge path="/config/output/legal-comments" text="output.legalComments" />
70+
71+
Configure how to handle the legal comment.
72+
73+
## output.manifest <RsbuildDocBadge path="/config/output/manifest" text="output.manifest" />
74+
75+
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.
76+
77+
## output.minify <RsbuildDocBadge path="/config/output/minify" text="output.minify" />
78+
79+
Configure whether to enable code minification in production mode, or to configure minimizer options.
80+
81+
## output.overrideBrowserslist <RsbuildDocBadge path="/config/output/override-browserslist" text="output.overrideBrowserslist" />
82+
83+
Specifies the range of target browsers that the project is compatible with.
84+
85+
## output.polyfill <RsbuildDocBadge path="/config/output/polyfill" text="output.polyfill" />
86+
87+
Through the `output.polyfill` option, you can control the injection mode of the polyfills.
88+
89+
:::warning
90+
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).
91+
:::
92+
93+
## output.sourceMap <RsbuildDocBadge path="/config/output/source-map" text="output.sourceMap" />
94+
95+
Used to set whether to generate source map files, and which format of source map to generate.
96+
97+
## output.target <RsbuildDocBadge path="/config/output/target" text="output.target" />
98+
99+
Setting the build target of Rsbuild.
100+
101+
:::info
102+
Check out the [Solution](/guide/solution) to learn more about the build target.
103+
:::

‎website/docs/en/config/rsbuild/plugins.mdx

+80-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,80 @@
1-
# plugins
1+
import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
2+
3+
# plugins <RsbuildDocBadge path="/config/plugins" text="plugins" />
4+
5+
Used to register Rsbuild plugins.
6+
7+
## Official Plugins
8+
9+
The following are official plugins that can be used in Rsbuild, and applicable to Rslib.
10+
11+
### For React
12+
13+
Plugins available for the React framework:
14+
15+
- [React Plugin](https://rsbuild.dev/plugins/list/plugin-react): Provides support for React.
16+
- [SVGR Plugin](https://rsbuild.dev/plugins/list/plugin-svgr): Support convert SVG to React components.
17+
- [Styled Components Plugin](https://github.com/rsbuild-contrib/rsbuild-plugin-styled-components): Provide compile-time support for styled-components.
18+
19+
{/* ### For Vue */}
20+
21+
{/* Plugins available for the Vue framework: */}
22+
23+
{/* - [Vue Plugin](https://rsbuild.dev/plugins/list/plugin-vue): Provides support for Vue 3 SFC (Single File Components). */}
24+
{/* - [Vue JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx): Provides support for Vue 3 JSX / TSX syntax. */}
25+
{/* - [Vue2 Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2): Provides support for Vue 2 SFC (Single File Components). */}
26+
{/* - [Vue2 JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx): Provides support for Vue 2 JSX / TSX syntax. */}
27+
28+
### For Preact
29+
30+
Plugins available for the Preact framework:
31+
32+
- [Preact Plugin](https://rsbuild.dev/plugins/list/plugin-preact): Provides support for Preact.
33+
34+
{/* ### For Svelte */}
35+
36+
{/* Plugins available for the Svelte framework: */}
37+
38+
{/* - [Svelte Plugin](https://rsbuild.dev/plugins/list/plugin-svelte): Provides support for Svelte components (`.svelte` files). */}
39+
40+
{/* ### For Solid */}
41+
42+
{/* Plugins available for the Solid framework: */}
43+
44+
{/* - [Solid Plugin](https://rsbuild.dev/plugins/list/plugin-solid): Provides support for Solid. */}
45+
46+
### Common
47+
48+
The following are common framework-agnostic plugins:
49+
50+
{/* - [Assets Retry Plugin](https://rsbuild.dev/plugins/list/plugin-assets-retry): Used to automatically resend requests when static assets fail to load. */}
51+
52+
- [Babel Plugin](https://rsbuild.dev/plugins/list/plugin-babel): Provides support for Babel transpilation capabilities.
53+
- [Sass Plugin](https://rsbuild.dev/plugins/list/plugin-sass): Use Sass as the CSS preprocessor.
54+
- [Less Plugin](https://rsbuild.dev/plugins/list/plugin-less): Use Less as the CSS preprocessor.
55+
- [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus): Use Stylus as the CSS preprocessor.
56+
{/* - [Basic SSL Plugin](https://github.com/rspack-contrib/rsbuild-plugin-basic-ssl): Generate an untrusted, self-signed certificate for the HTTPS server. */}
57+
- [ESLint Plugin](https://github.com/rspack-contrib/rsbuild-plugin-eslint): Run ESLint checks during the compilation.
58+
- [Type Check Plugin](https://github.com/rspack-contrib/rsbuild-plugin-type-check): Run TypeScript type checker on a separate process.
59+
- [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compress the image assets.
60+
- [MDX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-mdx): Provide support for MDX.
61+
- [Node Polyfill Plugin](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill): Used to inject polyfills of Node core modules in the browser side.
62+
- [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.
63+
- [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.
64+
- [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.
65+
- [Typed CSS Modules Plugin](https://github.com/rspack-contrib/rsbuild-plugin-typed-css-modules): Generate TypeScript declaration file for CSS Modules.
66+
- [Pug Plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug): Provides support for the Pug template engine.
67+
- [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem): Implements the rem adaptive layout for mobile pages.
68+
- [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd): Generate outputs in UMD format.
69+
- [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml): Import YAML files and convert them into JavaScript objects.
70+
- [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml): Import TOML files and convert them into JavaScript objects.
71+
72+
:::tip
73+
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).
74+
:::
75+
76+
## Community Plugins
77+
78+
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).
79+
80+
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).

‎website/docs/en/config/rsbuild/tools.mdx

+40
Original file line numberDiff line numberDiff line change
@@ -1 +1,41 @@
1+
import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
2+
13
# tools
4+
5+
Configure the low-level tools.
6+
7+
## tools.bundlerChain <RsbuildDocBadge path="/config/tools/bundler-chain" text="tools.bundlerChain" />
8+
9+
[rspack-chain](https://github.com/rspack-contrib/rspack-chain) is a utility library for configuring Rspack.
10+
11+
{/* ## tools.cssExtract <RsbuildDocBadge path="/config/tools/css-extract" text="tools.cssExtract" /> */}
12+
13+
{/* Rsbuild uses the CssExtractRspackPlugin plugin by default to extract CSS into separate files. */}
14+
15+
## tools.cssLoader <RsbuildDocBadge path="/config/tools/css-loader" text="tools.cssLoader" />
16+
17+
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`.
18+
19+
{/* ## tools.htmlPlugin <RsbuildDocBadge path="/config/tools/html-plugin" text="tools.htmlPlugin" /> */}
20+
21+
{/* The configs of [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) can be modified through `tools.htmlPlugin`. */}
22+
23+
## tools.lightningcssLoader <RsbuildDocBadge path="/config/tools/lightningcss-loader" text="tools.lightningcssLoader" />
24+
25+
You can set the options for [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) through `tools.lightningcssLoader`.
26+
27+
## tools.postcss <RsbuildDocBadge path="/config/tools/postcss" text="tools.postcss" />
28+
29+
Rsbuild integrates PostCSS by default, you can configure [postcss-loader](https://github.com/webpack-contrib/postcss-loader) through `tools.postcss`.
30+
31+
## tools.rspack <RsbuildDocBadge path="/config/tools/rspack" text="tools.rspack" />
32+
33+
`tools.rspack` is used to configure [Rspack](https://rspack.dev/).
34+
35+
## tools.styleLoader <RsbuildDocBadge path="/config/tools/style-loader" text="tools.styleLoader" />
36+
37+
The config of [style-loader](https://github.com/webpack-contrib/style-loader) can be set through `tools.styleLoader`.
38+
39+
## tools.swc <RsbuildDocBadge path="/config/tools/swc" text="tools.swc" />
40+
41+
You can set the options of [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) through `tools.swc`.

0 commit comments

Comments
 (0)