feat: export HMR plugin

crates/node_binding/binding.d.ts

@@ -129,6 +129,7 @@ export const enum BuiltinPluginName {
   CommonJsChunkFormatPlugin = 'CommonJsChunkFormatPlugin',
   ArrayPushCallbackChunkFormatPlugin = 'ArrayPushCallbackChunkFormatPlugin',
   ModuleChunkFormatPlugin = 'ModuleChunkFormatPlugin',
+  HotModuleReplacementPlugin = 'HotModuleReplacementPlugin',
   HttpExternalsRspackPlugin = 'HttpExternalsRspackPlugin',
   CopyRspackPlugin = 'CopyRspackPlugin',
   HtmlRspackPlugin = 'HtmlRspackPlugin',

crates/rspack_binding_options/src/options/mod.rs

@@ -125,9 +125,6 @@ impl RawOptionsApply for RawOptions {
       .boxed(),
     );
     plugins.push(rspack_plugin_json::JsonPlugin {}.boxed());
-    if dev_server.hot {
-      plugins.push(rspack_plugin_hmr::HotModuleReplacementPlugin {}.boxed());
-    }
     plugins.push(rspack_plugin_runtime::RuntimePlugin {}.boxed());
     if experiments.lazy_compilation {
       plugins.push(rspack_plugin_runtime::LazyCompilationPlugin {}.boxed());

crates/rspack_binding_options/src/options/raw_builtins/mod.rs

@@ -19,6 +19,7 @@ use rspack_plugin_entry::EntryPlugin;
 use rspack_plugin_externals::{
   electron_target_plugin, http_externals_rspack_plugin, node_target_plugin, ExternalsPlugin,
 };
+use rspack_plugin_hmr::HotModuleReplacementPlugin;
 use rspack_plugin_html::HtmlRspackPlugin;
 use rspack_plugin_library::enable_library_plugin;
 use rspack_plugin_progress::ProgressPlugin;
@@ -58,6 +59,7 @@ pub enum BuiltinPluginName {
   CommonJsChunkFormatPlugin,
   ArrayPushCallbackChunkFormatPlugin,
   ModuleChunkFormatPlugin,
+  HotModuleReplacementPlugin,
 
   // rspack specific plugins
   HttpExternalsRspackPlugin,
@@ -148,6 +150,9 @@ impl RawOptionsApply for BuiltinPlugin {
       BuiltinPluginName::ModuleChunkFormatPlugin => {
         plugins.push(ModuleChunkFormatPlugin.boxed());
       }
+      BuiltinPluginName::HotModuleReplacementPlugin => {
+        plugins.push(HotModuleReplacementPlugin.boxed());
+      }
 
       // rspack specific plugins
       BuiltinPluginName::HttpExternalsRspackPlugin => {

packages/playground/fixtures/index.ts

@@ -5,7 +5,8 @@ import { fileActionFixtures } from "./fileAction";
 
 const test = base
 	.extend(pathInfoFixtures)
-	.extend(rspackFixtures)
+	.extend(rspackFixtures(true))
+	.extend(rspackFixtures(false))
 	.extend(fileActionFixtures);
 
 export type { RspackOptions };

packages/playground/fixtures/rspack.ts

@@ -2,16 +2,18 @@ import path from "path";
 import { Fixtures, PlaywrightTestArgs } from "@playwright/test";
 import { Compiler, Configuration, createCompiler } from "@rspack/core";
 import { RspackDevServer } from "@rspack/dev-server";
+import WebpackDevServer from "webpack-dev-server";
 import type { PathInfoFixtures } from "./pathInfo";
 import { sleep } from "@/utils/sleep";
 
 class Rspack {
 	projectDir: string;
 	compiler: Compiler;
-	devServer: RspackDevServer;
+	devServer: RspackDevServer | WebpackDevServer;
 	private onDone: Array<() => void> = [];
 	constructor(
 		projectDir: string,
+		wds: boolean,
 		handleRspackConfig: (config: Configuration) => Configuration
 	) {
 		const configPath = path.resolve(projectDir, "rspack.config.js");
@@ -28,7 +30,8 @@ class Rspack {
 				item();
 			}
 		});
-		this.devServer = new RspackDevServer(
+		const DevServerConstructor = wds ? WebpackDevServer : RspackDevServer;
+		this.devServer = new DevServerConstructor(
 			compiler.options.devServer ?? {},
 			compiler
 		);
@@ -79,84 +82,88 @@ type RspackWorkerFixtures = {
 	) => Promise<Rspack>;
 };
 
-export const rspackFixtures: Fixtures<
+export const rspackFixtures = (
+	wds: boolean
+): Fixtures<
 	RspackOptions & RspackFixtures,
 	RspackWorkerFixtures,
 	PlaywrightTestArgs & PathInfoFixtures
-> = {
-	defaultRspackConfig: [{ handleConfig: c => c }, { option: true }],
-	rspack: [
-		async (
-			{ page, pathInfo, _startRspackServer, defaultRspackConfig },
-			use
-		) => {
-			const rspack = await _startRspackServer(
-				pathInfo.testFile,
-				pathInfo.tempProjectDir,
-				defaultRspackConfig.handleConfig
-			);
-			const port = rspack.devServer.options.port;
-			await rspack.waitingForBuild();
-			await page.goto(`http://localhost:${port}`);
-			await use(rspack);
-		},
-		{
-			auto: true
-		}
-	],
+> => {
+	return {
+		defaultRspackConfig: [{ handleConfig: c => c }, { option: true }],
+		rspack: [
+			async (
+				{ page, pathInfo, _startRspackServer, defaultRspackConfig },
+				use
+			) => {
+				const rspack = await _startRspackServer(
+					pathInfo.testFile,
+					pathInfo.tempProjectDir,
+					defaultRspackConfig.handleConfig
+				);
+				const port = rspack.devServer.options.port;
+				await rspack.waitingForBuild();
+				await page.goto(`http://localhost:${port}`);
+				await use(rspack);
+			},
+			{
+				auto: true
+			}
+		],
 
-	_startRspackServer: [
-		async ({}, use, { workerIndex }) => {
-			let currentTestFile = "";
-			let rspack: Rspack | null = null as any;
-			await use(async function (testFile, projectDir, handleRspackConfig) {
-				if (rspack && currentTestFile !== testFile) {
-					await rspack.devServer.stop();
-					rspack = null;
-					currentTestFile = testFile;
-				}
-				if (!rspack) {
-					const port = 8000 + workerIndex;
-					rspack = new Rspack(projectDir, function (config) {
-						// rewrite port
-						if (!config.devServer) {
-							config.devServer = {};
-						}
-						config.devServer.port = port;
+		_startRspackServer: [
+			async ({}, use, { workerIndex }) => {
+				let currentTestFile = "";
+				let rspack: Rspack | null = null as any;
+				await use(async function (testFile, projectDir, handleRspackConfig) {
+					if (rspack && currentTestFile !== testFile) {
+						await rspack.devServer.stop();
+						rspack = null;
+						currentTestFile = testFile;
+					}
+					if (!rspack) {
+						const port = 8000 + workerIndex;
+						rspack = new Rspack(projectDir, wds, function (config) {
+							// rewrite port
+							if (!config.devServer) {
+								config.devServer = {};
+							}
+							config.devServer.port = port;
 
-						// set default context
-						if (!config.context) {
-							config.context = projectDir;
-						}
+							// set default context
+							if (!config.context) {
+								config.context = projectDir;
+							}
 
-						// set default define
-						if (!config.builtins) {
-							config.builtins = {};
-						}
-						config.builtins.define = Object.assign(
-							{
-								"process.env.NODE_ENV": JSON.stringify(
-									config.mode || "development"
-								)
-							},
-							config.builtins.define
-						);
+							// set default define
+							if (!config.builtins) {
+								config.builtins = {};
+							}
+							config.builtins.define = Object.assign(
+								{
+									"process.env.NODE_ENV": JSON.stringify(
+										config.mode || "development"
+									)
+								},
+								config.builtins.define
+							);
 
-						return handleRspackConfig(config);
-					});
-					await rspack.devServer.start();
-				}
+							return handleRspackConfig(config);
+						});
+						await rspack.devServer.start();
+					}
 
-				return rspack;
-			});
+					return rspack;
+				});
 
-			if (rspack?.projectDir) {
-				await rspack.devServer.stop();
+				if (rspack?.projectDir) {
+					await rspack.devServer.stop();
+				}
+			},
+			{
+				scope: "worker",
+				timeout: 60000
 			}
-		},
-		{
-			scope: "worker",
-			timeout: 60000
-		}
-	]
+		]
+	};
 };

packages/playground/package.json

@@ -14,18 +14,19 @@
   "devDependencies": {
     "@playwright/test": "1.35.0",
     "@rspack/core": "workspace:*",
-    "@rspack/plugin-react-refresh": "workspace:*",
     "@rspack/dev-client": "workspace:*",
     "@rspack/dev-server": "workspace:*",
+    "@rspack/plugin-react-refresh": "workspace:*",
     "@types/fs-extra": "11.0.1",
     "fs-extra": "11.1.1",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.3.0",
-    "ws": "8.8.1",
     "vue": "3.2.47",
-    "vue-loader": "^17.2.2"
+    "vue-loader": "^17.2.2",
+    "webpack-dev-server": "4.13.1",
+    "ws": "8.8.1"
   }
 }

packages/rspack/src/Compiler.ts

@@ -47,10 +47,6 @@ import {
 } from "./builtin-plugin";
 import { optionsApply_compat } from "./rspackOptionsApply";
 
-class HotModuleReplacementPlugin {
-	apply() {}
-}
-
 class Compiler {
 	#_instance?: binding.Rspack;
 
@@ -123,7 +119,6 @@ class Compiler {
 		this.builtinPlugins = [];
 		// to workaround some plugin access webpack, we may change dev-server to avoid this hack in the future
 		this.webpack = {
-			HotModuleReplacementPlugin, // modernjs/server will auto inject this plugin not set
 			NormalModule,
 			get sources(): typeof import("webpack-sources") {
 				return require("webpack-sources");
@@ -153,6 +148,9 @@ class Compiler {
 			get ExternalsPlugin() {
 				return require("./builtin-plugin").ExternalsPlugin;
 			},
+			get HotModuleReplacementPlugin() {
+				return require("./builtin-plugin").HotModuleReplacementPlugin;
+			},
 			get LoaderOptionsPlugin() {
 				return require("./lib/LoaderOptionsPlugin").LoaderOptionsPlugin;
 			},
@@ -161,6 +159,11 @@ class Compiler {
 			},
 			WebpackError: Error,
 			ModuleFilenameHelpers,
+			javascript: {
+				get EnableChunkLoadingPlugin() {
+					return require("./builtin-plugin").EnableChunkLoadingPlugin;
+				}
+			},
 			node: {
 				get NodeTargetPlugin() {
 					return require("./builtin-plugin").NodeTargetPlugin;

packages/rspack/src/builtin-plugin/HotModuleReplacementPlugin.ts

@@ -0,0 +1,6 @@
+import { BuiltinPluginName, create } from "./base";
+
+export const HotModuleReplacementPlugin = create(
+	BuiltinPluginName.HotModuleReplacementPlugin,
+	() => undefined
+);

packages/rspack/src/builtin-plugin/base.ts

@@ -17,6 +17,7 @@ export enum BuiltinPluginName {
 	CommonJsChunkFormatPlugin = "CommonJsChunkFormatPlugin",
 	ArrayPushCallbackChunkFormatPlugin = "ArrayPushCallbackChunkFormatPlugin",
 	ModuleChunkFormatPlugin = "ModuleChunkFormatPlugin",
+	HotModuleReplacementPlugin = "HotModuleReplacementPlugin",
 	HttpExternalsRspackPlugin = "HttpExternalsRspackPlugin",
 	CopyRspackPlugin = "CopyRspackPlugin",
 	HtmlRspackPlugin = "HtmlRspackPlugin",

packages/rspack/src/builtin-plugin/index.ts

@@ -15,6 +15,7 @@ export * from "./EnableWasmLoadingPlugin";
 export * from "./ArrayPushCallbackChunkFormatPlugin";
 export * from "./CommonJsChunkFormatPlugin";
 export * from "./ModuleChunkFormatPlugin";
+export * from "./HotModuleReplacementPlugin";
 
 export * from "./HtmlRspackPlugin";
 export * from "./CopyRspackPlugin";

packages/rspack/src/index.ts

@@ -33,7 +33,8 @@ export {
 	CopyRspackPlugin,
 	EntryPlugin,
 	ExternalsPlugin,
-	EnableChunkLoadingPlugin
+	EnableChunkLoadingPlugin,
+	HotModuleReplacementPlugin
 } from "./builtin-plugin";
 export type {
 	BannerPluginArgument,

packages/rspack/src/rspackOptionsApply.ts

@@ -135,6 +135,10 @@ export function optionsApply_compat(
 			compiler.context,
 			options.entry
 		);
+
+		if (options.devServer?.hot) {
+			new compiler.webpack.HotModuleReplacementPlugin().apply(compiler);
+		}
 	}
 }
 

packages/rspack/tests/HotTestCases.template.ts

@@ -4,7 +4,12 @@ import vm from "vm";
 import rimraf from "rimraf";
 import checkArrayExpectation from "./checkArrayExpectation";
 import createLazyTestEnv from "./helpers/createLazyTestEnv";
-import { Compiler, rspack, Stats } from "@rspack/core";
+import {
+	Compiler,
+	rspack,
+	Stats,
+	HotModuleReplacementPlugin
+} from "@rspack/core";
 
 export function describeCases(config: {
 	name: string;
@@ -460,5 +465,8 @@ function getOptions(
 		...options.devServer,
 		hot
 	};
+	if (hot) {
+		options.plugins.push(new HotModuleReplacementPlugin());
+	}
 	return options;
 }