Merge branch 'main' into fix-plugin-less-plugins

packages/core/src/types/plugin.ts

@@ -128,10 +128,12 @@ export type PluginManager = {
   addPlugins: (
     plugins: Array<RsbuildPlugin | Falsy>,
     options?: {
+      /**
+       * Insert before the specified plugin.
+       */
       before?: string;
       /**
        * Add a plugin for the specified environment.
-       *
        * If environment is not specified, it will be registered as a global plugin (effective in all environments)
        */
       environment?: string;

website/docs/en/api/javascript-api/instance.mdx

@@ -528,7 +528,7 @@ This method needs to be called before compiling. If it is called after compiling
 - **Type:**
 
 ```ts
-type AddPluginsOptions = { before?: string } | { after?: string };
+type AddPluginsOptions = { before?: string; environment?: string };
 
 function AddPlugins(
   plugins: Array<RsbuildPlugin | Falsy>,
@@ -544,8 +544,8 @@ rsbuild.addPlugins([pluginFoo(), pluginBar()]);
 // Insert before the bar plugin
 rsbuild.addPlugins([pluginFoo()], { before: 'bar' });
 
-// Insert after the bar plugin
-rsbuild.addPlugins([pluginFoo()], { after: 'bar' });
+// Add plugin for node environment
+rsbuild.addPlugins([pluginFoo()], { environment: 'node' });
 ```
 
 ## rsbuild.getPlugins

website/docs/en/guide/basic/static-assets.mdx

@@ -66,6 +66,34 @@ Import with [alias](/guide/advanced/alias) are also supported:
 }
 ```
 
+If you want to reference static assets in absolute paths in CSS files:
+
+```css
+@font-face {
+  font-family: DingTalk;
+  src: url('/image/font/foo.ttf');
+}
+```
+
+By default, the built-in `css-loader` in Rsbuild will resolve absolute paths in `url()` and look for the specified modules. If you want to skip resolving absolute paths, you can configure [`tools.cssLoader`](/config/tools/css-loader#toolscssloader) to filter out the specified paths. The filtered paths are left as they are in the code.
+
+```ts
+export default {
+  tools: {
+    cssLoader: {
+      url: {
+        filter: (url) => {
+          if (/\/image\/font/.test(url)) {
+            return false;
+          }
+          return true;
+        },
+      },
+    },
+  },
+};
+```
+
 ## Import Results
 
 The result of importing static assets depends on the file size:

website/docs/zh/api/javascript-api/instance.mdx

@@ -549,7 +549,7 @@ const compiler = await rsbuild.createCompiler();
 - **类型：**
 
 ```ts
-type AddPluginsOptions = { before?: string } | { after?: string };
+type AddPluginsOptions = { before?: string; environment?: string };
 
 function AddPlugins(
   plugins: Array<RsbuildPlugin | Falsy>,
@@ -565,8 +565,8 @@ rsbuild.addPlugins([pluginFoo(), pluginBar()]);
 // 在 bar 插件之前插入
 rsbuild.addPlugins([pluginFoo()], { before: 'bar' });
 
-// 在 bar 插件之后插入
-rsbuild.addPlugins([pluginFoo()], { after: 'bar' });
+// 为 node 环境添加插件
+rsbuild.addPlugins([pluginFoo()], { environment: 'node' });
 ```
 
 ## rsbuild.getPlugins

website/docs/zh/guide/basic/static-assets.mdx

@@ -66,6 +66,34 @@ export default = () => <img src={logo} />;
 }
 ```
 
+如果需要在 CSS 文件中引用绝对路径下的静态资源：
+
+```css
+@font-face {
+  font-family: DingTalk;
+  src: url('/image/font/foo.ttf');
+}
+```
+
+默认情况下，Rsbuild 内置的 `css-loader` 会解析 `url()` 中的绝对路径并寻找指定的模块。如果你希望跳过绝对路径的解析，可以配置 [`tools.cssLoader`](/config/tools/css-loader#toolscssloader) 来过滤指定的路径，被过滤的路径将被原样保留在代码中。
+
+```ts
+export default {
+  tools: {
+    cssLoader: {
+      url: {
+        filter: (url) => {
+          if (/\/image\/font/.test(url)) {
+            return false;
+          }
+          return true;
+        },
+      },
+    },
+  },
+};
+```
+
 ## 引用结果
 
 引用静态资源的结果取决于文件体积：