diff --git a/website/docs/en/config/dev/watch-files.mdx b/website/docs/en/config/dev/watch-files.mdx index 572cc3ab4b..15bb08904e 100644 --- a/website/docs/en/config/dev/watch-files.mdx +++ b/website/docs/en/config/dev/watch-files.mdx @@ -71,7 +71,7 @@ Specifies whether to trigger a page reload or restart the dev server when a file `reload-page` means that when a file changes, the page in the browser will automatically reload. If the type is not explicitly specified, Rsbuild defaults to the `reload-page` behavior. -This can be used to watch changes to static assets, such as files in the `public` directory. +This can be used to watch changes to static assets, such as files in the [public directory](/config/server/public-dir). ```ts title="rsbuild.config.ts" export default { diff --git a/website/docs/en/config/html/app-icon.mdx b/website/docs/en/config/html/app-icon.mdx index 13bd7aa74c..d2f4adc1cc 100644 --- a/website/docs/en/config/html/app-icon.mdx +++ b/website/docs/en/config/html/app-icon.mdx @@ -22,7 +22,7 @@ type AppIcon = { Set the web application icons to display when added to the home screen of a mobile device: - Generate the web app manifest file and its `icons` field. -- Generate the `apple-touch-icon` and `manifest` tags in the HTML file. +- Generate the [apple-touch-icon](https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/) and `manifest` tags in the HTML file. :::tip diff --git a/website/docs/en/config/html/template-parameters.mdx b/website/docs/en/config/html/template-parameters.mdx index 2a098ad099..4caadc33f2 100644 --- a/website/docs/en/config/html/template-parameters.mdx +++ b/website/docs/en/config/html/template-parameters.mdx @@ -18,8 +18,8 @@ type DefaultParameters = { }; files: { publicPath: string; - js: Array; - css: Array; + js: string[]; + css: string[]; favicon?: string; }; }; diff --git a/website/docs/en/guide/basic/html-template.mdx b/website/docs/en/guide/basic/html-template.mdx index ea1e63dc2a..14d96d4cd6 100644 --- a/website/docs/en/guide/basic/html-template.mdx +++ b/website/docs/en/guide/basic/html-template.mdx @@ -25,7 +25,7 @@ See [source.entry - HTML generation](/config/source/entry#html-generation) for m Use [html.template](/config/html/template) to define the path to a custom HTML template. -```ts +```ts title="rsbuild.config.ts" export default { html: { template: './static/index.html', @@ -53,7 +53,7 @@ You can set the HTML `` tag through the [html.title](/config/html/title) When there is only one page in your project, just use the `html.title` setting directly: -```ts +```ts title="rsbuild.config.ts" export default { html: { title: 'example', @@ -63,7 +63,7 @@ export default { When your project has multiple pages, you can set corresponding titles for different pages based on the entry name. -```ts +```ts title="rsbuild.config.ts" export default { html: { title({ entryName }) { @@ -83,11 +83,11 @@ For single-page applications (SPA), Rsbuild will include an initial title in the ## Set page icon -Rsbuild supports setting [favicon](https://developer.mozilla.org/en-US/docs/Glossary/Favicon) icon and [apple-touch-icon](https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/) icon. +Rsbuild supports setting both the [favicon](https://developer.mozilla.org/en-US/docs/Glossary/Favicon) and the web application icon. -You can set the favicon using the [html.favicon](/config/html/favicon) config. +By default, Rsbuild automatically looks for favicon files in the [public directory](/config/server/public-dir). If you want to customize the favicon, use the [html.favicon](/config/html/favicon) option: -```ts +```ts title="rsbuild.config.ts" export default { html: { favicon: './src/assets/icon.png', @@ -95,9 +95,9 @@ export default { }; ``` -You can also set web application icons to display when added to the home screen of a mobile device using the [html.appIcon](/config/html/app-icon) config. +You can also use the [html.appIcon](/config/html/app-icon) option to define web application icons, which are displayed when users add your site to their mobile device's home screen: -```ts +```ts title="rsbuild.config.ts" export default { html: { appIcon: { @@ -124,7 +124,7 @@ Rsbuild defaults to setting the charset and viewport meta tags: You can also add custom meta tags, like a description: -```ts +```ts title="rsbuild.config.ts" export default { html: { meta: { @@ -173,8 +173,8 @@ type DefaultParameters = { }; files: { publicPath: string; - js: Array<string>; - css: Array<string>; + js: string[]; + css: string[]; favicon?: string; }; }; @@ -388,7 +388,7 @@ In the HTML template, the `htmlPlugin.tags` variable gives you access to all the The purpose of the `html.tags` is to update these tag variables to modify the tags in the HTML. Here is a basic example: -```ts +```ts title="rsbuild.config.ts" export default { html: { tags: [ diff --git a/website/docs/zh/config/dev/lazy-compilation.mdx b/website/docs/zh/config/dev/lazy-compilation.mdx index 924f1caea9..c0230ab44f 100644 --- a/website/docs/zh/config/dev/lazy-compilation.mdx +++ b/website/docs/zh/config/dev/lazy-compilation.mdx @@ -90,7 +90,7 @@ export default { }; ``` -在启用 `entries` 选项后,当你启动 dev server 时, Rsbuild 不会编译所有的页面,而是仅在访问特定的页面时,才对该页面进行编译。 +在启用 `entries` 选项后,当你启动 dev server 时,Rsbuild 不会编译所有的页面,而是仅在访问特定的页面时,才对该页面进行编译。 lazy 编译入口模块时,有以下注意事项: diff --git a/website/docs/zh/config/dev/watch-files.mdx b/website/docs/zh/config/dev/watch-files.mdx index 4e53e4a673..704e46dc02 100644 --- a/website/docs/zh/config/dev/watch-files.mdx +++ b/website/docs/zh/config/dev/watch-files.mdx @@ -71,7 +71,7 @@ export default { reload-page 表示当文件发生变化时,浏览器打开的页面会自动重新加载。如果未明确指定 type,Rsbuild 会默认采用 reload-page 行为。 -这可以用于监听一些静态资源文件的变化,例如 `public` 目录下的文件。 +这可以用于监听一些静态资源文件的变化,例如 [public 目录](/config/server/public-dir) 下的文件。 ```ts title="rsbuild.config.ts" export default { diff --git a/website/docs/zh/config/html/app-icon.mdx b/website/docs/zh/config/html/app-icon.mdx index 8c0537ca88..28cbc9209b 100644 --- a/website/docs/zh/config/html/app-icon.mdx +++ b/website/docs/zh/config/html/app-icon.mdx @@ -22,7 +22,7 @@ type AppIcon = { 设置 Web 应用的图标,用于在添加到移动设备的主屏幕时显示: - 生成 web app manifest 文件和其中的 `icons` 字段。 -- 生成 HTML 文件中的 `apple-touch-icon` 标签和 `manifest` 标签。 +- 生成 HTML 文件中的 [apple-touch-icon](https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/) 标签和 `manifest` 标签。 :::tip diff --git a/website/docs/zh/config/html/favicon.mdx b/website/docs/zh/config/html/favicon.mdx index 43dcae1007..a0d50d6615 100644 --- a/website/docs/zh/config/html/favicon.mdx +++ b/website/docs/zh/config/html/favicon.mdx @@ -17,7 +17,7 @@ Rsbuild 还提供了 [html.appIcon](/config/html/app-icon) 来设置 Web 应用 ## 默认值 -在未显式配置 `html.favicon` 时, Rsbuild 会自动从 [public 目录](/config/server/public-dir) 中查找 favicon 文件。 +在未显式配置 `html.favicon` 时,Rsbuild 会自动从 [public 目录](/config/server/public-dir) 中查找 favicon 文件。 Rsbuild 会按以下优先级依次搜索文件,并在找到第一个匹配项后将其作为默认 favicon: diff --git a/website/docs/zh/config/html/template-parameters.mdx b/website/docs/zh/config/html/template-parameters.mdx index 4294429514..37a8fd69c9 100644 --- a/website/docs/zh/config/html/template-parameters.mdx +++ b/website/docs/zh/config/html/template-parameters.mdx @@ -18,8 +18,8 @@ type DefaultParameters = { }; files: { publicPath: string; - js: Array<string>; - css: Array<string>; + js: string[]; + css: string[]; favicon?: string; }; }; diff --git a/website/docs/zh/config/mode.mdx b/website/docs/zh/config/mode.mdx index 344a5e4c5e..546d49d545 100644 --- a/website/docs/zh/config/mode.mdx +++ b/website/docs/zh/config/mode.mdx @@ -8,7 +8,7 @@ Rsbuild `mode` 的值也会传递给 Rspack 的 [mode](https://rspack.rs/zh/config/mode) 配置。 :::tip -`mode` 的值不会影响 `.env` 文件的加载结果, 因为 `.env` 文件早于 Rsbuild 的配置文件被解析。 +`mode` 的值不会影响 `.env` 文件的加载结果,因为 `.env` 文件早于 Rsbuild 的配置文件被解析。 Rsbuild CLI 支持使用 `--env-mode` 选项来指定 env 模式,详见 ["Env 模式"](/guide/advanced/env-vars#env-模式)。 ::: diff --git a/website/docs/zh/guide/advanced/environments.mdx b/website/docs/zh/guide/advanced/environments.mdx index 27da277ab4..ad7197ac1f 100644 --- a/website/docs/zh/guide/advanced/environments.mdx +++ b/website/docs/zh/guide/advanced/environments.mdx @@ -261,7 +261,7 @@ const myPlugin = () => ({ }); ``` -对于一些全局的 plugin hooks(如 [onAfterDevCompile](/plugins/dev/hooks#onafterdevcompile)、[onBeforeStartDevServer](/plugins/dev/hooks#onbeforestartdevserver) 等), Rsbuild 支持通过 `environments` 参数获取所有环境的上下文。 +对于一些全局的 plugin hooks(如 [onAfterDevCompile](/plugins/dev/hooks#onafterdevcompile)、[onBeforeStartDevServer](/plugins/dev/hooks#onbeforestartdevserver) 等),Rsbuild 支持通过 `environments` 参数获取所有环境的上下文。 ```ts const myPlugin = () => ({ diff --git a/website/docs/zh/guide/basic/html-template.mdx b/website/docs/zh/guide/basic/html-template.mdx index c120ad7393..eafaf4082c 100644 --- a/website/docs/zh/guide/basic/html-template.mdx +++ b/website/docs/zh/guide/basic/html-template.mdx @@ -25,7 +25,7 @@ export default { 在 Rsbuild 中,你可以使用 [html.template](/config/html/template) 配置项来设置自定义的 HTML 模板文件。 -```ts +```ts title="rsbuild.config.ts" export default { html: { template: './static/index.html', @@ -53,7 +53,7 @@ export default { 当你的项目中只有一个页面时,直接使用 `html.title` 设置即可: -```ts +```ts title="rsbuild.config.ts" export default { html: { title: 'example', @@ -63,7 +63,7 @@ export default { 当你的项目中有多个页面时,可以基于入口名称,来为不同的页面设置对应的标题。 -```ts +```ts title="rsbuild.config.ts" export default { html: { title({ entryName }) { @@ -83,11 +83,11 @@ export default { ## 设置页面图标 -Rsbuild 支持设置 [favicon](https://developer.mozilla.org/en-US/docs/Glossary/Favicon) 图标 和 iOS 系统下的 [apple-touch-icon](https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/) 图标。 +Rsbuild 支持设置 [favicon](https://developer.mozilla.org/en-US/docs/Glossary/Favicon) 和 Web 应用图标。 -你可以通过 [html.favicon](/config/html/favicon) 配置项来设置 favicon 图标。 +默认情况下,Rsbuild 会自动从 [public 目录](/config/server/public-dir) 中查找 favicon 文件。如果你想自定义 favicon,可以通过 [html.favicon](/config/html/favicon) 配置项进行设置: -```ts +```ts title="rsbuild.config.ts" export default { html: { favicon: './src/assets/icon.png', @@ -95,9 +95,9 @@ export default { }; ``` -你也可以通过 [html.appIcon](/config/html/app-icon) 配置项来设置 Web 应用的图标,用于在添加到移动设备的主屏幕时显示。 +此外,还可以使用 [html.appIcon](/config/html/app-icon) 配置项来设置 Web 应用图标,用于在将网站添加到移动设备主屏幕时显示。 -```ts +```ts title="rsbuild.config.ts" export default { html: { appIcon: { @@ -124,7 +124,7 @@ Rsbuild 默认设置了 charset 和 viewport meta 标签: 你也可以添加自定义的 meta 标签,比如设置 description: -```ts +```ts title="rsbuild.config.ts" export default { html: { meta: { @@ -173,8 +173,8 @@ type DefaultParameters = { }; files: { publicPath: string; - js: Array<string>; - css: Array<string>; + js: string[]; + css: string[]; favicon?: string; }; }; @@ -388,7 +388,7 @@ Rsbuild 通过插件来支持 [Pug](https://pugjs.org/) 模板引擎,详见 [@ `html.tags` 的作用就是调整这些 tags 变量,从而修改 HTML 里的标签,下面是一个基本的例子: -```ts +```ts title="rsbuild.config.ts" export default { html: { tags: [ diff --git a/website/docs/zh/guide/basic/server.mdx b/website/docs/zh/guide/basic/server.mdx index 2d494ca622..1f8da60271 100644 --- a/website/docs/zh/guide/basic/server.mdx +++ b/website/docs/zh/guide/basic/server.mdx @@ -88,7 +88,7 @@ export default { ### HTML 输出路径 -通常情况下,`/` 指向 dist 产物根目录, 而 HTML 文件输出到 dist 根目录下,此时可通过 `/some-path` 访问对应的 HTML 页面。 +通常情况下,`/` 指向 dist 产物根目录,而 HTML 文件输出到 dist 根目录下,此时可通过 `/some-path` 访问对应的 HTML 页面。 若通过修改 [output.distPath.html](/config/output/dist-path) 将 HTML 文件输出到其他子目录下,此时需通过 `/[htmlPath]/some-path` 访问对应的 HTML 页面。 diff --git a/website/docs/zh/guide/basic/web-workers.mdx b/website/docs/zh/guide/basic/web-workers.mdx index 4c45a9cc17..79d4425a68 100644 --- a/website/docs/zh/guide/basic/web-workers.mdx +++ b/website/docs/zh/guide/basic/web-workers.mdx @@ -33,7 +33,7 @@ worker.onmessage = (event) => { worker.postMessage(10); ``` -Rspack 默认支持多种 Worker 语法, 查看 [Rspack - Web Workers](https://rspack.rs/zh/guide/features/web-workers) 了解更多。 +Rspack 默认支持多种 Worker 语法,查看 [Rspack - Web Workers](https://rspack.rs/zh/guide/features/web-workers) 了解更多。 ### 使用 worker-loader diff --git a/website/docs/zh/guide/faq/exceptions.mdx b/website/docs/zh/guide/faq/exceptions.mdx index a3433b8930..181cf48268 100644 --- a/website/docs/zh/guide/faq/exceptions.mdx +++ b/website/docs/zh/guide/faq/exceptions.mdx @@ -45,7 +45,7 @@ npm ls postcss 如果编译的过程中出现此报错,说明代码中引用了一个不存在的导出。 -比如以下例子,`index.ts` 中引用了 `utils.ts` 中的 `foo` 变量, 但 `utils.ts` 实际上只导出了 `bar` 变量。 +比如以下例子,`index.ts` 中引用了 `utils.ts` 中的 `foo` 变量,但 `utils.ts` 实际上只导出了 `bar` 变量。 ```ts // utils.ts diff --git a/website/docs/zh/guide/start/glossary.mdx b/website/docs/zh/guide/start/glossary.mdx index 843914845a..6434c4d799 100644 --- a/website/docs/zh/guide/start/glossary.mdx +++ b/website/docs/zh/guide/start/glossary.mdx @@ -37,7 +37,7 @@ Module Federation 是一种 JavaScript 应用分治的架构模式(类似于 ## Rspack -[Rspack](https://rspack.rs/zh/) 是一个基于 Rust 编写的高性能 JavaScript 打包工具, 它提供对 webpack 生态良好的兼容性,能够无缝替换 webpack, 并提供闪电般的构建速度。 +[Rspack](https://rspack.rs/zh/) 是一个基于 Rust 编写的高性能 JavaScript 打包工具,它提供对 webpack 生态良好的兼容性,能够无缝替换 webpack,并提供闪电般的构建速度。 ## Rspress diff --git a/website/docs/zh/guide/styling/css-usage.mdx b/website/docs/zh/guide/styling/css-usage.mdx index 5556530dc9..86e4993e84 100644 --- a/website/docs/zh/guide/styling/css-usage.mdx +++ b/website/docs/zh/guide/styling/css-usage.mdx @@ -46,7 +46,7 @@ export default { ## CSS 压缩 -在生产模式构建时, Rsbuild 会开启 Rspack 内置的 [LightningCssMinimizerRspackPlugin](https://rspack.rs/zh/plugins/rspack/lightning-css-minimizer-rspack-plugin) 插件,将 CSS 资源压缩,以达到更好的传输效率。 +在生产模式构建时,Rsbuild 会开启 Rspack 内置的 [LightningCssMinimizerRspackPlugin](https://rspack.rs/zh/plugins/rspack/lightning-css-minimizer-rspack-plugin) 插件,将 CSS 资源压缩,以达到更好的传输效率。 - 你可以通过 [output.minify](/config/output/minify) 选项来禁用 CSS 压缩,或是自定义 `LightningCssMinimizerRspackPlugin` 的选项。 - 你可以通过 [@rsbuild/plugin-css-minimizer](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer) 来自定义 CSS 压缩工具,切换到 [cssnano](https://github.com/cssnano/cssnano) 或是其他 CSS 压缩器。