@rsbuild/webpack 0.7.10 → 1.0.0-alpha.1

package/dist/build.d.ts

@@ -0,0 +1,3 @@
+import type { BuildOptions } from '@rsbuild/shared';
+import { type InitConfigsOptions } from './initConfigs';
+export declare const build: (initOptions: InitConfigsOptions, { mode, watch, compiler: customCompiler }?: BuildOptions) => Promise<void>;

package/dist/createCompiler.d.ts

@@ -0,0 +1,12 @@
+import { type Rspack } from '@rsbuild/core';
+import { type InitConfigsOptions } from './initConfigs';
+import { type InternalContext } from './shared';
+import type { WebpackConfig } from './types';
+export declare function createCompiler({ context, webpackConfigs, }: {
+    context: InternalContext;
+    webpackConfigs: WebpackConfig[];
+}): Promise<Rspack.Compiler | Rspack.MultiCompiler>;
+export declare function createDevMiddleware(options: InitConfigsOptions, customCompiler?: Rspack.Compiler | Rspack.MultiCompiler): Promise<{
+    devMiddleware: import("node_modules/@rsbuild/core/dist-types/server/devMiddleware").DevMiddleware;
+    compiler: Rspack.Compiler | Rspack.MultiCompiler;
+}>;

package/dist/index.cjs

@@ -39,7 +39,7 @@ var __publicField = (obj, key, value) => {
 };
 
 // src/shared.ts
-var import_core, getChainUtils, initRsbuildConfig, createDevServer, formatStats, getDevMiddleware, getStatsOptions, stringifyConfig, outputInspectConfigFiles, chainToConfig, modifyBundlerChain, onCompileDone, TARGET_ID_MAP;
+var import_core, getChainUtils, initRsbuildConfig, createDevServer, formatStats, getDevMiddleware, getStatsOptions, stringifyConfig, outputInspectConfigFiles, getRsbuildInspectConfig, chainToConfig, modifyBundlerChain, onCompileDone, prettyTime;
 var init_shared = __esm({
   "src/shared.ts"() {
     "use strict";
@@ -53,10 +53,11 @@ var init_shared = __esm({
       getStatsOptions,
       stringifyConfig,
       outputInspectConfigFiles,
+      getRsbuildInspectConfig,
       chainToConfig,
       modifyBundlerChain,
       onCompileDone,
-      TARGET_ID_MAP
+      prettyTime
     } = import_core.__internalHelper);
   }
 });
@@ -74,37 +75,37 @@ async function inspectConfig({
   inspectOptions = {}
 }) {
   if (inspectOptions.env) {
-    (0, import_shared.setNodeEnv)(inspectOptions.env);
-  } else if (!(0, import_shared.getNodeEnv)()) {
-    (0, import_shared.setNodeEnv)("development");
+    process.env.NODE_ENV = inspectOptions.env;
+  } else if (!process.env.NODE_ENV) {
+    process.env.NODE_ENV = "development";
   }
   const webpackConfigs = bundlerConfigs || (await initConfigs({
     context,
     pluginManager,
     rsbuildOptions
   })).webpackConfigs;
-  const rsbuildDebugConfig = {
-    ...context.normalizedConfig,
-    pluginNames: pluginManager.getPlugins().map((p) => p.name)
-  };
-  const rawRsbuildConfig = await stringifyConfig(
-    rsbuildDebugConfig,
-    inspectOptions.verbose
-  );
-  const rawBundlerConfigs = await Promise.all(
-    webpackConfigs.map(
-      (config) => stringifyConfig(config, inspectOptions.verbose)
-    )
-  );
+  const rawBundlerConfigs = webpackConfigs.map((config, index) => ({
+    name: config.name || String(index),
+    content: stringifyConfig(config, inspectOptions.verbose)
+  }));
+  const {
+    rsbuildConfig,
+    rawRsbuildConfig,
+    environmentConfigs,
+    rawEnvironmentConfigs
+  } = getRsbuildInspectConfig({
+    normalizedConfig: context.normalizedConfig,
+    inspectOptions,
+    pluginManager
+  });
   let outputPath = inspectOptions.outputPath || context.distPath;
   if (!(0, import_node_path.isAbsolute)(outputPath)) {
     outputPath = (0, import_node_path.join)(context.rootPath, outputPath);
   }
   if (inspectOptions.writeToDisk) {
     await outputInspectConfigFiles({
-      rsbuildConfig: context.normalizedConfig,
-      rawRsbuildConfig,
-      bundlerConfigs: rawBundlerConfigs,
+      rawBundlerConfigs,
+      rawEnvironmentConfigs,
       inspectOptions: {
         ...inspectOptions,
         outputPath
@@ -114,19 +115,20 @@ async function inspectConfig({
   }
   return {
     rsbuildConfig: rawRsbuildConfig,
-    bundlerConfigs: rawBundlerConfigs,
+    environmentConfigs: rawEnvironmentConfigs.map((r) => r.content),
+    bundlerConfigs: rawBundlerConfigs.map((r) => r.content),
     origin: {
-      rsbuildConfig: rsbuildDebugConfig,
+      rsbuildConfig,
+      environmentConfigs,
       bundlerConfigs: webpackConfigs
     }
   };
 }
-var import_node_path, import_shared;
+var import_node_path;
 var init_inspectConfig = __esm({
   "src/inspectConfig.ts"() {
     "use strict";
     import_node_path = require("path");
-    import_shared = require("@rsbuild/shared");
     init_initConfigs();
     init_shared();
   }
@@ -140,7 +142,7 @@ async function modifyWebpackChain(context, utils, chain) {
     utils
   );
   if (context.config.tools?.webpackChain) {
-    for (const item of (0, import_shared3.castArray)(context.config.tools.webpackChain)) {
+    for (const item of (0, import_shared2.castArray)(context.config.tools.webpackChain)) {
       item(modifiedChain, utils);
     }
   }
@@ -154,7 +156,7 @@ async function modifyWebpackConfig(context, webpackConfig, utils) {
     utils
   );
   if (context.config.tools?.webpack) {
-    modifiedConfig = (0, import_shared3.reduceConfigsWithContext)({
+    modifiedConfig = (0, import_reduce_configs.reduceConfigsWithContext)({
       initial: modifiedConfig,
       config: context.config.tools.webpack,
       ctx: utils,
@@ -164,16 +166,15 @@ async function modifyWebpackConfig(context, webpackConfig, utils) {
   import_core2.logger.debug("modify webpack config done");
   return modifiedConfig;
 }
-async function getChainUtils2(target) {
+async function getChainUtils2(target, environment) {
   const { default: webpack2 } = await import("webpack");
   const nameMap = {
     web: "client",
     node: "server",
-    "web-worker": "web-worker",
-    "service-worker": "service-worker"
+    "web-worker": "web-worker"
   };
   return {
-    ...getChainUtils(target),
+    ...getChainUtils(target, environment),
     name: nameMap[target] || "",
     webpack: webpack2,
     HtmlWebpackPlugin: import_core2.__internalHelper.getHTMLPlugin()
@@ -185,7 +186,7 @@ async function getConfigUtils(config, chainUtils) {
     ...chainUtils,
     mergeConfig: merge,
     addRules(rules) {
-      const ruleArr = (0, import_shared3.castArray)(rules);
+      const ruleArr = (0, import_shared2.castArray)(rules);
       if (!config.module) {
         config.module = {};
       }
@@ -195,14 +196,14 @@ async function getConfigUtils(config, chainUtils) {
       config.module.rules.unshift(...ruleArr);
     },
     prependPlugins(plugins) {
-      const pluginArr = (0, import_shared3.castArray)(plugins);
+      const pluginArr = (0, import_shared2.castArray)(plugins);
       if (!config.plugins) {
         config.plugins = [];
       }
       config.plugins.unshift(...pluginArr);
     },
     appendPlugins(plugins) {
-      const pluginArr = (0, import_shared3.castArray)(plugins);
+      const pluginArr = (0, import_shared2.castArray)(plugins);
       if (!config.plugins) {
         config.plugins = [];
       }
@@ -219,9 +220,13 @@ async function getConfigUtils(config, chainUtils) {
 }
 async function generateWebpackConfig({
   target,
-  context
+  context,
+  environment
 }) {
-  const chainUtils = await getChainUtils2(target);
+  const chainUtils = await getChainUtils2(
+    target,
+    context.environments[environment]
+  );
   const { default: webpack2 } = await import("webpack");
   const {
     BannerPlugin,
@@ -249,12 +254,13 @@ async function generateWebpackConfig({
   );
   return webpackConfig;
 }
-var import_core2, import_shared3;
+var import_core2, import_shared2, import_reduce_configs;
 var init_webpackConfig = __esm({
   "src/webpackConfig.ts"() {
     "use strict";
     import_core2 = require("@rsbuild/core");
-    import_shared3 = require("@rsbuild/shared");
+    import_shared2 = require("@rsbuild/shared");
+    import_reduce_configs = require("reduce-configs");
     init_shared();
   }
 });
@@ -269,9 +275,14 @@ 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
+      })
+    )
   );
   if (import_core3.logger.level === "verbose") {
     const inspect = () => {
@@ -317,7 +328,8 @@ async function createCompiler({
 }) {
   import_core4.logger.debug("create compiler");
   await context.hooks.onBeforeCreateCompiler.call({
-    bundlerConfigs: webpackConfigs
+    bundlerConfigs: webpackConfigs,
+    environments: context.environments
   });
   const { default: webpack2 } = await import("webpack");
   const compiler = webpackConfigs.length === 1 ? webpack2(webpackConfigs[0]) : webpack2(webpackConfigs);
@@ -332,10 +344,11 @@ async function createCompiler({
     if (level === "warning") {
       import_core4.logger.warn(message);
     }
-    if ((0, import_shared6.isDev)()) {
+    if (process.env.NODE_ENV === "development") {
       await context.hooks.onDevCompileDone.call({
         isFirstCompile,
-        stats
+        stats,
+        environments: context.environments
       });
     }
     isFirstCompile = false;
@@ -343,7 +356,8 @@ async function createCompiler({
   let isFirstCompile = true;
   onCompileDone(compiler, done, import_MultiStats.default);
   await context.hooks.onAfterCreateCompiler.call({
-    compiler
+    compiler,
+    environments: context.environments
   });
   import_core4.logger.debug("create compiler done");
   return compiler;
@@ -364,12 +378,11 @@ async function createDevMiddleware(options, customCompiler) {
     compiler
   };
 }
-var import_core4, import_shared6, import_MultiStats;
+var import_core4, import_MultiStats;
 var init_createCompiler = __esm({
   "src/createCompiler.ts"() {
     "use strict";
     import_core4 = require("@rsbuild/core");
-    import_shared6 = require("@rsbuild/shared");
     import_MultiStats = __toESM(require("webpack/lib/MultiStats.js"));
     init_initConfigs();
     init_shared();
@@ -1030,18 +1043,18 @@ var require_conversions = __commonJS({
       return ansi;
     };
     convert.ansi16.rgb = function(args) {
-      let color = args % 10;
-      if (color === 0 || color === 7) {
+      let color3 = args % 10;
+      if (color3 === 0 || color3 === 7) {
         if (args > 50) {
-          color += 3.5;
+          color3 += 3.5;
         }
-        color = color / 10.5 * 255;
-        return [color, color, color];
+        color3 = color3 / 10.5 * 255;
+        return [color3, color3, color3];
       }
       const mult = (~~(args > 50) + 1) * 0.5;
-      const r = (color & 1) * mult * 255;
-      const g = (color >> 1 & 1) * mult * 255;
-      const b = (color >> 2 & 1) * mult * 255;
+      const r = (color3 & 1) * mult * 255;
+      const g = (color3 >> 1 & 1) * mult * 255;
+      const b = (color3 >> 2 & 1) * mult * 255;
       return [r, g, b];
     };
     convert.ansi256.rgb = function(args) {
@@ -1826,11 +1839,11 @@ var init_utils = __esm({
 });
 
 // src/progress/helpers/bar.ts
-var import_shared9, import_cli_truncate, defaultOption, padding, FULL_WIDTH, MIDDLE_WIDTH, renderBar;
+var import_shared7, import_cli_truncate, defaultOption, padding, FULL_WIDTH, MIDDLE_WIDTH, renderBar;
 var init_bar = __esm({
   "src/progress/helpers/bar.ts"() {
     "use strict";
-    import_shared9 = require("@rsbuild/shared");
+    import_shared7 = require("@rsbuild/shared");
     import_cli_truncate = __toESM(require_cli_truncate());
     init_utils();
     defaultOption = {
@@ -1872,7 +1885,7 @@ var init_bar = __esm({
         errorInfo,
         width,
         current,
-        color,
+        color: color3,
         bgColor,
         char,
         message,
@@ -1884,15 +1897,15 @@ var init_bar = __esm({
       } = mergedOptions;
       const space = " ".repeat(spaceWidth);
       const percent = clamp(Math.floor(current / total * 100), 0, 100);
-      const barColor = import_shared9.color[color];
-      const backgroundColor = import_shared9.color[bgColor];
-      const doneColor = hasErrors ? import_shared9.color.red : barColor;
+      const barColor = import_shared7.color[color3];
+      const backgroundColor = import_shared7.color[bgColor];
+      const doneColor = hasErrors ? import_shared7.color.red : barColor;
       const idColor = done ? doneColor : barColor;
       const id = mergedOptions.id ? idColor(padding(mergedOptions.id, maxIdLen)) : "";
       const { columns: terminalWidth = FULL_WIDTH } = process.stdout;
       if (done) {
         if (hasErrors) {
-          const message2 = import_shared9.color.bold(doneColor(errorInfo));
+          const message2 = import_shared7.color.bold(doneColor(errorInfo));
           if (terminalWidth >= MIDDLE_WIDTH) {
             return [idColor(errorIcon), id, doneColor(`${space}${message2}`)].join(
               ""
@@ -1902,7 +1915,7 @@ var init_bar = __esm({
         }
         return "";
       }
-      const msgStr = import_shared9.color[messageColor](
+      const msgStr = import_shared7.color[messageColor](
         (0, import_cli_truncate.default)(message, messageWidth, { position: "start" })
       );
       const left = clamp(Math.floor(percent * width / 100), 0, width);
@@ -2228,30 +2241,32 @@ function createNonTTYLogger() {
     hasErrors,
     compileTime
   }) => {
+    const suffix = import_shared8.color.gray(`(${id})`);
     if (done) {
       if (prevPercentage === 100) {
         return;
       }
       prevPercentage = 100;
       if (hasErrors) {
-        import_core5.logger.error(`${id} compile failed in ${compileTime}`);
+        import_core5.logger.error(`Compile failed in ${compileTime} ${suffix}`);
       } else {
-        import_core5.logger.ready(`${id} compiled in ${compileTime}`);
+        import_core5.logger.ready(`Compiled in ${compileTime} ${suffix}`);
       }
     } else if (current - prevPercentage > 10) {
       prevPercentage = current;
-      import_core5.logger.info(`${id} compile progress: ${current.toFixed(0)}%`);
+      import_core5.logger.info(`Compile progress: ${current.toFixed(0)}% ${suffix}`);
     }
   };
   return {
     log
   };
 }
-var import_core5;
+var import_core5, import_shared8;
 var init_nonTty = __esm({
   "src/progress/helpers/nonTty.ts"() {
     "use strict";
     import_core5 = require("@rsbuild/core");
+    import_shared8 = require("@rsbuild/shared");
   }
 });
 
@@ -2260,13 +2275,14 @@ var ProgressPlugin_exports = {};
 __export(ProgressPlugin_exports, {
   ProgressPlugin: () => ProgressPlugin
 });
-var import_core6, import_shared10, import_webpack, ProgressPlugin;
+var import_core6, import_shared9, import_webpack, ProgressPlugin;
 var init_ProgressPlugin = __esm({
   "src/progress/ProgressPlugin.ts"() {
     "use strict";
     import_core6 = require("@rsbuild/core");
-    import_shared10 = require("@rsbuild/shared");
+    import_shared9 = require("@rsbuild/shared");
     import_webpack = __toESM(require("webpack"));
+    init_shared();
     init_helpers();
     init_nonTty();
     ProgressPlugin = class extends import_webpack.default.ProgressPlugin {
@@ -2324,10 +2340,11 @@ var init_ProgressPlugin = __esm({
             this.hasCompileErrors = stat.hasErrors();
             const hrtime = process.hrtime(startTime);
             const seconds = hrtime[0] + hrtime[1] / 1e9;
-            this.compileTime = (0, import_shared10.prettyTime)(seconds);
+            this.compileTime = prettyTime(seconds);
             startTime = null;
             if (!this.hasCompileErrors) {
-              import_core6.logger.ready(`${this.id} compiled in ${this.compileTime}`);
+              const suffix = this.id ? import_shared9.color.gray(` (${this.id})`) : "";
+              import_core6.logger.ready(`Compiled in ${this.compileTime} ${suffix}`);
             }
           }
         });
@@ -2368,7 +2385,6 @@ var init_plugin = __esm({
     "use strict";
     import_node_fs = __toESM(require("fs"));
     import_shared11 = require("@rsbuild/shared");
-    init_shared();
     getMainFields = (chain, target) => {
       const mainFields = chain.resolve.mainFields.values();
       if (mainFields.length) {
@@ -2382,13 +2398,13 @@ var init_plugin = __esm({
     pluginAdaptor = () => ({
       name: "rsbuild-webpack:adaptor",
       setup(api) {
-        api.modifyBundlerChain(async (chain, { CHAIN_ID, target }) => {
-          const config = api.getNormalizedConfig();
-          if (api.context.tsconfigPath && config.source.aliasStrategy === "prefer-tsconfig") {
+        api.modifyBundlerChain(async (chain, { CHAIN_ID, environment, target }) => {
+          const { config, tsconfigPath } = environment;
+          if (tsconfigPath && config.source.aliasStrategy === "prefer-tsconfig") {
             await applyTsConfigPathsPlugin({
               chain,
               CHAIN_ID,
-              configFile: api.context.tsconfigPath,
+              configFile: tsconfigPath,
               mainFields: getMainFields(chain, target),
               extensions: chain.resolve.extensions.values()
             });
@@ -2398,19 +2414,19 @@ var init_plugin = __esm({
             const { ProgressPlugin: ProgressPlugin2 } = await Promise.resolve().then(() => (init_ProgressPlugin(), ProgressPlugin_exports));
             chain.plugin(CHAIN_ID.PLUGIN.PROGRESS).use(ProgressPlugin2, [
               {
-                id: TARGET_ID_MAP[target],
+                id: environment.name,
                 ...progress === true ? {} : progress
               }
             ]);
           }
           const { copy } = config.output;
           if (copy) {
-            const { default: CopyPlugin } = await import(
-              // @ts-expect-error copy-webpack-plugin does not provide types
-              "copy-webpack-plugin"
-            );
+            const { default: CopyPlugin } = await import("copy-webpack-plugin");
             const options = Array.isArray(copy) ? { patterns: copy } : copy;
-            chain.plugin(CHAIN_ID.PLUGIN.COPY).use(CopyPlugin, [options]);
+            chain.plugin(CHAIN_ID.PLUGIN.COPY).use(CopyPlugin, [
+              // @ts-expect-error to type mismatch
+              options
+            ]);
           }
         });
         api.modifyWebpackConfig(async (config) => {
@@ -2438,19 +2454,18 @@ var build_exports = {};
 __export(build_exports, {
   build: () => build
 });
-var import_core7, import_shared13, import_MultiStats2, build;
+var import_core7, import_MultiStats2, build;
 var init_build = __esm({
   "src/build.ts"() {
     "use strict";
     import_core7 = require("@rsbuild/core");
-    import_shared13 = require("@rsbuild/shared");
     import_MultiStats2 = __toESM(require("webpack/lib/MultiStats.js"));
     init_createCompiler();
     init_initConfigs();
     init_shared();
     build = async (initOptions, { mode = "production", watch, compiler: customCompiler } = {}) => {
-      if (!(0, import_shared13.getNodeEnv)()) {
-        (0, import_shared13.setNodeEnv)(mode);
+      if (!process.env.NODE_ENV) {
+        process.env.NODE_ENV = mode;
       }
       const { context } = initOptions;
       let compiler;
@@ -2467,10 +2482,15 @@ var init_build = __esm({
       }
       let isFirstCompile = true;
       await context.hooks.onBeforeBuild.call({
-        bundlerConfigs
+        bundlerConfigs,
+        environments: context.environments
       });
       const onDone = async (stats) => {
-        const p = context.hooks.onAfterBuild.call({ isFirstCompile, stats });
+        const p = context.hooks.onAfterBuild.call({
+          isFirstCompile,
+          stats,
+          environments: context.environments
+        });
         isFirstCompile = false;
         await p;
       };

package/dist/index.d.ts

@@ -1,6 +1,2 @@
-import { RsbuildProvider } from '@rsbuild/core';
-export { Configuration as WebpackConfig, default as webpack } from 'webpack';
-
-declare const webpackProvider: RsbuildProvider<'webpack'>;
-
-export { webpackProvider };
+export { webpackProvider } from './provider';
+export type { webpack, WebpackConfig, } from './types';

package/dist/index.js

@@ -46,18 +46,18 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// ../../../node_modules/.pnpm/@modern-js+module-tools@2.52.0_eslint@9.5.0_typescript@5.4.5/node_modules/@modern-js/module-tools/shims/esm.js
+// ../../../node_modules/.pnpm/@modern-js+module-tools@2.54.5_eslint@9.6.0_typescript@5.5.2/node_modules/@modern-js/module-tools/shims/esm.js
 import { fileURLToPath } from "url";
 import path from "path";
 var init_esm = __esm({
-  "../../../node_modules/.pnpm/@modern-js+module-tools@2.52.0_eslint@9.5.0_typescript@5.4.5/node_modules/@modern-js/module-tools/shims/esm.js"() {
+  "../../../node_modules/.pnpm/@modern-js+module-tools@2.54.5_eslint@9.6.0_typescript@5.5.2/node_modules/@modern-js/module-tools/shims/esm.js"() {
     "use strict";
   }
 });
 
 // src/shared.ts
 import { __internalHelper } from "@rsbuild/core";
-var getChainUtils, initRsbuildConfig, createDevServer, formatStats, getDevMiddleware, getStatsOptions, stringifyConfig, outputInspectConfigFiles, chainToConfig, modifyBundlerChain, onCompileDone, TARGET_ID_MAP;
+var getChainUtils, initRsbuildConfig, createDevServer, formatStats, getDevMiddleware, getStatsOptions, stringifyConfig, outputInspectConfigFiles, getRsbuildInspectConfig, chainToConfig, modifyBundlerChain, onCompileDone, prettyTime;
 var init_shared = __esm({
   "src/shared.ts"() {
     "use strict";
@@ -71,10 +71,11 @@ var init_shared = __esm({
       getStatsOptions,
       stringifyConfig,
       outputInspectConfigFiles,
+      getRsbuildInspectConfig,
       chainToConfig,
       modifyBundlerChain,
       onCompileDone,
-      TARGET_ID_MAP
+      prettyTime
     } = __internalHelper);
   }
 });
@@ -85,7 +86,6 @@ __export(inspectConfig_exports, {
   inspectConfig: () => inspectConfig
 });
 import { isAbsolute, join } from "path";
-import { getNodeEnv, setNodeEnv } from "@rsbuild/shared";
 async function inspectConfig({
   context,
   pluginManager,
@@ -94,37 +94,37 @@ async function inspectConfig({
   inspectOptions = {}
 }) {
   if (inspectOptions.env) {
-    setNodeEnv(inspectOptions.env);
-  } else if (!getNodeEnv()) {
-    setNodeEnv("development");
+    process.env.NODE_ENV = inspectOptions.env;
+  } else if (!process.env.NODE_ENV) {
+    process.env.NODE_ENV = "development";
   }
   const webpackConfigs = bundlerConfigs || (await initConfigs({
     context,
     pluginManager,
     rsbuildOptions
   })).webpackConfigs;
-  const rsbuildDebugConfig = {
-    ...context.normalizedConfig,
-    pluginNames: pluginManager.getPlugins().map((p) => p.name)
-  };
-  const rawRsbuildConfig = await stringifyConfig(
-    rsbuildDebugConfig,
-    inspectOptions.verbose
-  );
-  const rawBundlerConfigs = await Promise.all(
-    webpackConfigs.map(
-      (config) => stringifyConfig(config, inspectOptions.verbose)
-    )
-  );
+  const rawBundlerConfigs = webpackConfigs.map((config, index) => ({
+    name: config.name || String(index),
+    content: stringifyConfig(config, inspectOptions.verbose)
+  }));
+  const {
+    rsbuildConfig,
+    rawRsbuildConfig,
+    environmentConfigs,
+    rawEnvironmentConfigs
+  } = getRsbuildInspectConfig({
+    normalizedConfig: context.normalizedConfig,
+    inspectOptions,
+    pluginManager
+  });
   let outputPath = inspectOptions.outputPath || context.distPath;
   if (!isAbsolute(outputPath)) {
     outputPath = join(context.rootPath, outputPath);
   }
   if (inspectOptions.writeToDisk) {
     await outputInspectConfigFiles({
-      rsbuildConfig: context.normalizedConfig,
-      rawRsbuildConfig,
-      bundlerConfigs: rawBundlerConfigs,
+      rawBundlerConfigs,
+      rawEnvironmentConfigs,
       inspectOptions: {
         ...inspectOptions,
         outputPath
@@ -134,9 +134,11 @@ async function inspectConfig({
   }
   return {
     rsbuildConfig: rawRsbuildConfig,
-    bundlerConfigs: rawBundlerConfigs,
+    environmentConfigs: rawEnvironmentConfigs.map((r) => r.content),
+    bundlerConfigs: rawBundlerConfigs.map((r) => r.content),
     origin: {
-      rsbuildConfig: rsbuildDebugConfig,
+      rsbuildConfig,
+      environmentConfigs,
       bundlerConfigs: webpackConfigs
     }
   };
@@ -156,9 +158,9 @@ import {
   logger
 } from "@rsbuild/core";
 import {
-  castArray,
-  reduceConfigsWithContext
+  castArray
 } from "@rsbuild/shared";
+import { reduceConfigsWithContext } from "reduce-configs";
 async function modifyWebpackChain(context, utils, chain) {
   logger.debug("modify webpack chain");
   const [modifiedChain] = await context.hooks.modifyWebpackChain.call(
@@ -190,16 +192,15 @@ async function modifyWebpackConfig(context, webpackConfig, utils) {
   logger.debug("modify webpack config done");
   return modifiedConfig;
 }
-async function getChainUtils2(target) {
+async function getChainUtils2(target, environment) {
   const { default: webpack2 } = await import("webpack");
   const nameMap = {
     web: "client",
     node: "server",
-    "web-worker": "web-worker",
-    "service-worker": "service-worker"
+    "web-worker": "web-worker"
   };
   return {
-    ...getChainUtils(target),
+    ...getChainUtils(target, environment),
     name: nameMap[target] || "",
     webpack: webpack2,
     HtmlWebpackPlugin: __internalHelper2.getHTMLPlugin()
@@ -245,9 +246,13 @@ async function getConfigUtils(config, chainUtils) {
 }
 async function generateWebpackConfig({
   target,
-  context
+  context,
+  environment
 }) {
-  const chainUtils = await getChainUtils2(target);
+  const chainUtils = await getChainUtils2(
+    target,
+    context.environments[environment]
+  );
   const { default: webpack2 } = await import("webpack");
   const {
     BannerPlugin,
@@ -296,9 +301,14 @@ 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
+      })
+    )
   );
   if (logger2.level === "verbose") {
     const inspect = () => {
@@ -338,7 +348,6 @@ __export(createCompiler_exports, {
   createDevMiddleware: () => createDevMiddleware
 });
 import { logger as logger3 } from "@rsbuild/core";
-import { isDev } from "@rsbuild/shared";
 import WebpackMultiStats from "webpack/lib/MultiStats.js";
 async function createCompiler({
   context,
@@ -346,7 +355,8 @@ async function createCompiler({
 }) {
   logger3.debug("create compiler");
   await context.hooks.onBeforeCreateCompiler.call({
-    bundlerConfigs: webpackConfigs
+    bundlerConfigs: webpackConfigs,
+    environments: context.environments
   });
   const { default: webpack2 } = await import("webpack");
   const compiler = webpackConfigs.length === 1 ? webpack2(webpackConfigs[0]) : webpack2(webpackConfigs);
@@ -361,10 +371,11 @@ async function createCompiler({
     if (level === "warning") {
       logger3.warn(message);
     }
-    if (isDev()) {
+    if (process.env.NODE_ENV === "development") {
       await context.hooks.onDevCompileDone.call({
         isFirstCompile,
-        stats
+        stats,
+        environments: context.environments
       });
     }
     isFirstCompile = false;
@@ -372,7 +383,8 @@ async function createCompiler({
   let isFirstCompile = true;
   onCompileDone(compiler, done, WebpackMultiStats);
   await context.hooks.onAfterCreateCompiler.call({
-    compiler
+    compiler,
+    environments: context.environments
   });
   logger3.debug("create compiler done");
   return compiler;
@@ -1060,18 +1072,18 @@ var require_conversions = __commonJS({
       return ansi;
     };
     convert.ansi16.rgb = function(args) {
-      let color = args % 10;
-      if (color === 0 || color === 7) {
+      let color3 = args % 10;
+      if (color3 === 0 || color3 === 7) {
         if (args > 50) {
-          color += 3.5;
+          color3 += 3.5;
         }
-        color = color / 10.5 * 255;
-        return [color, color, color];
+        color3 = color3 / 10.5 * 255;
+        return [color3, color3, color3];
       }
       const mult = (~~(args > 50) + 1) * 0.5;
-      const r = (color & 1) * mult * 255;
-      const g = (color >> 1 & 1) * mult * 255;
-      const b = (color >> 2 & 1) * mult * 255;
+      const r = (color3 & 1) * mult * 255;
+      const g = (color3 >> 1 & 1) * mult * 255;
+      const b = (color3 >> 2 & 1) * mult * 255;
       return [r, g, b];
     };
     convert.ansi256.rgb = function(args) {
@@ -1914,7 +1926,7 @@ var init_bar = __esm({
         errorInfo,
         width,
         current,
-        color,
+        color: color3,
         bgColor,
         char,
         message,
@@ -1926,7 +1938,7 @@ var init_bar = __esm({
       } = mergedOptions;
       const space = " ".repeat(spaceWidth);
       const percent = clamp(Math.floor(current / total * 100), 0, 100);
-      const barColor = colors[color];
+      const barColor = colors[color3];
       const backgroundColor = colors[bgColor];
       const doneColor = hasErrors ? colors.red : barColor;
       const idColor = done ? doneColor : barColor;
@@ -2268,6 +2280,7 @@ var init_helpers = __esm({
 
 // src/progress/helpers/nonTty.ts
 import { logger as logger4 } from "@rsbuild/core";
+import { color } from "@rsbuild/shared";
 function createNonTTYLogger() {
   let prevPercentage = 0;
   const log = ({
@@ -2277,19 +2290,20 @@ function createNonTTYLogger() {
     hasErrors,
     compileTime
   }) => {
+    const suffix = color.gray(`(${id})`);
     if (done) {
       if (prevPercentage === 100) {
         return;
       }
       prevPercentage = 100;
       if (hasErrors) {
-        logger4.error(`${id} compile failed in ${compileTime}`);
+        logger4.error(`Compile failed in ${compileTime} ${suffix}`);
       } else {
-        logger4.ready(`${id} compiled in ${compileTime}`);
+        logger4.ready(`Compiled in ${compileTime} ${suffix}`);
       }
     } else if (current - prevPercentage > 10) {
       prevPercentage = current;
-      logger4.info(`${id} compile progress: ${current.toFixed(0)}%`);
+      logger4.info(`Compile progress: ${current.toFixed(0)}% ${suffix}`);
     }
   };
   return {
@@ -2309,13 +2323,14 @@ __export(ProgressPlugin_exports, {
   ProgressPlugin: () => ProgressPlugin
 });
 import { logger as logger5 } from "@rsbuild/core";
-import { prettyTime } from "@rsbuild/shared";
+import { color as color2 } from "@rsbuild/shared";
 import webpack from "webpack";
 var ProgressPlugin;
 var init_ProgressPlugin = __esm({
   "src/progress/ProgressPlugin.ts"() {
     "use strict";
     init_esm();
+    init_shared();
     init_helpers();
     init_nonTty();
     ProgressPlugin = class extends webpack.ProgressPlugin {
@@ -2376,7 +2391,8 @@ var init_ProgressPlugin = __esm({
             this.compileTime = prettyTime(seconds);
             startTime = null;
             if (!this.hasCompileErrors) {
-              logger5.ready(`${this.id} compiled in ${this.compileTime}`);
+              const suffix = this.id ? color2.gray(` (${this.id})`) : "";
+              logger5.ready(`Compiled in ${this.compileTime} ${suffix}`);
             }
           }
         });
@@ -2418,7 +2434,6 @@ var init_plugin = __esm({
   "src/plugin.ts"() {
     "use strict";
     init_esm();
-    init_shared();
     getMainFields = (chain, target) => {
       const mainFields = chain.resolve.mainFields.values();
       if (mainFields.length) {
@@ -2432,13 +2447,13 @@ var init_plugin = __esm({
     pluginAdaptor = () => ({
       name: "rsbuild-webpack:adaptor",
       setup(api) {
-        api.modifyBundlerChain(async (chain, { CHAIN_ID, target }) => {
-          const config = api.getNormalizedConfig();
-          if (api.context.tsconfigPath && config.source.aliasStrategy === "prefer-tsconfig") {
+        api.modifyBundlerChain(async (chain, { CHAIN_ID, environment, target }) => {
+          const { config, tsconfigPath } = environment;
+          if (tsconfigPath && config.source.aliasStrategy === "prefer-tsconfig") {
             await applyTsConfigPathsPlugin({
               chain,
               CHAIN_ID,
-              configFile: api.context.tsconfigPath,
+              configFile: tsconfigPath,
               mainFields: getMainFields(chain, target),
               extensions: chain.resolve.extensions.values()
             });
@@ -2448,19 +2463,19 @@ var init_plugin = __esm({
             const { ProgressPlugin: ProgressPlugin2 } = await Promise.resolve().then(() => (init_ProgressPlugin(), ProgressPlugin_exports));
             chain.plugin(CHAIN_ID.PLUGIN.PROGRESS).use(ProgressPlugin2, [
               {
-                id: TARGET_ID_MAP[target],
+                id: environment.name,
                 ...progress === true ? {} : progress
               }
             ]);
           }
           const { copy } = config.output;
           if (copy) {
-            const { default: CopyPlugin } = await import(
-              // @ts-expect-error copy-webpack-plugin does not provide types
-              "copy-webpack-plugin"
-            );
+            const { default: CopyPlugin } = await import("copy-webpack-plugin");
             const options = Array.isArray(copy) ? { patterns: copy } : copy;
-            chain.plugin(CHAIN_ID.PLUGIN.COPY).use(CopyPlugin, [options]);
+            chain.plugin(CHAIN_ID.PLUGIN.COPY).use(CopyPlugin, [
+              // @ts-expect-error to type mismatch
+              options
+            ]);
           }
         });
         api.modifyWebpackConfig(async (config) => {
@@ -2489,10 +2504,6 @@ __export(build_exports, {
   build: () => build
 });
 import { logger as logger6 } from "@rsbuild/core";
-import {
-  getNodeEnv as getNodeEnv2,
-  setNodeEnv as setNodeEnv2
-} from "@rsbuild/shared";
 import WebpackMultiStats2 from "webpack/lib/MultiStats.js";
 var build;
 var init_build = __esm({
@@ -2503,8 +2514,8 @@ var init_build = __esm({
     init_initConfigs();
     init_shared();
     build = async (initOptions, { mode = "production", watch, compiler: customCompiler } = {}) => {
-      if (!getNodeEnv2()) {
-        setNodeEnv2(mode);
+      if (!process.env.NODE_ENV) {
+        process.env.NODE_ENV = mode;
       }
       const { context } = initOptions;
       let compiler;
@@ -2521,10 +2532,15 @@ var init_build = __esm({
       }
       let isFirstCompile = true;
       await context.hooks.onBeforeBuild.call({
-        bundlerConfigs
+        bundlerConfigs,
+        environments: context.environments
       });
       const onDone = async (stats) => {
-        const p = context.hooks.onAfterBuild.call({ isFirstCompile, stats });
+        const p = context.hooks.onAfterBuild.call({
+          isFirstCompile,
+          stats,
+          environments: context.environments
+        });
         isFirstCompile = false;
         await p;
       };

package/dist/initConfigs.d.ts

@@ -0,0 +1,12 @@
+import { type CreateRsbuildOptions } from '@rsbuild/core';
+import type { PluginManager } from '@rsbuild/shared';
+import { type InternalContext } from './shared';
+import type { WebpackConfig } from './types';
+export type InitConfigsOptions = {
+    context: InternalContext;
+    pluginManager: PluginManager;
+    rsbuildOptions: Required<CreateRsbuildOptions>;
+};
+export declare function initConfigs({ context, pluginManager, rsbuildOptions, }: InitConfigsOptions): Promise<{
+    webpackConfigs: WebpackConfig[];
+}>;

package/dist/inspectConfig.d.ts

@@ -0,0 +1,7 @@
+import type { InspectConfigOptions, InspectConfigResult } from '@rsbuild/core';
+import { type InitConfigsOptions } from './initConfigs';
+import type { WebpackConfig } from './types';
+export declare function inspectConfig({ context, pluginManager, rsbuildOptions, bundlerConfigs, inspectOptions, }: InitConfigsOptions & {
+    inspectOptions?: InspectConfigOptions;
+    bundlerConfigs?: WebpackConfig[];
+}): Promise<InspectConfigResult<'webpack'>>;

package/dist/plugin.d.ts

@@ -0,0 +1,5 @@
+import type { RsbuildPlugin } from '@rsbuild/core';
+/**
+ * Handling differences between Webpack and Rspack
+ */
+export declare const pluginAdaptor: () => RsbuildPlugin;

package/dist/progress/ProgressPlugin.d.ts

@@ -0,0 +1,13 @@
+import webpack from 'webpack';
+import type { Props } from './helpers/type';
+export interface ProgressOptions extends Omit<Partial<Props>, 'message' | 'total' | 'current' | 'done'> {
+    id?: string;
+}
+export declare class ProgressPlugin extends webpack.ProgressPlugin {
+    readonly name: string;
+    id: string;
+    hasCompileErrors: boolean;
+    compileTime: string | null;
+    constructor(options: ProgressOptions);
+    apply(compiler: webpack.Compiler): void;
+}

package/dist/progress/helpers/bar.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from './type';
+export declare const FULL_WIDTH = 70;
+export declare const MIDDLE_WIDTH = 40;
+export declare const SMALL_WIDTH = 15;
+export declare const renderBar: (option: Partial<Props>) => string;

package/dist/progress/helpers/bus.d.ts

@@ -0,0 +1,19 @@
+import type { Colors } from '@rsbuild/shared';
+import type { LogUpdate } from './log';
+import type { Props } from './type';
+export declare const getProgressColor: (index: number) => Colors;
+declare class Bus {
+    states: Partial<Props>[];
+    log: LogUpdate;
+    restore: () => void;
+    prevOutput: string;
+    destroyed: boolean;
+    constructor();
+    update(state: Partial<Props>): void;
+    writeToStd(type?: 'stdout' | 'stderr', data?: string): void;
+    render(): void;
+    destroy(): void;
+    clear(): void;
+}
+declare const bus: Bus;
+export { bus };

package/dist/progress/helpers/index.d.ts

@@ -0,0 +1,4 @@
+export * from './bus';
+export * from './bar';
+export * from './type';
+export * from './percentage';

package/dist/progress/helpers/log.d.ts

@@ -0,0 +1,8 @@
+import type { Writable } from 'node:stream';
+export interface LogUpdate {
+    clear: () => void;
+    done: () => void;
+    (str: string): void;
+}
+declare const create: (stream: Writable) => LogUpdate;
+export { create };

package/dist/progress/helpers/nonTty.d.ts

@@ -0,0 +1,9 @@
+export declare function createNonTTYLogger(): {
+    log: ({ id, done, current, hasErrors, compileTime, }: {
+        id: string;
+        done: boolean;
+        current: number;
+        hasErrors: boolean;
+        compileTime: string | null;
+    }) => void;
+};

package/dist/progress/helpers/percentage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Make the progress percentage more user friendly.
+ * The original percentage may pause at certain number for a long time,
+ * or decrease in some cases, which will confuse the user.
+ * So we format the percentage number and display a more smooth percentage.
+ */
+export declare const createFriendlyPercentage: () => (percentage: number) => number;

package/dist/progress/helpers/type.d.ts

@@ -0,0 +1,23 @@
+import type { Colors } from '@rsbuild/shared';
+export type Props = {
+    total: number;
+    current: number;
+    color: Colors;
+    bgColor: Colors;
+    char: string;
+    width: number;
+    buildIcon: string;
+    errorIcon: string;
+    errorInfo: string;
+    message: string;
+    done: boolean;
+    messageWidth: number;
+    spaceWidth: number;
+    messageColor: Colors;
+    id: string;
+    maxIdLen: number;
+    hasErrors: boolean;
+};
+export type BusOption = {
+    state: Props[];
+};

package/dist/progress/helpers/utils.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (x: number, min: number, max: number) => number;

package/dist/provider.d.ts

@@ -0,0 +1,2 @@
+import type { RsbuildProvider } from '@rsbuild/core';
+export declare const webpackProvider: RsbuildProvider<'webpack'>;

package/dist/shared.d.ts

@@ -0,0 +1,16 @@
+import { __internalHelper } from '@rsbuild/core';
+declare const getChainUtils: typeof __internalHelper.getChainUtils, initRsbuildConfig: typeof __internalHelper.initRsbuildConfig, createDevServer: typeof __internalHelper.createDevServer, formatStats: typeof __internalHelper.formatStats, getDevMiddleware: (multiCompiler: import("@rspack/core").Compiler | import("@rspack/core").MultiCompiler) => Promise<NonNullable<import("node_modules/@rsbuild/core/dist-types/server/devMiddleware").DevMiddleware>>, getStatsOptions: typeof __internalHelper.getStatsOptions, stringifyConfig: typeof __internalHelper.stringifyConfig, outputInspectConfigFiles: typeof __internalHelper.outputInspectConfigFiles, getRsbuildInspectConfig: ({ normalizedConfig, inspectOptions, pluginManager, }: {
+    normalizedConfig: import("@rsbuild/core").NormalizedConfig;
+    inspectOptions: import("@rsbuild/core").InspectConfigOptions;
+    pluginManager: import("@rsbuild/shared").PluginManager;
+}) => {
+    rawRsbuildConfig: string;
+    rsbuildConfig: import("@rsbuild/core").InspectConfigResult["origin"]["rsbuildConfig"];
+    rawEnvironmentConfigs: Array<{
+        name: string;
+        content: string;
+    }>;
+    environmentConfigs: import("@rsbuild/core").InspectConfigResult["origin"]["environmentConfigs"];
+}, chainToConfig: typeof __internalHelper.chainToConfig, modifyBundlerChain: typeof __internalHelper.modifyBundlerChain, onCompileDone: (compiler: import("@rspack/core").Compiler | import("@rspack/core").MultiCompiler, onDone: (stats: import("@rsbuild/shared").Stats | import("@rsbuild/shared").MultiStats) => Promise<void>, MultiStatsCtor: new (stats: import("@rsbuild/shared").Stats[]) => import("@rsbuild/shared").MultiStats) => void, prettyTime: (seconds: number) => string;
+export { getChainUtils, initRsbuildConfig, createDevServer, formatStats, getDevMiddleware, getStatsOptions, stringifyConfig, outputInspectConfigFiles, chainToConfig, modifyBundlerChain, onCompileDone, prettyTime, getRsbuildInspectConfig, };
+export type InternalContext = __internalHelper.InternalContext;

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+import type webpack from 'webpack';
+import type { Configuration as WebpackConfig } from 'webpack';
+export type { webpack, WebpackConfig };

package/dist/webpackConfig.d.ts

@@ -0,0 +1,8 @@
+import { type RsbuildTarget } from '@rsbuild/core';
+import { type InternalContext } from './shared';
+import type { WebpackConfig } from './types';
+export declare function generateWebpackConfig({ target, context, environment, }: {
+    environment: string;
+    target: RsbuildTarget;
+    context: InternalContext;
+}): Promise<WebpackConfig>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsbuild/webpack",
-  "version": "0.7.10",
+  "version": "1.0.0-alpha.1",
   "homepage": "https://rsbuild.dev",
   "repository": {
     "type": "git",
@@ -23,20 +23,21 @@
     "dist"
   ],
   "dependencies": {
-    "copy-webpack-plugin": "9.1.0",
+    "copy-webpack-plugin": "11.0.0",
     "mini-css-extract-plugin": "2.9.0",
+    "reduce-configs": "^1.0.0",
     "tsconfig-paths-webpack-plugin": "4.1.0",
-    "webpack": "^5.92.0",
-    "@rsbuild/core": "0.7.10",
-    "@rsbuild/shared": "0.7.10"
+    "webpack": "^5.92.1",
+    "@rsbuild/core": "1.0.0-alpha.1",
+    "@rsbuild/shared": "1.0.0-alpha.1"
   },
   "devDependencies": {
     "@types/node": "18.x",
     "ansi-escapes": "4.3.2",
     "cli-truncate": "2.1.0",
     "patch-console": "1.0.0",
-    "typescript": "^5.4.2",
-    "@scripts/test-helper": "0.7.10"
+    "typescript": "^5.5.2",
+    "@scripts/test-helper": "1.0.0-alpha.1"
   },
   "publishConfig": {
     "access": "public",