diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dcc08bb54..226e5d226 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3364,6 +3364,9 @@ importers:
       terser-webpack-plugin:
         specifier: 5.3.16
         version: 5.3.16(webpack@5.104.1)
+      webpack-stats-plugin:
+        specifier: ^1.1.3
+        version: 1.1.3
 
   rspack/treeshaking-transform-imports:
     devDependencies:
diff --git a/rsdoctor/rspack/rspack.config.js b/rsdoctor/rspack/rspack.config.mjs
similarity index 80%
rename from rsdoctor/rspack/rspack.config.js
rename to rsdoctor/rspack/rspack.config.mjs
index da9f38780..7c1b1afb4 100644
--- a/rsdoctor/rspack/rspack.config.js
+++ b/rsdoctor/rspack/rspack.config.mjs
@@ -1,9 +1,10 @@
-const { rspack } = require('@rspack/core');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
-const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
+// @ts-check
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
-/** @type {import('@rspack/cli').Configuration} */
-module.exports = {
+export default defineConfig({
   entry: {
     main: './src/index.tsx',
   },
@@ -54,4 +55,4 @@ module.exports = {
   experiments: {
     css: true,
   },
-};
+});
diff --git a/rspack/basic-ts/rspack.config.mjs b/rspack/basic-ts/rspack.config.mjs
index 8403c1e4f..dc5d01360 100644
--- a/rspack/basic-ts/rspack.config.mjs
+++ b/rspack/basic-ts/rspack.config.mjs
@@ -1,16 +1,13 @@
 // @ts-check
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 import { defineConfig } from '@rspack/cli';
 import { rspack } from '@rspack/core';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
 export default defineConfig({
   entry: './src/index.ts',
   resolve: {
     tsConfig: {
-      configFile: path.resolve(__dirname, 'tsconfig.json'),
+      configFile: path.resolve(import.meta.dirname, 'tsconfig.json'),
     },
     extensions: ['...', '.ts'],
   },
diff --git a/rspack/builtin-swc-loader/rspack.config.mjs b/rspack/builtin-swc-loader/rspack.config.mjs
index ac05e6abe..73696a6e0 100644
--- a/rspack/builtin-swc-loader/rspack.config.mjs
+++ b/rspack/builtin-swc-loader/rspack.config.mjs
@@ -1,13 +1,9 @@
 // @ts-check
-
-import { createRequire } from 'node:module';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { defineConfig } from '@rspack/cli';
 import { rspack } from '@rspack/core';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const require = createRequire(import.meta.url);
 const isProduction = process.env.NODE_ENV === 'production';
 
 export default defineConfig({
@@ -17,7 +13,7 @@ export default defineConfig({
   resolve: {
     extensions: ['...', '.jsx'],
     alias: {
-      '@swc/helpers': path.dirname(require.resolve('@swc/helpers/package.json')),
+      '@swc/helpers': path.dirname(fileURLToPath(import.meta.resolve('@swc/helpers/package.json'))),
     },
   },
   module: {
@@ -56,7 +52,7 @@ export default defineConfig({
                   [
                     '@swc/plugin-relay',
                     {
-                      rootDir: __dirname,
+                      rootDir: import.meta.dirname,
                       artifactDirectory: 'src/__generated__',
                       language: 'typescript',
                     },
diff --git a/rspack/cra-ts/rspack.config.js b/rspack/cra-ts/rspack.config.mjs
similarity index 83%
rename from rspack/cra-ts/rspack.config.js
rename to rspack/cra-ts/rspack.config.mjs
index b5e7553a4..ee9997d56 100644
--- a/rspack/cra-ts/rspack.config.js
+++ b/rspack/cra-ts/rspack.config.mjs
@@ -1,7 +1,9 @@
-const { rspack } = require('@rspack/core');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
+
+export default defineConfig({
   entry: {
     main: './src/index.tsx',
   },
@@ -55,5 +57,4 @@ const config = {
       ],
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/cra/rspack.config.js b/rspack/cra/rspack.config.mjs
similarity index 83%
rename from rspack/cra/rspack.config.js
rename to rspack/cra/rspack.config.mjs
index fb3085a8e..8eb679f6d 100644
--- a/rspack/cra/rspack.config.js
+++ b/rspack/cra/rspack.config.mjs
@@ -1,8 +1,9 @@
-const { rspack } = require('@rspack/core');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   entry: {
     main: './src/index.jsx',
   },
@@ -56,5 +57,4 @@ const config = {
       ],
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/css-chunking-plugin/rspack.config.js b/rspack/css-chunking-plugin/rspack.config.mjs
similarity index 79%
rename from rspack/css-chunking-plugin/rspack.config.js
rename to rspack/css-chunking-plugin/rspack.config.mjs
index 4c3e37c7e..64301b4bc 100644
--- a/rspack/css-chunking-plugin/rspack.config.js
+++ b/rspack/css-chunking-plugin/rspack.config.mjs
@@ -1,7 +1,8 @@
-const { rspack } = require('@rspack/core');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   entry: './src/index.js',
   module: {
     rules: [
@@ -27,6 +28,4 @@ const config = {
       minSize: 0,
     },
   },
-};
-
-module.exports = config;
+});
diff --git a/rspack/css-parser-generator-options/rspack.config.js b/rspack/css-parser-generator-options/rspack.config.mjs
similarity index 75%
rename from rspack/css-parser-generator-options/rspack.config.js
rename to rspack/css-parser-generator-options/rspack.config.mjs
index 2f603e946..f67048ab7 100644
--- a/rspack/css-parser-generator-options/rspack.config.js
+++ b/rspack/css-parser-generator-options/rspack.config.mjs
@@ -1,8 +1,9 @@
-const path = require('path');
-const { rspack } = require('@rspack/core');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   entry: './src/index.js',
   module: {
     parser: {
@@ -19,12 +20,12 @@ const config = {
     rules: [
       {
         test: /\.css$/,
-        exclude: path.resolve(__dirname, 'src/legacy'),
+        exclude: path.resolve(import.meta.dirname, 'src/legacy'),
         type: 'css/auto',
       },
       {
         // files in src/legacy and ends with .css will be CSS Modules
-        include: path.resolve(__dirname, 'src/legacy'),
+        include: path.resolve(import.meta.dirname, 'src/legacy'),
         test: /\.css$/,
         type: 'css/module',
         parser: {
@@ -47,6 +48,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-
-module.exports = config;
+});
diff --git a/rspack/dll-reference/rspack.config.js b/rspack/dll-reference/rspack.config.js
deleted file mode 100644
index d2bc61082..000000000
--- a/rspack/dll-reference/rspack.config.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const { rspack } = require('@rspack/core');
-const path = require('node:path');
-
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  entry: './index',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-  },
-  resolve: {
-    extensions: ['...', '.ts', '.tsx', '.js', '.jsx'],
-  },
-  plugins: [
-    new rspack.DllReferencePlugin({
-      manifest: path.resolve(__dirname, '../dll/dist/alpha.manifest.json'),
-      extensions: ['.js', '.ts'],
-    }),
-    new rspack.DllReferencePlugin({
-      manifest: path.resolve(__dirname, '../dll/dist/beta.manifest.json'),
-      scope: 'beta',
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    }),
-  ],
-  mode: 'development',
-};
-
-module.exports = config;
diff --git a/rspack/dll-reference/rspack.config.mjs b/rspack/dll-reference/rspack.config.mjs
new file mode 100644
index 000000000..f2b8868b3
--- /dev/null
+++ b/rspack/dll-reference/rspack.config.mjs
@@ -0,0 +1,26 @@
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  entry: './index',
+  output: {
+    path: path.resolve(import.meta.dirname, 'dist'),
+  },
+  resolve: {
+    extensions: ['...', '.ts', '.tsx', '.js', '.jsx'],
+  },
+  plugins: [
+    new rspack.DllReferencePlugin({
+      manifest: path.resolve(import.meta.dirname, '../dll/dist/alpha.manifest.json'),
+      extensions: ['.js', '.ts'],
+    }),
+    new rspack.DllReferencePlugin({
+      manifest: path.resolve(import.meta.dirname, '../dll/dist/beta.manifest.json'),
+      scope: 'beta',
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    }),
+  ],
+  mode: 'development',
+});
diff --git a/rspack/dll/rspack.config.js b/rspack/dll/rspack.config.mjs
similarity index 53%
rename from rspack/dll/rspack.config.js
rename to rspack/dll/rspack.config.mjs
index c102d6714..270f88434 100644
--- a/rspack/dll/rspack.config.js
+++ b/rspack/dll/rspack.config.mjs
@@ -1,8 +1,9 @@
-const { rspack } = require('@rspack/core');
-const path = require('node:path');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.js', '.jsx'],
   },
@@ -11,16 +12,14 @@ const config = {
     beta: ['./beta', './b', './c'],
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(import.meta.dirname, 'dist'),
     filename: '[name].dll.js',
     library: '[name]_dll_lib',
   },
   plugins: [
     new rspack.DllPlugin({
-      path: path.join(__dirname, 'dist', '[name].manifest.json'),
+      path: path.join(import.meta.dirname, 'dist', '[name].manifest.json'),
       name: '[name]_dll_lib',
     }),
   ],
-};
-
-module.exports = config;
+});
diff --git a/rspack/emotion/rspack.config.js b/rspack/emotion/rspack.config.mjs
similarity index 84%
rename from rspack/emotion/rspack.config.js
rename to rspack/emotion/rspack.config.mjs
index f2fa629d4..57bb8eaad 100644
--- a/rspack/emotion/rspack.config.js
+++ b/rspack/emotion/rspack.config.mjs
@@ -1,6 +1,8 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
   entry: {
     main: './src/index.jsx',
   },
@@ -36,5 +38,4 @@ const config = {
       },
     ],
   },
-};
-module.exports = config;
+});
diff --git a/rspack/eslint/package.json b/rspack/eslint/package.json
index d7281f653..f914559eb 100644
--- a/rspack/eslint/package.json
+++ b/rspack/eslint/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "rspack build",
     "dev": "rspack serve -c",
-    "dev:loader": "rspack serve -c rspack.config.loader.js"
+    "dev:loader": "rspack serve -c rspack.config.loader.mjs"
   },
   "devDependencies": {
     "@rspack/cli": "2.0.0-rc.1",
diff --git a/rspack/eslint/rspack.config.js b/rspack/eslint/rspack.config.js
deleted file mode 100644
index 04de68dc4..000000000
--- a/rspack/eslint/rspack.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const EslintPlugin = require('eslint-rspack-plugin');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
-  entry: {
-    main: './src/index.js',
-  },
-  plugins: [new EslintPlugin()],
-};
-module.exports = config;
diff --git a/rspack/eslint/rspack.config.loader.js b/rspack/eslint/rspack.config.loader.mjs
similarity index 68%
rename from rspack/eslint/rspack.config.loader.js
rename to rspack/eslint/rspack.config.loader.mjs
index 122f793b8..c6b1767ef 100644
--- a/rspack/eslint/rspack.config.loader.js
+++ b/rspack/eslint/rspack.config.loader.mjs
@@ -1,6 +1,8 @@
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/index.js',
   },
@@ -18,5 +20,4 @@ const config = {
       },
     ],
   },
-};
-module.exports = config;
+});
diff --git a/rspack/eslint/rspack.config.mjs b/rspack/eslint/rspack.config.mjs
new file mode 100644
index 000000000..fca9bd90c
--- /dev/null
+++ b/rspack/eslint/rspack.config.mjs
@@ -0,0 +1,11 @@
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import EslintPlugin from 'eslint-rspack-plugin';
+
+export default defineConfig({
+  context: import.meta.dirname,
+  entry: {
+    main: './src/index.js',
+  },
+  plugins: [new EslintPlugin()],
+});
diff --git a/rspack/express/rspack.config.js b/rspack/express/rspack.config.mjs
similarity index 80%
rename from rspack/express/rspack.config.js
rename to rspack/express/rspack.config.mjs
index 984490fca..627f6d693 100644
--- a/rspack/express/rspack.config.js
+++ b/rspack/express/rspack.config.mjs
@@ -1,8 +1,9 @@
-const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { RunScriptWebpackPlugin } from 'run-script-webpack-plugin';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+export default defineConfig({
+  context: import.meta.dirname,
   target: 'node',
   entry: {
     main: ['@rspack/core/hot/poll?100', './src/main.ts'],
@@ -44,5 +45,4 @@ const config = {
       writeToDisk: true,
     },
   },
-};
-module.exports = config;
+});
diff --git a/rspack/extract-license/rspack.config.js b/rspack/extract-license/rspack.config.mjs
similarity index 57%
rename from rspack/extract-license/rspack.config.js
rename to rspack/extract-license/rspack.config.mjs
index 6de7fa559..f63b52f65 100644
--- a/rspack/extract-license/rspack.config.js
+++ b/rspack/extract-license/rspack.config.mjs
@@ -1,7 +1,9 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/index.js',
   },
@@ -13,5 +15,4 @@ const config = {
       extractComments: true,
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/generate-package-json-webpack-plugin/rspack.config.js b/rspack/generate-package-json-webpack-plugin/rspack.config.mjs
similarity index 53%
rename from rspack/generate-package-json-webpack-plugin/rspack.config.js
rename to rspack/generate-package-json-webpack-plugin/rspack.config.mjs
index c7f97ec88..d7c6cb9f7 100644
--- a/rspack/generate-package-json-webpack-plugin/rspack.config.js
+++ b/rspack/generate-package-json-webpack-plugin/rspack.config.mjs
@@ -1,5 +1,6 @@
-const { defineConfig } = require('@rspack/cli');
-const GeneratePackageJsonPlugin = require('generate-package-json-webpack-plugin');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import GeneratePackageJsonPlugin from 'generate-package-json-webpack-plugin';
 
 const basePackage = {
   name: 'my-module',
@@ -10,6 +11,6 @@ const basePackage = {
   },
 };
 
-module.exports = defineConfig({
+export default defineConfig({
   plugins: [new GeneratePackageJsonPlugin(basePackage, {})],
 });
diff --git a/rspack/hooks-after-resolve/rspack.config.js b/rspack/hooks-after-resolve/rspack.config.mjs
similarity index 77%
rename from rspack/hooks-after-resolve/rspack.config.js
rename to rspack/hooks-after-resolve/rspack.config.mjs
index a4d29dc57..9646110ac 100644
--- a/rspack/hooks-after-resolve/rspack.config.js
+++ b/rspack/hooks-after-resolve/rspack.config.mjs
@@ -1,6 +1,8 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
   entry: './src/index.js',
   plugins: [
     new rspack.HtmlRspackPlugin({
@@ -20,5 +22,4 @@ const config = {
       },
     },
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/html-webpack-plugin/rspack.config.js b/rspack/html-webpack-plugin/rspack.config.js
deleted file mode 100644
index f3762b2e8..000000000
--- a/rspack/html-webpack-plugin/rspack.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const { defineConfig } = require('@rspack/cli');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = defineConfig({
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './index.html',
-    }),
-  ],
-});
diff --git a/rspack/html-webpack-plugin/rspack.config.mjs b/rspack/html-webpack-plugin/rspack.config.mjs
new file mode 100644
index 000000000..6f9f83359
--- /dev/null
+++ b/rspack/html-webpack-plugin/rspack.config.mjs
@@ -0,0 +1,11 @@
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
+export default defineConfig({
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html',
+    }),
+  ],
+});
diff --git a/rspack/inline-const-enum/rspack.config.mjs b/rspack/inline-const-enum/rspack.config.mjs
index a71343b05..48d56ca2e 100644
--- a/rspack/inline-const-enum/rspack.config.mjs
+++ b/rspack/inline-const-enum/rspack.config.mjs
@@ -1,7 +1,8 @@
 // @ts-check
-
+import { defineConfig } from '@rspack/cli';
 /** @type {import("@rspack/core").Configuration} */
-export default {
+
+export default defineConfig({
   entry: {
     main: './src/index.ts',
   },
@@ -38,4 +39,4 @@ export default {
       },
     ],
   },
-};
+});
diff --git a/rspack/inline-const/rspack.config.mjs b/rspack/inline-const/rspack.config.mjs
index fd209f6b6..6136c9a56 100644
--- a/rspack/inline-const/rspack.config.mjs
+++ b/rspack/inline-const/rspack.config.mjs
@@ -1,8 +1,10 @@
 // @ts-check
+import { defineConfig } from '@rspack/cli';
 import { rspack } from '@rspack/core';
 
 /** @type {import("@rspack/core").Configuration} */
-export default {
+
+export default defineConfig({
   entry: {
     main: './src/index.ts',
   },
@@ -39,4 +41,4 @@ export default {
       },
     ],
   },
-};
+});
diff --git a/rspack/inline-enum/rspack.config.mjs b/rspack/inline-enum/rspack.config.mjs
index bf8499805..779cf17c8 100644
--- a/rspack/inline-enum/rspack.config.mjs
+++ b/rspack/inline-enum/rspack.config.mjs
@@ -1,7 +1,8 @@
 // @ts-check
-
+import { defineConfig } from '@rspack/cli';
 /** @type {import("@rspack/core").Configuration} */
-export default {
+
+export default defineConfig({
   entry: {
     main: './src/index.ts',
   },
@@ -33,4 +34,4 @@ export default {
       },
     ],
   },
-};
+});
diff --git a/rspack/library-cjs/rspack.config.mjs b/rspack/library-cjs/rspack.config.mjs
index b540de24b..8c67a476e 100644
--- a/rspack/library-cjs/rspack.config.mjs
+++ b/rspack/library-cjs/rspack.config.mjs
@@ -1,18 +1,19 @@
-import { defineConfig } from "@rspack/cli";
+// @ts-check
+import { defineConfig } from '@rspack/cli';
 
 export default defineConfig({
-  mode: "production",
+  mode: 'production',
   entry: {
-    index: "./src/index.js",
+    index: './src/index.js',
   },
-  externalsType: "commonjs",
+  externalsType: 'commonjs',
   output: {
-    chunkFormat: "commonjs",
+    chunkFormat: 'commonjs',
     library: {
-      type: "commonjs",
+      type: 'commonjs',
     },
   },
   optimization: {
     minimize: false, // no need to minify for library
-  }
+  },
 });
diff --git a/rspack/library-esm/rspack.config.mjs b/rspack/library-esm/rspack.config.mjs
index 7922023a6..bf529946e 100644
--- a/rspack/library-esm/rspack.config.mjs
+++ b/rspack/library-esm/rspack.config.mjs
@@ -1,3 +1,4 @@
+// @ts-check
 import { defineConfig } from '@rspack/cli';
 
 export default defineConfig({
diff --git a/rspack/library-umd/rspack.config.mjs b/rspack/library-umd/rspack.config.mjs
index 7c2a6a47a..3cd3a9bbc 100644
--- a/rspack/library-umd/rspack.config.mjs
+++ b/rspack/library-umd/rspack.config.mjs
@@ -1,14 +1,15 @@
-import { defineConfig } from "@rspack/cli";
+// @ts-check
+import { defineConfig } from '@rspack/cli';
 
 export default defineConfig({
-  mode: "production",
+  mode: 'production',
   entry: {
-    index: "./src/index.js",
+    index: './src/index.js',
   },
   output: {
     library: {
-      type: "umd",
-      name: 'rspack_library'
+      type: 'umd',
+      name: 'rspack_library',
     },
   },
   optimization: {
diff --git a/rspack/license-webpack-plugin/rspack.config.js b/rspack/license-webpack-plugin/rspack.config.mjs
similarity index 85%
rename from rspack/license-webpack-plugin/rspack.config.js
rename to rspack/license-webpack-plugin/rspack.config.mjs
index 8ddf70416..16d100694 100644
--- a/rspack/license-webpack-plugin/rspack.config.js
+++ b/rspack/license-webpack-plugin/rspack.config.mjs
@@ -1,7 +1,8 @@
-const { defineConfig } = require('@rspack/cli');
-const { LicenseWebpackPlugin } = require('license-webpack-plugin');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { LicenseWebpackPlugin } from 'license-webpack-plugin';
 
-module.exports = defineConfig({
+export default defineConfig({
   entry: {
     main: './src/index.jsx',
   },
diff --git a/rspack/lightingcss-loader/rspack.config.js b/rspack/lightingcss-loader/rspack.config.mjs
similarity index 76%
rename from rspack/lightingcss-loader/rspack.config.js
rename to rspack/lightingcss-loader/rspack.config.mjs
index ceafc3ae2..6eee2e53c 100644
--- a/rspack/lightingcss-loader/rspack.config.js
+++ b/rspack/lightingcss-loader/rspack.config.mjs
@@ -1,6 +1,8 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
   entry: './src/index.js',
   module: {
     rules: [
@@ -24,5 +26,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/loader-compat/rspack.config.js b/rspack/loader-compat/rspack.config.mjs
similarity index 95%
rename from rspack/loader-compat/rspack.config.js
rename to rspack/loader-compat/rspack.config.mjs
index 710437caf..736d92b31 100644
--- a/rspack/loader-compat/rspack.config.js
+++ b/rspack/loader-compat/rspack.config.mjs
@@ -1,5 +1,7 @@
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+
+export default defineConfig({
   mode: 'none',
   entry: {
     main: './src/index.js',
@@ -114,5 +116,4 @@ const config = {
       },
     ],
   },
-};
-module.exports = config;
+});
diff --git a/rspack/minify-test/rspack.config.js b/rspack/minify-test/rspack.config.mjs
similarity index 70%
rename from rspack/minify-test/rspack.config.js
rename to rspack/minify-test/rspack.config.mjs
index 785072538..0bbfb6991 100644
--- a/rspack/minify-test/rspack.config.js
+++ b/rspack/minify-test/rspack.config.mjs
@@ -1,9 +1,12 @@
-const { rspack } = require('../../packages/rspack');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '../../packages/rspack';
 
 /**
  * @type {import("@rspack/core").Configuration}
  */
-module.exports = {
+
+export default defineConfig({
   target: 'node',
   devtool: false,
   entry: {
@@ -21,4 +24,4 @@ module.exports = {
       exclude: [/a\.js/],
     }),
   ],
-};
+});
diff --git a/rspack/module-federation-v1.5/app/rspack.config.js b/rspack/module-federation-v1.5/app/rspack.config.mjs
similarity index 82%
rename from rspack/module-federation-v1.5/app/rspack.config.js
rename to rspack/module-federation-v1.5/app/rspack.config.mjs
index 2e83696c2..3db2be38b 100644
--- a/rspack/module-federation-v1.5/app/rspack.config.js
+++ b/rspack/module-federation-v1.5/app/rspack.config.mjs
@@ -1,14 +1,17 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
-const { rspack } = require('@rspack/core');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
 /** @type {import('@rspack/core').Configuration} */
-module.exports = {
+
+export default defineConfig({
   entry: './src/index.js',
-  context: __dirname,
+  context: import.meta.dirname,
   output: {
     // set uniqueName explicitly to make react-refresh works
     uniqueName: 'app',
@@ -17,7 +20,7 @@ module.exports = {
     rules: [
       {
         test: /\.(?:js|mjs|cjs|jsx)$/,
-        include: path.resolve(__dirname, 'src'),
+        include: path.resolve(import.meta.dirname, 'src'),
         use: {
           loader: 'builtin:swc-loader',
           options: {
@@ -65,4 +68,4 @@ module.exports = {
   devServer: {
     port: 8080,
   },
-};
+});
diff --git a/rspack/module-federation-v1.5/lib1/rspack.config.js b/rspack/module-federation-v1.5/lib1/rspack.config.mjs
similarity index 80%
rename from rspack/module-federation-v1.5/lib1/rspack.config.js
rename to rspack/module-federation-v1.5/lib1/rspack.config.mjs
index 2fc4e82a1..5716abb38 100644
--- a/rspack/module-federation-v1.5/lib1/rspack.config.js
+++ b/rspack/module-federation-v1.5/lib1/rspack.config.mjs
@@ -1,14 +1,17 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
-const { rspack } = require('@rspack/core');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
 /** @type {import('@rspack/core').Configuration} */
-module.exports = {
+
+export default defineConfig({
   entry: './src/index.js',
-  context: __dirname,
+  context: import.meta.dirname,
   output: {
     // set uniqueName explicitly to make react-refresh works
     uniqueName: 'lib1',
@@ -17,7 +20,7 @@ module.exports = {
     rules: [
       {
         test: /\.(?:js|mjs|cjs|jsx)$/,
-        include: path.resolve(__dirname, 'src'),
+        include: path.resolve(import.meta.dirname, 'src'),
         use: {
           loader: 'builtin:swc-loader',
           options: {
@@ -68,4 +71,4 @@ module.exports = {
       'Access-Control-Allow-Origin': '*',
     },
   },
-};
+});
diff --git a/rspack/module-federation-v1.5/lib2/rspack.config.js b/rspack/module-federation-v1.5/lib2/rspack.config.mjs
similarity index 83%
rename from rspack/module-federation-v1.5/lib2/rspack.config.js
rename to rspack/module-federation-v1.5/lib2/rspack.config.mjs
index 52c5d741f..51f2c571e 100644
--- a/rspack/module-federation-v1.5/lib2/rspack.config.js
+++ b/rspack/module-federation-v1.5/lib2/rspack.config.mjs
@@ -1,13 +1,16 @@
-const path = require('path');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
-const { rspack } = require('@rspack/core');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
 /** @type {import('@rspack/core').Configuration} */
-module.exports = {
+
+export default defineConfig({
   entry: {},
-  context: __dirname,
+  context: import.meta.dirname,
   output: {
     // set uniqueName explicitly to make react-refresh works
     uniqueName: 'lib2',
@@ -16,7 +19,7 @@ module.exports = {
     rules: [
       {
         test: /\.(?:js|mjs|cjs|jsx)$/,
-        include: path.resolve(__dirname, 'src'),
+        include: path.resolve(import.meta.dirname, 'src'),
         use: {
           loader: 'builtin:swc-loader',
           options: {
@@ -69,4 +72,4 @@ module.exports = {
       'Access-Control-Allow-Origin': '*',
     },
   },
-};
+});
diff --git a/rspack/module-federation-v1/app/rspack.config.js b/rspack/module-federation-v1/app/rspack.config.mjs
similarity index 81%
rename from rspack/module-federation-v1/app/rspack.config.js
rename to rspack/module-federation-v1/app/rspack.config.mjs
index fe2ede8fd..e3f990601 100644
--- a/rspack/module-federation-v1/app/rspack.config.js
+++ b/rspack/module-federation-v1/app/rspack.config.mjs
@@ -1,14 +1,17 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
-const { rspack } = require('@rspack/core');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
 /** @type {import('@rspack/core').Configuration} */
-module.exports = {
+
+export default defineConfig({
   entry: './src/index.js',
-  context: __dirname,
+  context: import.meta.dirname,
   output: {
     // set uniqueName explicitly to make react-refresh works
     uniqueName: 'app',
@@ -17,7 +20,7 @@ module.exports = {
     rules: [
       {
         test: /\.(?:js|mjs|cjs|jsx)$/,
-        include: path.resolve(__dirname, 'src'),
+        include: path.resolve(import.meta.dirname, 'src'),
         use: {
           loader: 'builtin:swc-loader',
           options: {
@@ -62,4 +65,4 @@ module.exports = {
   devServer: {
     port: 8080,
   },
-};
+});
diff --git a/rspack/module-federation-v1/lib1/rspack.config.js b/rspack/module-federation-v1/lib1/rspack.config.mjs
similarity index 80%
rename from rspack/module-federation-v1/lib1/rspack.config.js
rename to rspack/module-federation-v1/lib1/rspack.config.mjs
index cacf7afd3..f8868bc7c 100644
--- a/rspack/module-federation-v1/lib1/rspack.config.js
+++ b/rspack/module-federation-v1/lib1/rspack.config.mjs
@@ -1,14 +1,17 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
-const { rspack } = require('@rspack/core');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
 /** @type {import('@rspack/core').Configuration} */
-module.exports = {
+
+export default defineConfig({
   entry: './src/index.js',
-  context: __dirname,
+  context: import.meta.dirname,
   output: {
     // set uniqueName explicitly to make react-refresh works
     uniqueName: 'lib1',
@@ -17,7 +20,7 @@ module.exports = {
     rules: [
       {
         test: /\.(?:js|mjs|cjs|jsx)$/,
-        include: path.resolve(__dirname, 'src'),
+        include: path.resolve(import.meta.dirname, 'src'),
         use: {
           loader: 'builtin:swc-loader',
           options: {
@@ -68,4 +71,4 @@ module.exports = {
       'Access-Control-Allow-Origin': '*',
     },
   },
-};
+});
diff --git a/rspack/module-federation-v1/lib2/rspack.config.js b/rspack/module-federation-v1/lib2/rspack.config.mjs
similarity index 83%
rename from rspack/module-federation-v1/lib2/rspack.config.js
rename to rspack/module-federation-v1/lib2/rspack.config.mjs
index 7175b0779..68a00f447 100644
--- a/rspack/module-federation-v1/lib2/rspack.config.js
+++ b/rspack/module-federation-v1/lib2/rspack.config.mjs
@@ -1,13 +1,16 @@
-const path = require('path');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
-const { rspack } = require('@rspack/core');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
 /** @type {import('@rspack/core').Configuration} */
-module.exports = {
+
+export default defineConfig({
   entry: {},
-  context: __dirname,
+  context: import.meta.dirname,
   output: {
     // set uniqueName explicitly to make react-refresh works
     uniqueName: 'lib2',
@@ -16,7 +19,7 @@ module.exports = {
     rules: [
       {
         test: /\.(?:js|mjs|cjs|jsx)$/,
-        include: path.resolve(__dirname, 'src'),
+        include: path.resolve(import.meta.dirname, 'src'),
         use: {
           loader: 'builtin:swc-loader',
           options: {
@@ -69,4 +72,4 @@ module.exports = {
       'Access-Control-Allow-Origin': '*',
     },
   },
-};
+});
diff --git a/rspack/monaco-editor-js/rspack.config.js b/rspack/monaco-editor-js/rspack.config.mjs
similarity index 64%
rename from rspack/monaco-editor-js/rspack.config.js
rename to rspack/monaco-editor-js/rspack.config.mjs
index b4a227e39..5179c15d8 100644
--- a/rspack/monaco-editor-js/rspack.config.js
+++ b/rspack/monaco-editor-js/rspack.config.mjs
@@ -1,14 +1,16 @@
-const { rspack } = require('@rspack/core');
-const path = require('path');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
 
-module.exports = {
+export default defineConfig({
   entry: {
     app: './index.js',
   },
   output: {
     globalObject: 'self',
     filename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(import.meta.dirname, 'dist'),
   },
   module: {
     rules: [
@@ -27,4 +29,4 @@ module.exports = {
       template: './index.html',
     }),
   ],
-};
+});
diff --git a/rspack/monaco-editor-ts-react/rspack.config.js b/rspack/monaco-editor-ts-react/rspack.config.mjs
similarity index 79%
rename from rspack/monaco-editor-ts-react/rspack.config.js
rename to rspack/monaco-editor-ts-react/rspack.config.mjs
index 632a1e6b6..e151362fd 100644
--- a/rspack/monaco-editor-ts-react/rspack.config.js
+++ b/rspack/monaco-editor-ts-react/rspack.config.mjs
@@ -1,7 +1,9 @@
-const { rspack } = require('@rspack/core');
-const path = require('path');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
 
-module.exports = {
+export default defineConfig({
   entry: {
     app: './src/index.tsx',
   },
@@ -10,12 +12,12 @@ module.exports = {
   },
   resolve: {
     extensions: ['.js', '.jsx', '.tsx', '.ts'],
-    tsConfig: path.resolve(__dirname, 'tsconfig.json'),
+    tsConfig: path.resolve(import.meta.dirname, 'tsconfig.json'),
   },
   output: {
     globalObject: 'self',
     filename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(import.meta.dirname, 'dist'),
   },
   module: {
     rules: [
@@ -56,4 +58,4 @@ module.exports = {
       template: './src/index.html',
     }),
   ],
-};
+});
diff --git a/rspack/monaco-editor-webpack-plugin/rspack.config.js b/rspack/monaco-editor-webpack-plugin/rspack.config.mjs
similarity index 62%
rename from rspack/monaco-editor-webpack-plugin/rspack.config.js
rename to rspack/monaco-editor-webpack-plugin/rspack.config.mjs
index 38648c77a..e27988b69 100644
--- a/rspack/monaco-editor-webpack-plugin/rspack.config.js
+++ b/rspack/monaco-editor-webpack-plugin/rspack.config.mjs
@@ -1,15 +1,17 @@
-const path = require('path');
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const { rspack } = require('@rspack/core');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 
-module.exports = {
+export default defineConfig({
   entry: {
     app: './index.js',
   },
   output: {
     globalObject: 'self',
     filename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(import.meta.dirname, 'dist'),
   },
   module: {
     rules: [
@@ -29,4 +31,4 @@ module.exports = {
       languages: ['typescript', 'javascript', 'css'],
     }),
   ],
-};
+});
diff --git a/rspack/multi-entry/rspack.config.js b/rspack/multi-entry/rspack.config.mjs
similarity index 70%
rename from rspack/multi-entry/rspack.config.js
rename to rspack/multi-entry/rspack.config.mjs
index 436f62f7c..015ea478b 100644
--- a/rspack/multi-entry/rspack.config.js
+++ b/rspack/multi-entry/rspack.config.mjs
@@ -1,7 +1,8 @@
-const { rspack } = require('@rspack/core');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   entry: {
     index: './index.js',
     second: './second.js',
@@ -19,6 +20,4 @@ const config = {
       chunks: ['second'],
     }),
   ],
-};
-
-module.exports = config;
+});
diff --git a/rspack/nest-alias/rspack.config.js b/rspack/nest-alias/rspack.config.js
deleted file mode 100644
index e9a889187..000000000
--- a/rspack/nest-alias/rspack.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const { defineConfig } = require('@rspack/cli');
-const path = require('path');
-module.exports = defineConfig({
-  entry: {
-    main: './src/index.ts',
-  },
-  resolve: {
-    tsConfig: {
-      references: 'auto',
-      configFile: path.resolve(__dirname, './tsconfig.json'),
-    },
-  },
-});
diff --git a/rspack/nest-alias/rspack.config.mjs b/rspack/nest-alias/rspack.config.mjs
new file mode 100644
index 000000000..ec207c647
--- /dev/null
+++ b/rspack/nest-alias/rspack.config.mjs
@@ -0,0 +1,15 @@
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+
+export default defineConfig({
+  entry: {
+    main: './src/index.ts',
+  },
+  resolve: {
+    tsConfig: {
+      references: 'auto',
+      configFile: path.resolve(import.meta.dirname, './tsconfig.json'),
+    },
+  },
+});
diff --git a/rspack/nestjs/rspack.config.js b/rspack/nestjs/rspack.config.mjs
similarity index 90%
rename from rspack/nestjs/rspack.config.js
rename to rspack/nestjs/rspack.config.mjs
index b99e18b45..34417bbbd 100644
--- a/rspack/nestjs/rspack.config.js
+++ b/rspack/nestjs/rspack.config.mjs
@@ -1,9 +1,10 @@
-const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
-const { rspack } = require('@rspack/core');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { RunScriptWebpackPlugin } from 'run-script-webpack-plugin';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+export default defineConfig({
+  context: import.meta.dirname,
   target: 'node',
   entry: {
     main: ['@rspack/core/hot/poll?100', './src/main.ts'],
@@ -95,12 +96,11 @@ const config = {
         return callback();
       }
       try {
-        require.resolve(resource);
+        import.meta.resolve(resource);
       } catch (err) {
         callback(null, resource);
       }
       callback();
     },
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/node-globals-shim/rspack.config.js b/rspack/node-globals-shim/rspack.config.js
deleted file mode 100644
index 3d45411ea..000000000
--- a/rspack/node-globals-shim/rspack.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const { rspack } = require('@rspack/core');
-const path = require('path');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
-  entry: {
-    main: './src/index.js',
-  },
-  plugins: [
-    new rspack.HtmlRspackPlugin({
-      template: './index.html',
-    }),
-    new rspack.ProvidePlugin({
-      process: path.resolve(__dirname, './src/process-shim.js'),
-    }),
-  ],
-};
-module.exports = config;
diff --git a/rspack/node-globals-shim/rspack.config.mjs b/rspack/node-globals-shim/rspack.config.mjs
new file mode 100644
index 000000000..7980b8b88
--- /dev/null
+++ b/rspack/node-globals-shim/rspack.config.mjs
@@ -0,0 +1,19 @@
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  context: import.meta.dirname,
+  entry: {
+    main: './src/index.js',
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+    new rspack.ProvidePlugin({
+      process: path.resolve(import.meta.dirname, './src/process-shim.js'),
+    }),
+  ],
+});
diff --git a/rspack/node-polyfill/rspack.config.js b/rspack/node-polyfill/rspack.config.js
deleted file mode 100644
index c5ecf96bd..000000000
--- a/rspack/node-polyfill/rspack.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const { rspack } = require('@rspack/core');
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
-
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
-  entry: {
-    main: './src/index.js',
-  },
-  plugins: [
-    new NodePolyfillPlugin(),
-    new rspack.HtmlRspackPlugin({
-      template: './index.html',
-    }),
-  ],
-};
-module.exports = config;
diff --git a/rspack/node-polyfill/rspack.config.mjs b/rspack/node-polyfill/rspack.config.mjs
new file mode 100644
index 000000000..6ced09b0f
--- /dev/null
+++ b/rspack/node-polyfill/rspack.config.mjs
@@ -0,0 +1,17 @@
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
+
+export default defineConfig({
+  context: import.meta.dirname,
+  entry: {
+    main: './src/index.js',
+  },
+  plugins: [
+    new NodePolyfillPlugin(),
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+  ],
+});
diff --git a/rspack/perfsee/rspack.config.js b/rspack/perfsee/rspack.config.js
deleted file mode 100644
index 9a75ef017..000000000
--- a/rspack/perfsee/rspack.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const { rspack } = require('@rspack/core');
-const { PerfseePlugin } = require('@perfsee/webpack');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
-  entry: {
-    main: './src/index.js',
-  },
-  plugins: [
-    new PerfseePlugin({}),
-    new rspack.HtmlRspackPlugin({
-      template: './index.html',
-    }),
-  ],
-};
-module.exports = config;
diff --git a/rspack/perfsee/rspack.config.mjs b/rspack/perfsee/rspack.config.mjs
new file mode 100644
index 000000000..c58512701
--- /dev/null
+++ b/rspack/perfsee/rspack.config.mjs
@@ -0,0 +1,17 @@
+// @ts-check
+import { PerfseePlugin } from '@perfsee/webpack';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  context: import.meta.dirname,
+  entry: {
+    main: './src/index.js',
+  },
+  plugins: [
+    new PerfseePlugin({}),
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+  ],
+});
diff --git a/rspack/polyfill/rspack.config.js b/rspack/polyfill/rspack.config.mjs
similarity index 63%
rename from rspack/polyfill/rspack.config.js
rename to rspack/polyfill/rspack.config.mjs
index f560ea4e1..5ed566e17 100644
--- a/rspack/polyfill/rspack.config.js
+++ b/rspack/polyfill/rspack.config.mjs
@@ -1,14 +1,17 @@
-const { rspack } = require('@rspack/core');
-const path = require('path');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+// @ts-check
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/index.js',
   },
   resolve: {
     alias: {
-      'core-js': path.dirname(require.resolve('core-js')),
+      'core-js': path.dirname(fileURLToPath(import.meta.resolve('core-js'))),
     },
   },
   module: {
@@ -33,5 +36,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/postcss-loader/rspack.config.js b/rspack/postcss-loader/rspack.config.mjs
similarity index 86%
rename from rspack/postcss-loader/rspack.config.js
rename to rspack/postcss-loader/rspack.config.mjs
index 67e904301..82313744a 100644
--- a/rspack/postcss-loader/rspack.config.js
+++ b/rspack/postcss-loader/rspack.config.mjs
@@ -1,7 +1,9 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/index.js',
   },
@@ -45,5 +47,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/preact-refresh/rspack.config.js b/rspack/preact-refresh/rspack.config.mjs
similarity index 89%
rename from rspack/preact-refresh/rspack.config.js
rename to rspack/preact-refresh/rspack.config.mjs
index 27728f578..71fb9eae6 100644
--- a/rspack/preact-refresh/rspack.config.js
+++ b/rspack/preact-refresh/rspack.config.mjs
@@ -1,8 +1,11 @@
-const { rspack } = require('@rspack/core');
-const PreactRefreshPlugin = require('@rspack/plugin-preact-refresh');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import PreactRefreshPlugin from '@rspack/plugin-preact-refresh';
+
 const dev = process.env.NODE_ENV === 'development';
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+
+export default defineConfig({
   entry: {
     main: './src/index.jsx',
   },
@@ -69,5 +72,4 @@ const config = {
     dev && new rspack.HotModuleReplacementPlugin(),
     dev && new PreactRefreshPlugin(),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/preact/rspack.config.js b/rspack/preact/rspack.config.mjs
similarity index 90%
rename from rspack/preact/rspack.config.js
rename to rspack/preact/rspack.config.mjs
index e9c780604..a7aaa02a4 100644
--- a/rspack/preact/rspack.config.js
+++ b/rspack/preact/rspack.config.mjs
@@ -1,7 +1,10 @@
-const { rspack } = require('@rspack/core');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
 const dev = process.env.NODE_ENV === 'development';
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+
+export default defineConfig({
   entry: {
     main: './src/index.jsx',
   },
@@ -56,5 +59,4 @@ const config = {
     }),
     dev && new rspack.HotModuleReplacementPlugin(),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/proxy/rspack.config.js b/rspack/proxy/rspack.config.mjs
similarity index 50%
rename from rspack/proxy/rspack.config.js
rename to rspack/proxy/rspack.config.mjs
index 2d6893fa7..4ad82668f 100644
--- a/rspack/proxy/rspack.config.js
+++ b/rspack/proxy/rspack.config.mjs
@@ -1,14 +1,17 @@
-const { rspack } = require('@rspack/core');
-const path = require('path');
-module.exports = (env, argv) => {
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig((env, argv) => {
   console.log('env:', env, argv);
   return {
-    context: __dirname,
+    context: import.meta.dirname,
     entry: {
       main: './index.js',
     },
     output: {
-      path: path.resolve(__dirname, 'dist'),
+      path: path.resolve(import.meta.dirname, 'dist'),
     },
     devServer: {
       proxy: [
@@ -19,4 +22,4 @@ module.exports = (env, argv) => {
       ],
     },
   };
-};
+});
diff --git a/rspack/react-compiler-babel-ts/rspack.config.js b/rspack/react-compiler-babel-ts/rspack.config.mjs
similarity index 89%
rename from rspack/react-compiler-babel-ts/rspack.config.js
rename to rspack/react-compiler-babel-ts/rspack.config.mjs
index 4b441a6cc..7a4821bb8 100644
--- a/rspack/react-compiler-babel-ts/rspack.config.js
+++ b/rspack/react-compiler-babel-ts/rspack.config.mjs
@@ -1,6 +1,8 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
   entry: {
     main: './src/index.tsx',
   },
@@ -61,6 +63,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-
-module.exports = config;
+});
diff --git a/rspack/react-compiler-babel/rspack.config.js b/rspack/react-compiler-babel/rspack.config.mjs
similarity index 89%
rename from rspack/react-compiler-babel/rspack.config.js
rename to rspack/react-compiler-babel/rspack.config.mjs
index 638dd5388..70c3ad50d 100644
--- a/rspack/react-compiler-babel/rspack.config.js
+++ b/rspack/react-compiler-babel/rspack.config.mjs
@@ -1,6 +1,8 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
   entry: {
     main: './src/index.jsx',
   },
@@ -61,6 +63,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-
-module.exports = config;
+});
diff --git a/rspack/react-refresh-babel-loader/rspack.config.js b/rspack/react-refresh-babel-loader/rspack.config.mjs
similarity index 62%
rename from rspack/react-refresh-babel-loader/rspack.config.js
rename to rspack/react-refresh-babel-loader/rspack.config.mjs
index dee1d67cd..4ae8ca8e5 100644
--- a/rspack/react-refresh-babel-loader/rspack.config.js
+++ b/rspack/react-refresh-babel-loader/rspack.config.mjs
@@ -1,10 +1,12 @@
-const { rspack } = require('@rspack/core');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
+// @ts-check
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   entry: { main: './src/index.tsx' },
   devtool: false,
   resolve: {
@@ -21,7 +23,9 @@ const config = {
               ['@babel/preset-react', { runtime: 'automatic' }],
               '@babel/preset-typescript',
             ],
-            plugins: [!isProduction && require.resolve('react-refresh/babel')].filter(Boolean),
+            plugins: [
+              !isProduction && fileURLToPath(import.meta.resolve('react-refresh/babel')),
+            ].filter(Boolean),
           },
         },
       },
@@ -31,6 +35,4 @@ const config = {
     new rspack.HtmlRspackPlugin({ template: './index.html' }),
     !isProduction && new ReactRefreshRspackPlugin(),
   ],
-};
-
-module.exports = config;
+});
diff --git a/rspack/react-refresh-esm/rspack.config.js b/rspack/react-refresh-esm/rspack.config.mjs
similarity index 82%
rename from rspack/react-refresh-esm/rspack.config.js
rename to rspack/react-refresh-esm/rspack.config.mjs
index 703e776dd..cf4bea50f 100644
--- a/rspack/react-refresh-esm/rspack.config.js
+++ b/rspack/react-refresh-esm/rspack.config.mjs
@@ -1,10 +1,11 @@
-const { rspack } = require('@rspack/core');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   entry: { main: './src/index.tsx' },
   devtool: 'source-map',
   output: {
@@ -47,6 +48,4 @@ const config = {
     new rspack.HtmlRspackPlugin({ template: './index.html', scriptLoading: 'module' }),
     !isProduction && new ReactRefreshRspackPlugin(),
   ],
-};
-
-module.exports = config;
+});
diff --git a/rspack/react-refresh/rspack.config.js b/rspack/react-refresh/rspack.config.mjs
similarity index 80%
rename from rspack/react-refresh/rspack.config.js
rename to rspack/react-refresh/rspack.config.mjs
index 97fed3cba..9736fcd56 100644
--- a/rspack/react-refresh/rspack.config.js
+++ b/rspack/react-refresh/rspack.config.mjs
@@ -1,10 +1,11 @@
-const { rspack } = require('@rspack/core');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   entry: { main: './src/index.tsx' },
   devtool: 'source-map',
   resolve: {
@@ -41,6 +42,4 @@ const config = {
     new rspack.HtmlRspackPlugin({ template: './index.html' }),
     !isProduction && new ReactRefreshRspackPlugin(),
   ],
-};
-
-module.exports = config;
+});
diff --git a/rspack/react-ssr-esm/rspack.config.client.js b/rspack/react-ssr-esm/rspack.config.client.js
index ff6494cbd..c70006eff 100644
--- a/rspack/react-ssr-esm/rspack.config.client.js
+++ b/rspack/react-ssr-esm/rspack.config.client.js
@@ -1,20 +1,17 @@
 import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
 import { RspackManifestPlugin } from 'rspack-manifest-plugin';
-import { fileURLToPath } from 'url';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-export default {
+export default defineConfig({
   name: 'client',
   entry: {
-    client: path.resolve(__dirname, 'client/client.tsx'),
+    client: path.resolve(import.meta.dirname, 'client/client.tsx'),
   },
   mode: 'production',
   output: {
     clean: true,
     module: true,
-    path: path.resolve(__dirname + '/dist/static'),
+    path: path.resolve(import.meta.dirname, 'dist/static'),
     filename: '[name].[contenthash].js',
     publicPath: '',
   },
@@ -35,4 +32,4 @@ export default {
   },
   target: 'web',
   plugins: [new RspackManifestPlugin()],
-};
+});
diff --git a/rspack/react-ssr-esm/rspack.config.server.js b/rspack/react-ssr-esm/rspack.config.server.js
index 7850c55ff..2a311f0a8 100644
--- a/rspack/react-ssr-esm/rspack.config.server.js
+++ b/rspack/react-ssr-esm/rspack.config.server.js
@@ -1,19 +1,16 @@
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
 import rspack from '@rspack/core';
-import path, { dirname } from 'path';
-import { fileURLToPath } from 'url';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-export default {
+export default defineConfig({
   name: 'server',
   entry: {
-    server: path.resolve(__dirname, 'server', 'server.ts'),
+    server: path.resolve(import.meta.dirname, 'server', 'server.ts'),
   },
   mode: 'production',
   output: {
     module: true,
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(import.meta.dirname, 'dist'),
     filename: '[name].js',
   },
   externalsType: 'node-commonjs',
@@ -52,4 +49,4 @@ const __dirname = __rspack_dirname(__filename);
       patterns: [{ context: 'server', from: 'views', to: 'views' }],
     }),
   ],
-};
+});
diff --git a/rspack/react-with-extract-css/rspack.config.js b/rspack/react-with-extract-css/rspack.config.mjs
similarity index 82%
rename from rspack/react-with-extract-css/rspack.config.js
rename to rspack/react-with-extract-css/rspack.config.mjs
index 62b94d6fd..a2f615132 100644
--- a/rspack/react-with-extract-css/rspack.config.js
+++ b/rspack/react-with-extract-css/rspack.config.mjs
@@ -1,9 +1,10 @@
-const { rspack } = require('@rspack/core');
-const path = require('path');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: ['./src/index.jsx'],
   },
@@ -58,7 +59,6 @@ const config = {
     new rspack.CssExtractRspackPlugin(),
   ],
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(import.meta.dirname, 'dist'),
   },
-};
-module.exports = config;
+});
diff --git a/rspack/react-with-less/rspack.config.js b/rspack/react-with-less/rspack.config.mjs
similarity index 80%
rename from rspack/react-with-less/rspack.config.js
rename to rspack/react-with-less/rspack.config.mjs
index 6138a08c4..24333867d 100644
--- a/rspack/react-with-less/rspack.config.js
+++ b/rspack/react-with-less/rspack.config.mjs
@@ -1,8 +1,10 @@
-const { rspack } = require('@rspack/core');
-const path = require('path');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: ['./src/index.jsx'],
   },
@@ -50,7 +52,6 @@ const config = {
     }),
   ],
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(import.meta.dirname, 'dist'),
   },
-};
-module.exports = config;
+});
diff --git a/rspack/react-with-sass/rspack.config.js b/rspack/react-with-sass/rspack.config.mjs
similarity index 87%
rename from rspack/react-with-sass/rspack.config.js
rename to rspack/react-with-sass/rspack.config.mjs
index 15251f630..4d9572dd6 100644
--- a/rspack/react-with-sass/rspack.config.js
+++ b/rspack/react-with-sass/rspack.config.mjs
@@ -1,6 +1,8 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
   entry: {
     main: ['./src/index.jsx'],
   },
@@ -47,5 +49,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/react/rspack.config.js b/rspack/react/rspack.config.mjs
similarity index 87%
rename from rspack/react/rspack.config.js
rename to rspack/react/rspack.config.mjs
index d20a5e26f..0aab4fb65 100644
--- a/rspack/react/rspack.config.js
+++ b/rspack/react/rspack.config.mjs
@@ -1,6 +1,8 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
   entry: {
     main: './src/index.jsx',
   },
@@ -46,5 +48,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/rspack-manifest-plugin/rspack.config.js b/rspack/rspack-manifest-plugin/rspack.config.mjs
similarity index 78%
rename from rspack/rspack-manifest-plugin/rspack.config.js
rename to rspack/rspack-manifest-plugin/rspack.config.mjs
index d93fabec4..451678e5b 100644
--- a/rspack/rspack-manifest-plugin/rspack.config.js
+++ b/rspack/rspack-manifest-plugin/rspack.config.mjs
@@ -1,7 +1,8 @@
-const { defineConfig } = require('@rspack/cli');
-const { WebpackManifestPlugin: RspackManifestPlugin } = require('rspack-manifest-plugin');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { RspackManifestPlugin } from 'rspack-manifest-plugin';
 
-module.exports = defineConfig({
+export default defineConfig({
   plugins: [
     new RspackManifestPlugin({
       fileName: 'rspack-manifest.json',
diff --git a/rspack/sentry/rspack.config.js b/rspack/sentry/rspack.config.js
deleted file mode 100644
index 0477fe4c8..000000000
--- a/rspack/sentry/rspack.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const { rspack } = require('@rspack/core');
-const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  entry: './src/index.js',
-  plugins: [
-    new rspack.HtmlRspackPlugin({
-      template: './index.html',
-    }),
-    sentryWebpackPlugin({}),
-  ],
-};
-module.exports = config;
diff --git a/rspack/sentry/rspack.config.mjs b/rspack/sentry/rspack.config.mjs
new file mode 100644
index 000000000..c2550433f
--- /dev/null
+++ b/rspack/sentry/rspack.config.mjs
@@ -0,0 +1,14 @@
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
+
+export default defineConfig({
+  entry: './src/index.js',
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+    sentryWebpackPlugin({}),
+  ],
+});
diff --git a/rspack/solid/rspack.config.js b/rspack/solid/rspack.config.mjs
similarity index 82%
rename from rspack/solid/rspack.config.js
rename to rspack/solid/rspack.config.mjs
index 1c2ccf6c1..c1ecea448 100644
--- a/rspack/solid/rspack.config.js
+++ b/rspack/solid/rspack.config.mjs
@@ -1,7 +1,9 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/index.jsx',
   },
@@ -44,5 +46,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/source-map-with-vscode-debugging/rspack.config.js b/rspack/source-map-with-vscode-debugging/rspack.config.mjs
similarity index 81%
rename from rspack/source-map-with-vscode-debugging/rspack.config.js
rename to rspack/source-map-with-vscode-debugging/rspack.config.mjs
index eebba0a13..014dbf75a 100644
--- a/rspack/source-map-with-vscode-debugging/rspack.config.js
+++ b/rspack/source-map-with-vscode-debugging/rspack.config.mjs
@@ -1,14 +1,15 @@
-const { rspack } = require('@rspack/core');
-const path = require('path');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   entry: {
     main: './src/index.jsx',
   },
   devtool: 'source-map',
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(import.meta.dirname, 'dist'),
     filename: '[name].js',
     devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]', // map to source with absolute file path not webpack:// protocol
   },
@@ -43,5 +44,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/stats/rspack.config.js b/rspack/stats/rspack.config.mjs
similarity index 88%
rename from rspack/stats/rspack.config.js
rename to rspack/stats/rspack.config.mjs
index 806f0f060..c5a87a4ac 100644
--- a/rspack/stats/rspack.config.js
+++ b/rspack/stats/rspack.config.mjs
@@ -1,4 +1,7 @@
-const { rspack } = require('@rspack/core');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
 class StatsPrinterTestPlugin {
   apply(compiler) {
     compiler.hooks.compilation.tap('StatsPrinterTestPlugin', (compilation) => {
@@ -29,9 +32,8 @@ class StatsPrinterTestPlugin {
   }
 }
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/index.js',
   },
@@ -42,5 +44,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/styled-components/rspack.config.js b/rspack/styled-components/rspack.config.mjs
similarity index 85%
rename from rspack/styled-components/rspack.config.js
rename to rspack/styled-components/rspack.config.mjs
index da760fe59..6eb99aaad 100644
--- a/rspack/styled-components/rspack.config.js
+++ b/rspack/styled-components/rspack.config.mjs
@@ -1,6 +1,8 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
   entry: {
     main: './src/index.tsx',
   },
@@ -38,5 +40,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/svelte/rspack.config.js b/rspack/svelte/rspack.config.js
index d9e6c5604..b44bde061 100644
--- a/rspack/svelte/rspack.config.js
+++ b/rspack/svelte/rspack.config.js
@@ -1,12 +1,9 @@
-import { createRequire } from 'node:module';
 import path from 'node:path';
 import { defineConfig } from '@rspack/cli';
 import rspack from '@rspack/core';
 import { sveltePreprocess } from 'svelte-preprocess';
 
 const isProd = process.env.NODE_ENV === 'production';
-const require = createRequire(import.meta.url);
-
 const swcLoaderConfig = {
   loader: 'builtin:swc-loader',
   /**
diff --git a/rspack/svgr/rspack.config.js b/rspack/svgr/rspack.config.mjs
similarity index 86%
rename from rspack/svgr/rspack.config.js
rename to rspack/svgr/rspack.config.mjs
index d638ddbb5..a87bba492 100644
--- a/rspack/svgr/rspack.config.js
+++ b/rspack/svgr/rspack.config.mjs
@@ -1,6 +1,8 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
   entry: {
     main: './index.jsx',
   },
@@ -42,5 +44,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/terser-webpack-plugin/package.json b/rspack/terser-webpack-plugin/package.json
index 47a07e09e..e7bca0387 100644
--- a/rspack/terser-webpack-plugin/package.json
+++ b/rspack/terser-webpack-plugin/package.json
@@ -8,6 +8,7 @@
     "@rspack/cli": "2.0.0-rc.1",
     "@rspack/core": "2.0.0-rc.1",
     "@rspack/dev-server": "2.0.0-rc.2",
-    "terser-webpack-plugin": "5.3.16"
+    "terser-webpack-plugin": "5.3.16",
+    "webpack-stats-plugin": "^1.1.3"
   }
 }
diff --git a/rspack/terser-webpack-plugin/rspack.config.js b/rspack/terser-webpack-plugin/rspack.config.js
deleted file mode 100644
index d49d59b25..000000000
--- a/rspack/terser-webpack-plugin/rspack.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const { defineConfig } = require('@rspack/cli');
-const TerserPlugin = require('terser-webpack-plugin');
-const { StatsWriterPlugin } = require('webpack-stats-plugin');
-const { rspack } = require('@rspack/core');
-
-module.exports = defineConfig({
-  plugins: [new StatsWriterPlugin()],
-  optimization: {
-    minimizer: [new TerserPlugin(), new rspack.LightningCssMinimizerRspackPlugin()],
-  },
-});
diff --git a/rspack/terser-webpack-plugin/rspack.config.mjs b/rspack/terser-webpack-plugin/rspack.config.mjs
new file mode 100644
index 000000000..85b1882dc
--- /dev/null
+++ b/rspack/terser-webpack-plugin/rspack.config.mjs
@@ -0,0 +1,12 @@
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import TerserPlugin from 'terser-webpack-plugin';
+import { StatsWriterPlugin } from 'webpack-stats-plugin';
+
+export default defineConfig({
+  plugins: [new StatsWriterPlugin()],
+  optimization: {
+    minimizer: [new TerserPlugin(), new rspack.LightningCssMinimizerRspackPlugin()],
+  },
+});
diff --git a/rspack/treeshaking-transform-imports/rspack.config.js b/rspack/treeshaking-transform-imports/rspack.config.mjs
similarity index 68%
rename from rspack/treeshaking-transform-imports/rspack.config.js
rename to rspack/treeshaking-transform-imports/rspack.config.mjs
index 80829ef94..f3e44c00b 100644
--- a/rspack/treeshaking-transform-imports/rspack.config.js
+++ b/rspack/treeshaking-transform-imports/rspack.config.mjs
@@ -1,7 +1,10 @@
-const { rspack } = require('@rspack/core');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
 /** @type {import('@rspack/core').Configuration} */
-const config = {
-  context: __dirname,
+
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/index.js',
   },
@@ -20,5 +23,4 @@ const config = {
     providedExports: true,
     sideEffects: true,
   },
-};
-module.exports = config;
+});
diff --git a/rspack/ts-checker-rspack-plugin/rspack.config.js b/rspack/ts-checker-rspack-plugin/rspack.config.mjs
similarity index 67%
rename from rspack/ts-checker-rspack-plugin/rspack.config.js
rename to rspack/ts-checker-rspack-plugin/rspack.config.mjs
index 3d8827421..ac0e82579 100644
--- a/rspack/ts-checker-rspack-plugin/rspack.config.js
+++ b/rspack/ts-checker-rspack-plugin/rspack.config.mjs
@@ -1,7 +1,8 @@
-const { defineConfig } = require('@rspack/cli');
-const { TsCheckerRspackPlugin } = require('ts-checker-rspack-plugin');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { TsCheckerRspackPlugin } from 'ts-checker-rspack-plugin';
 
-module.exports = defineConfig({
+export default defineConfig({
   entry: './src/index.ts',
   plugins: [new TsCheckerRspackPlugin()],
   module: {
diff --git a/rspack/type-reexports-presence/rspack.config.mjs b/rspack/type-reexports-presence/rspack.config.mjs
index 5787d63ec..72637f66a 100644
--- a/rspack/type-reexports-presence/rspack.config.mjs
+++ b/rspack/type-reexports-presence/rspack.config.mjs
@@ -1,7 +1,8 @@
 // @ts-check
-
+import { defineConfig } from '@rspack/cli';
 /** @type {import("@rspack/core").Configuration} */
-export default {
+
+export default defineConfig({
   entry: {
     main: './src/index.ts',
   },
@@ -36,4 +37,4 @@ export default {
       },
     ],
   },
-};
+});
diff --git a/rspack/vanilla-extract-css/rspack.config.js b/rspack/vanilla-extract-css/rspack.config.mjs
similarity index 75%
rename from rspack/vanilla-extract-css/rspack.config.js
rename to rspack/vanilla-extract-css/rspack.config.mjs
index 72fb30a0b..fa4054439 100644
--- a/rspack/vanilla-extract-css/rspack.config.js
+++ b/rspack/vanilla-extract-css/rspack.config.mjs
@@ -1,10 +1,13 @@
-const path = require('path');
-const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 /** @type {import('@rspack/core').Configuration} */
-module.exports = {
-  entry: path.join(__dirname, './src/index.tsx'),
+
+export default defineConfig({
+  entry: path.join(import.meta.dirname, './src/index.tsx'),
   resolve: {
     extensions: ['.js', '.json', '.ts', '.tsx'],
   },
@@ -40,4 +43,4 @@ module.exports = {
     ],
   },
   plugins: [new HtmlWebpackPlugin(), new VanillaExtractPlugin()],
-};
+});
diff --git a/rspack/vue-jsx/rspack.config.js b/rspack/vue-jsx/rspack.config.mjs
similarity index 81%
rename from rspack/vue-jsx/rspack.config.js
rename to rspack/vue-jsx/rspack.config.mjs
index 107e0fc73..70f49968e 100644
--- a/rspack/vue-jsx/rspack.config.js
+++ b/rspack/vue-jsx/rspack.config.mjs
@@ -1,7 +1,9 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/main.jsx',
   },
@@ -40,5 +42,4 @@ const config = {
       __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/vue-tsx/rspack.config.js b/rspack/vue-tsx/rspack.config.mjs
similarity index 81%
rename from rspack/vue-tsx/rspack.config.js
rename to rspack/vue-tsx/rspack.config.mjs
index c71af66ff..394895cc8 100644
--- a/rspack/vue-tsx/rspack.config.js
+++ b/rspack/vue-tsx/rspack.config.mjs
@@ -1,9 +1,10 @@
-const { rspack } = require('@rspack/core');
-const { VueLoaderPlugin } = require('rspack-vue-loader');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { VueLoaderPlugin } from 'rspack-vue-loader';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/main.tsx',
   },
@@ -51,5 +52,4 @@ const config = {
       __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
     }),
   ],
-};
-module.exports = config;
+});
diff --git a/rspack/vue-vanilla/rspack.config.js b/rspack/vue-vanilla/rspack.config.mjs
similarity index 83%
rename from rspack/vue-vanilla/rspack.config.js
rename to rspack/vue-vanilla/rspack.config.mjs
index 906aaf9bb..fbb93654a 100644
--- a/rspack/vue-vanilla/rspack.config.js
+++ b/rspack/vue-vanilla/rspack.config.mjs
@@ -1,9 +1,10 @@
-const { rspack } = require('@rspack/core');
-const { VueLoaderPlugin } = require('rspack-vue-loader');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { VueLoaderPlugin } from 'rspack-vue-loader';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/main.js',
   },
@@ -62,5 +63,4 @@ const config = {
       },
     ],
   },
-};
-module.exports = config;
+});
diff --git a/rspack/vue/rspack.config.js b/rspack/vue/rspack.config.mjs
similarity index 81%
rename from rspack/vue/rspack.config.js
rename to rspack/vue/rspack.config.mjs
index acb1950ad..57f2fa916 100644
--- a/rspack/vue/rspack.config.js
+++ b/rspack/vue/rspack.config.mjs
@@ -1,9 +1,10 @@
-const { rspack } = require('@rspack/core');
-const { VueLoaderPlugin } = require('rspack-vue-loader');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { VueLoaderPlugin } from 'rspack-vue-loader';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/main.js',
   },
@@ -52,5 +53,4 @@ const config = {
       },
     ],
   },
-};
-module.exports = config;
+});
diff --git a/rspack/wasm-simple/rspack.config.js b/rspack/wasm-simple/rspack.config.mjs
similarity index 51%
rename from rspack/wasm-simple/rspack.config.js
rename to rspack/wasm-simple/rspack.config.mjs
index e2d76fb1c..293f0b825 100644
--- a/rspack/wasm-simple/rspack.config.js
+++ b/rspack/wasm-simple/rspack.config.mjs
@@ -1,6 +1,8 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
   entry: {
     main: './example.js',
   },
@@ -8,5 +10,4 @@ const config = {
     webassemblyModuleFilename: '[hash].wasm',
   },
   plugins: [new rspack.HtmlRspackPlugin()],
-};
-module.exports = config;
+});
diff --git a/rspack/webpack-bundle-analyzer/rspack.config.js b/rspack/webpack-bundle-analyzer/rspack.config.js
deleted file mode 100644
index 206378049..000000000
--- a/rspack/webpack-bundle-analyzer/rspack.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const { defineConfig } = require('@rspack/cli');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
-module.exports = defineConfig({
-  plugins: [
-    new BundleAnalyzerPlugin({
-      analyzerMode: 'json',
-    }),
-  ],
-});
diff --git a/rspack/webpack-bundle-analyzer/rspack.config.mjs b/rspack/webpack-bundle-analyzer/rspack.config.mjs
new file mode 100644
index 000000000..a4ae4657f
--- /dev/null
+++ b/rspack/webpack-bundle-analyzer/rspack.config.mjs
@@ -0,0 +1,11 @@
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+
+export default defineConfig({
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'json',
+    }),
+  ],
+});
diff --git a/rspack/webpack-stats-plugin/rspack.config.js b/rspack/webpack-stats-plugin/rspack.config.js
deleted file mode 100644
index 10976c235..000000000
--- a/rspack/webpack-stats-plugin/rspack.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const { defineConfig } = require('@rspack/cli');
-const { StatsWriterPlugin } = require('webpack-stats-plugin');
-
-module.exports = defineConfig({
-  plugins: [new StatsWriterPlugin()],
-});
diff --git a/rspack/webpack-stats-plugin/rspack.config.mjs b/rspack/webpack-stats-plugin/rspack.config.mjs
new file mode 100644
index 000000000..4c79a7bd6
--- /dev/null
+++ b/rspack/webpack-stats-plugin/rspack.config.mjs
@@ -0,0 +1,7 @@
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { StatsWriterPlugin } from 'webpack-stats-plugin';
+
+export default defineConfig({
+  plugins: [new StatsWriterPlugin()],
+});
diff --git a/rspack/workbox-webpack-plugin/rspack.config.js b/rspack/workbox-webpack-plugin/rspack.config.js
deleted file mode 100644
index e4ba8afc9..000000000
--- a/rspack/workbox-webpack-plugin/rspack.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const { rspack } = require('@rspack/core');
-const { GenerateSW } = require('workbox-webpack-plugin');
-
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  entry: './src/index.js',
-  plugins: [
-    new rspack.HtmlRspackPlugin({
-      template: './index.html',
-    }),
-    new GenerateSW({}),
-  ],
-};
-module.exports = config;
diff --git a/rspack/workbox-webpack-plugin/rspack.config.mjs b/rspack/workbox-webpack-plugin/rspack.config.mjs
new file mode 100644
index 000000000..86d5f2681
--- /dev/null
+++ b/rspack/workbox-webpack-plugin/rspack.config.mjs
@@ -0,0 +1,14 @@
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { GenerateSW } from 'workbox-webpack-plugin';
+
+export default defineConfig({
+  entry: './src/index.js',
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+    new GenerateSW({}),
+  ],
+});
diff --git a/rspack/worker/rspack.config.js b/rspack/worker/rspack.config.js
deleted file mode 100644
index 5b5e967ce..000000000
--- a/rspack/worker/rspack.config.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const { rspack } = require('@rspack/core');
-const path = require('path');
-
-module.exports = {
-  entry: './example.js',
-  context: __dirname,
-  output: {
-    path: path.join(__dirname, 'dist'),
-  },
-  plugins: [
-    new rspack.HtmlRspackPlugin({
-      template: './index.html',
-    }),
-  ],
-};
diff --git a/rspack/worker/rspack.config.mjs b/rspack/worker/rspack.config.mjs
new file mode 100644
index 000000000..d6064267e
--- /dev/null
+++ b/rspack/worker/rspack.config.mjs
@@ -0,0 +1,17 @@
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  entry: './example.js',
+  context: import.meta.dirname,
+  output: {
+    path: path.join(import.meta.dirname, 'dist'),
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+  ],
+});
diff --git a/rspack/worklet/rspack.config.js b/rspack/worklet/rspack.config.mjs
similarity index 75%
rename from rspack/worklet/rspack.config.js
rename to rspack/worklet/rspack.config.mjs
index 0e15a5f73..9b625eb4f 100644
--- a/rspack/worklet/rspack.config.js
+++ b/rspack/worklet/rspack.config.mjs
@@ -1,7 +1,9 @@
-const { rspack } = require('@rspack/core');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
-  context: __dirname,
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  context: import.meta.dirname,
   entry: {
     main: './src/index.js',
   },
@@ -32,5 +34,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-module.exports = config;
+});