fix(cli): load @rspack/dev-server on demand (#6370)

fix(cli): load `@rspack/dev-server` on demand to prevent process.env.WEBPACK_SERVE being set on build mode

packages/rspack-cli/src/commands/preview.ts

@@ -1,5 +1,4 @@
 import type { RspackCLI } from "../rspack-cli";
-import { RspackDevServer } from "@rspack/dev-server";
 import { RspackCommand, RspackPreviewCLIOptions } from "../types";
 import { previewOptions } from "../utils/options";
 import {
@@ -26,6 +25,7 @@ export class PreviewCommand implements RspackCommand {
 						...options
 					}
 				};
+				const { RspackDevServer } = await import("@rspack/dev-server");
 
 				let config = await cli.loadConfig(rspackOptions);
 				config = await getPreviewConfig(config, options);

packages/rspack-cli/src/commands/serve.ts

@@ -1,5 +1,5 @@
 import type { RspackCLI } from "../rspack-cli";
-import { RspackDevServer } from "@rspack/dev-server";
+import type { RspackDevServer as RspackDevServerType } from "@rspack/dev-server";
 import { RspackCommand } from "../types";
 import {
 	commonOptions,
@@ -22,6 +22,17 @@ export class ServeCommand implements RspackCommand {
 						...options
 					}
 				};
+				/**
+				 * webpack-dev-server will set `process.env.WEBPACK_SERVE` to true
+				 * when its module is imported, so we have to lazy load the package
+				 * to make sure the envvar is not set on build mode.
+				 * when run in serve mode, we have to load the package before config
+				 * module is imported so that the envvar `process.env.WEBPACK_SERVE`
+				 * got in config module could be `true`.
+				 * related issue: https://github.com/web-infra-dev/rspack/issues/6359
+				 */
+				const { RspackDevServer } = await import("@rspack/dev-server");
+
 				const compiler = await cli.createCompiler(rspackOptions, "serve");
 				if (!compiler) return;
 				const compilers = cli.isMultipleCompiler(compiler)
@@ -32,7 +43,7 @@ export class ServeCommand implements RspackCommand {
 				);
 
 				const usedPorts: number[] = [];
-				const servers: RspackDevServer[] = [];
+				const servers: RspackDevServerType[] = [];
 
 				/**
 				 * Webpack uses an Array of compilerForDevServer,

packages/rspack-cli/tests/build/issue-6359/entry.js

@@ -0,0 +1 @@
+log(DEFINE_ME);

packages/rspack-cli/tests/build/issue-6359/index.test.ts

@@ -0,0 +1,16 @@
+import { readFile, run, runWatch } from "../../utils/test-utils";
+import { resolve } from "path";
+
+it("should not have `process.env.WEBPACK_SERVE` set on build mode", async () => {
+	await run(__dirname, []);
+	const mainJs = await readFile(resolve(__dirname, "dist/main.js"), "utf-8");
+
+	expect(mainJs).toContain("WEBPACK_SERVE=<EMPTY>");
+});
+
+it("should have `process.env.WEBPACK_SERVE` set on serve mode", async () => {
+	await runWatch(__dirname, ["serve"], { killString: /rspack compiled/i });
+	const mainJs = await readFile(resolve(__dirname, "dist/main.js"), "utf-8");
+
+	expect(mainJs).toContain("WEBPACK_SERVE=true");
+});

packages/rspack-cli/tests/build/issue-6359/rspack.config.js

@@ -0,0 +1,22 @@
+const { WEBPACK_SERVE } = process.env;
+module.exports = /** @type {import('@rspack/cli').Configuration} */ {
+	mode: "production",
+	entry: "./entry.js",
+	output: { clean: true },
+	plugins: [
+		{
+			apply(compiler) {
+				new compiler.webpack.DefinePlugin({
+					DEFINE_ME: JSON.stringify(
+						`WEBPACK_SERVE=${WEBPACK_SERVE ?? "<EMPTY>"}`
+					)
+				}).apply(compiler);
+			}
+		}
+	],
+	devServer: {
+		devMiddleware: {
+			writeToDisk: true
+		}
+	}
+};