feat!: replace output.targets with output.target

e2e/cases/babel/preset-node/rsbuild.config.ts

@@ -2,7 +2,7 @@ import { pluginBabel } from '@rsbuild/plugin-babel';
 
 export default {
   output: {
-    targets: ['node'],
+    target: 'node',
   },
   plugins: [
     pluginBabel({

e2e/cases/emit-assets/rsbuild.config.ts

@@ -3,7 +3,18 @@ import { defineConfig } from '@rsbuild/core';
 export default defineConfig({
   output: {
     filenameHash: false,
-    targets: ['web', 'node'],
     emitAssets: ({ target }) => target !== 'node',
   },
+  environments: {
+    web: {
+      output: {
+        target: 'web',
+      },
+    },
+    node: {
+      output: {
+        target: 'node',
+      },
+    },
+  },
 });

e2e/cases/ignore-css/removeCss.test.ts

@@ -6,7 +6,7 @@ test('should ignore css content when build node target', async () => {
     cwd: __dirname,
     rsbuildConfig: {
       output: {
-        targets: ['node'],
+        target: 'node',
       },
     },
   });
@@ -27,7 +27,7 @@ test('should ignore css content when build web-worker target', async () => {
     cwd: __dirname,
     rsbuildConfig: {
       output: {
-        targets: ['web-worker'],
+        target: 'web-worker',
       },
     },
   });

e2e/cases/inspect-config/index.test.ts

@@ -33,8 +33,17 @@ test('should generate bundler config for node when target contains node', async
   const rsbuild = await createRsbuild({
     cwd: __dirname,
     rsbuildConfig: {
-      output: {
-        targets: ['web', 'node'],
+      environments: {
+        web: {
+          output: {
+            target: 'web',
+          },
+        },
+        node: {
+          output: {
+            target: 'node',
+          },
+        },
       },
     },
   });

e2e/cases/multi-compiler/index.test.ts

@@ -6,8 +6,17 @@ test('multi compiler build', async ({ page }) => {
     cwd: __dirname,
     runServer: true,
     rsbuildConfig: {
-      output: {
-        targets: ['web', 'node'],
+      environments: {
+        web: {
+          output: {
+            target: 'web',
+          },
+        },
+        node: {
+          output: {
+            target: 'node',
+          },
+        },
       },
     },
   });
@@ -25,11 +34,22 @@ test('multi compiler dev', async ({ page }) => {
     cwd: __dirname,
     rsbuildConfig: {
       output: {
-        targets: ['web', 'node'],
         distPath: {
           root: 'dist-dev',
         },
       },
+      environments: {
+        web: {
+          output: {
+            target: 'web',
+          },
+        },
+        node: {
+          output: {
+            target: 'node',
+          },
+        },
+      },
     },
   });
 

e2e/cases/node-addons/rsbuild.config.ts

@@ -1,5 +1,5 @@
 export default {
   output: {
-    targets: ['node'],
+    target: 'node',
   },
 };

e2e/cases/output/externals/tests/index.test.ts

@@ -44,7 +44,7 @@ test('should not external dependencies when target is web worker', async () => {
     plugins: [pluginReact()],
     rsbuildConfig: {
       output: {
-        targets: ['web-worker'],
+        target: 'web-worker',
         externals: {
           react: 'MyReact',
         },

e2e/cases/output/manifest/index.test.ts

@@ -77,7 +77,7 @@ test('output.manifest when target is node', async () => {
         distPath: {
           root: 'dist-1',
         },
-        targets: ['node'],
+        target: 'node',
         manifest: true,
         legalComments: 'none',
         filenameHash: false,

e2e/cases/performance/print-file-size/index.test.ts

@@ -39,11 +39,22 @@ test.describe('should print file size correctly', async () => {
       rsbuildConfig: {
         output: {
           filenameHash: false,
-          targets: ['web', 'node'],
         },
         performance: {
           printFileSize: true,
         },
+        environments: {
+          web: {
+            output: {
+              target: 'web',
+            },
+          },
+          node: {
+            output: {
+              target: 'node',
+            },
+          },
+        },
       },
     });
 

e2e/cases/plugin-api/plugin-after-build-hook/index.test.ts

@@ -40,8 +40,17 @@ rspackOnlyTest(
       cwd: __dirname,
       rsbuildConfig: {
         plugins: [plugin],
-        output: {
-          targets: ['web', 'node'],
+        environments: {
+          web: {
+            output: {
+              target: 'web',
+            },
+          },
+          node: {
+            output: {
+              target: 'node',
+            },
+          },
         },
       },
     });

e2e/cases/plugin-api/plugin-transform-by-targets/rsbuild.config.ts

@@ -2,7 +2,16 @@ import { myPlugin } from './myPlugin';
 
 export default {
   plugins: [myPlugin],
-  output: {
-    targets: ['web', 'node'],
+  environments: {
+    web: {
+      output: {
+        target: 'web',
+      },
+    },
+    node: {
+      output: {
+        target: 'node',
+      },
+    },
   },
 };

e2e/cases/source/alias-by-target/rsbuild.config.ts

@@ -11,7 +11,18 @@ export default defineConfig({
     },
   },
   output: {
-    targets: ['web', 'node'],
     filenameHash: false,
   },
+  environments: {
+    web: {
+      output: {
+        target: 'web',
+      },
+    },
+    node: {
+      output: {
+        target: 'node',
+      },
+    },
+  },
 });

e2e/cases/source/multiple-entry/rsbuild.config.ts

@@ -16,7 +16,18 @@ export default defineConfig({
     },
   },
   output: {
-    targets: ['web', 'node'],
     filenameHash: false,
   },
+  environments: {
+    web: {
+      output: {
+        target: 'web',
+      },
+    },
+    node: {
+      output: {
+        target: 'node',
+      },
+    },
+  },
 });

e2e/cases/web-worker/web-worker-target/index.test.ts

@@ -7,7 +7,7 @@ test('should build web-worker target correctly', async () => {
     cwd: __dirname,
     rsbuildConfig: {
       output: {
-        targets: ['web-worker'],
+        target: 'web-worker',
       },
     },
   });
@@ -27,7 +27,7 @@ test('should build web-worker target with dynamicImport correctly', async () =>
         entry: { index: path.resolve(__dirname, './src/index2.js') },
       },
       output: {
-        targets: ['web-worker'],
+        target: 'web-worker',
       },
     },
   });

examples/node/rsbuild.config.ts

@@ -2,6 +2,6 @@ import { defineConfig } from '@rsbuild/core';
 
 export default defineConfig({
   output: {
-    targets: ['node'],
+    target: 'node',
   },
 });

examples/service-worker/rsbuild.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
       root: './dist',
       worker: './',
     },
-    targets: ['service-worker'],
+    target: 'service-worker',
     copy: ['./index.html'],
   },
 });

package.json

@@ -61,11 +61,7 @@
   "pnpm": {
     "overrides": {
       "esbuild": "~0.19.0",
-      "array.prototype.flat": "npm:@nolyfill/array.prototype.flat@1.0.28",
-      "@rsbuild/core": "link:packages/core",
-      "@rsbuild/plugin-less": "link:packages/plugin-less",
-      "@rsbuild/plugin-sass": "link:packages/plugin-sass",
-      "@rsbuild/plugin-react": "link:packages/plugin-react"
+      "array.prototype.flat": "npm:@nolyfill/array.prototype.flat@1.0.28"
     },
     "allowedDeprecatedVersions": {
       "vue": "2.x",

packages/compat/plugin-swc/tests/plugin.test.ts

@@ -228,8 +228,27 @@ describe('plugin-swc', () => {
       plugins: [pluginSwc()],
       rsbuildConfig: {
         provider: webpackProvider,
-        output: {
-          targets: ['node', 'service-worker', 'web', 'web-worker'],
+        environments: {
+          node: {
+            output: {
+              target: 'node',
+            },
+          },
+          'serviceWorker': {
+            output: {
+              target: 'service-worker',
+            },
+          },
+          web: {
+            output: {
+              target: 'web',
+            },
+          },
+          'webWorker': {
+            output: {
+              target: 'web-worker',
+            },
+          },
         },
       },
     });

packages/compat/webpack/src/initConfigs.ts

@@ -26,10 +26,15 @@ export async function initConfigs({
     context,
     pluginManager,
   });
-  const { targets } = normalizedConfig.output;
 
   const webpackConfigs = await Promise.all(
-    targets.map((target) => generateWebpackConfig({ target, context })),
+    Object.entries(normalizedConfig.environments).map(([environment, config]) =>
+      generateWebpackConfig({
+        target: config.output.target,
+        context,
+        environment,
+      }),
+    ),
   );
 
   // write Rsbuild config and webpack config to disk in debug mode

packages/compat/webpack/src/inspectConfig.ts

@@ -46,9 +46,10 @@ export async function inspectConfig({
     inspectOptions.verbose,
   );
   const rawBundlerConfigs = await Promise.all(
-    webpackConfigs.map((config) =>
-      stringifyConfig(config, inspectOptions.verbose),
-    ),
+    webpackConfigs.map(async (config) => ({
+      name: config.name!,
+      content: await stringifyConfig(config, inspectOptions.verbose),
+    })),
   );
 
   let outputPath = inspectOptions.outputPath || context.distPath;
@@ -71,7 +72,7 @@ export async function inspectConfig({
 
   return {
     rsbuildConfig: rawRsbuildConfig,
-    bundlerConfigs: rawBundlerConfigs,
+    bundlerConfigs: rawBundlerConfigs.map((r) => r.content),
     origin: {
       rsbuildConfig: rsbuildDebugConfig,
       bundlerConfigs: webpackConfigs,

packages/compat/webpack/src/webpackConfig.ts

@@ -68,6 +68,7 @@ async function modifyWebpackConfig(
 
 async function getChainUtils(
   target: RsbuildTarget,
+  environment: string,
 ): Promise<ModifyWebpackChainUtils> {
   const { default: webpack } = await import('webpack');
   const nameMap = {
@@ -78,7 +79,7 @@ async function getChainUtils(
   };
 
   return {
-    ...getBaseChainUtils(target),
+    ...getBaseChainUtils(target, environment),
     name: nameMap[target] || '',
     webpack,
     HtmlWebpackPlugin: __internalHelper.getHTMLPlugin(),
@@ -136,11 +137,13 @@ async function getConfigUtils(
 export async function generateWebpackConfig({
   target,
   context,
+  environment,
 }: {
+  environment: string;
   target: RsbuildTarget;
   context: InternalContext;
 }) {
-  const chainUtils = await getChainUtils(target);
+  const chainUtils = await getChainUtils(target, environment);
   const { default: webpack } = await import('webpack');
   const {
     BannerPlugin,