fix(sourceMap): use absolute paths in dev for VS Code debugging (#6492)

Author: chenjiahan

packages/compat/webpack/tests/__snapshots__/default.test.ts.snap

@@ -289,7 +289,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
   "output": {
     "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "static/js/async/[name].js",
-    "devtoolModuleFilenameTemplate": "[absolute-resource-path]",
+    "devtoolModuleFilenameTemplate": [Function],
     "filename": "static/js/[name].js",
     "hashFunction": "xxhash64",
     "path": "<ROOT>/packages/compat/webpack/tests/dist",

packages/core/src/plugins/sourceMap.ts

@@ -33,13 +33,22 @@ export const pluginSourceMap = (): RsbuildPlugin => ({
       return typeof sourceMap === 'object' && sourceMap.css;
     };
 
-    api.modifyBundlerChain((chain, { bundler, environment }) => {
+    api.modifyBundlerChain((chain, { bundler, environment, isDev, target }) => {
       const { config } = environment;
-      const devtool = getDevtool(config);
 
-      chain
-        .devtool(devtool)
-        .output.devtoolModuleFilenameTemplate(DEFAULT_SOURCE_MAP_TEMPLATE);
+      const devtool = getDevtool(config);
+      chain.devtool(devtool);
+
+      if (isDev && target === 'web') {
+        // Use POSIX-style absolute paths in source maps during development
+        // This ensures VS Code and browser debuggers can correctly resolve breakpoints
+        chain.output.devtoolModuleFilenameTemplate(
+          (info: { absoluteResourcePath: string }) =>
+            toPosixPath(info.absoluteResourcePath),
+        );
+      } else {
+        chain.output.devtoolModuleFilenameTemplate(DEFAULT_SOURCE_MAP_TEMPLATE);
+      }
 
       // When JS source map is disabled, but CSS source map is enabled,
       // add `SourceMapDevToolPlugin` to let Rspack generate CSS source map.
@@ -69,8 +78,8 @@ export const pluginSourceMap = (): RsbuildPlugin => ({
           return;
         }
 
-        // If devtoolModuleFilenameTemplate is not the default template,
-        // which means users want to customize it, skip the default processing.
+        // If devtoolModuleFilenameTemplate is not the default absolute path template,
+        // we do not need to convert it to relative path.
         if (
           compilation.outputOptions.devtoolModuleFilenameTemplate !==
           DEFAULT_SOURCE_MAP_TEMPLATE

packages/core/tests/__snapshots__/builder.test.ts.snap

@@ -405,7 +405,7 @@ exports[`should use Rspack as the default bundler > apply Rspack correctly 1`] =
   "output": {
     "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "static/js/async/[name].js",
-    "devtoolModuleFilenameTemplate": "[absolute-resource-path]",
+    "devtoolModuleFilenameTemplate": [Function],
     "filename": "static/js/[name].js",
     "hashFunction": "xxhash64",
     "path": "<ROOT>/dist",

packages/core/tests/__snapshots__/default.test.ts.snap

@@ -405,7 +405,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
   "output": {
     "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "static/js/async/[name].js",
-    "devtoolModuleFilenameTemplate": "[absolute-resource-path]",
+    "devtoolModuleFilenameTemplate": [Function],
     "filename": "static/js/[name].js",
     "hashFunction": "xxhash64",
     "path": "<ROOT>/packages/core/tests/dist",
@@ -1927,7 +1927,7 @@ exports[`tools.rspack > should match snapshot 1`] = `
   "output": {
     "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "static/js/async/[name].js",
-    "devtoolModuleFilenameTemplate": "[absolute-resource-path]",
+    "devtoolModuleFilenameTemplate": [Function],
     "filename": "static/js/[name].js",
     "hashFunction": "xxhash64",
     "path": "<ROOT>/packages/core/tests/dist",

packages/core/tests/__snapshots__/environments.test.ts.snap

@@ -1836,7 +1836,7 @@ exports[`environment config > tools.rspack / bundlerChain can be configured in e
     "output": {
       "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
       "chunkFilename": "static/js/async/[name].js",
-      "devtoolModuleFilenameTemplate": "[absolute-resource-path]",
+      "devtoolModuleFilenameTemplate": [Function],
       "filename": "static/js/[name].js",
       "hashFunction": "xxhash64",
       "path": "<ROOT>/dist",