chore[react-devtools/extensions]: make source maps url relative (#29886)

This adds few changes:
1. We are going to ship source maps only for 2 artifacts:
`installHook.js` and `react_devtools_backend_compact.js`, because it is
only these modules that can patch console and be visible to the user via
stack traces in console. We need to ship source maps to be able to use
`ignoreList` feature in source maps, so we can actually hide these from
stack traces.

| Before | After |
|--------|--------|
| ![Screenshot 2024-06-13 at 17 44
25](https://github.com/facebook/react/assets/28902667/464e097b-a95e-47eb-967c-0579daad316b)
| ![Screenshot 2024-06-13 at 17 39
53](https://github.com/facebook/react/assets/28902667/e4afe642-d65b-4296-a2cf-26c0b925ebf2)
|
 
2. The `"sources"` field in source map will have relative urls listed,
instead of absolute with `webpack://` protocol. This will move the
sources to the `React Developer Tools` frame in `Sources` panel, instead
of `webpack://`.
 
 | Before | After |
|--------|--------|
| ![Screenshot 2024-06-13 at 17 48
24](https://github.com/facebook/react/assets/28902667/a18edad2-5b4e-4ad7-8a7a-8b389c2edf92)
| ![Screenshot 2024-06-13 at 17 49
41](https://github.com/facebook/react/assets/28902667/5db491f7-5d1d-4155-9910-16ac4384d34e)
|

> [!NOTE]  
> I still have 1 unresolved issue with shipping source maps in extension
build, and it is related to Firefox, which can't find them in the
extension bundle and returns 404, even though urls are relative and I
can actually open them via unique address like
`moz-extension://<extension-id>/build/intallHook.js.map` ¯\\\_(ツ)\_/¯

Author: hoxyq

packages/react-devtools-extensions/webpack.backend.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const {resolve} = require('path');
+const {resolve, isAbsolute, relative} = require('path');
 const Webpack = require('webpack');
 
 const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
@@ -93,6 +93,17 @@ module.exports = {
     new Webpack.SourceMapDevToolPlugin({
       filename: '[file].map',
       noSources: !__DEV__,
+      // https://github.com/webpack/webpack/issues/3603#issuecomment-1743147144
+      moduleFilenameTemplate(info) {
+        const {absoluteResourcePath, namespace, resourcePath} = info;
+
+        if (isAbsolute(absoluteResourcePath)) {
+          return relative(__dirname + '/build', absoluteResourcePath);
+        }
+
+        // Mimic Webpack's default behavior:
+        return `webpack://${namespace}/${resourcePath}`;
+      },
     }),
     new SourceMapIgnoreListPlugin({
       shouldIgnoreSource: () => !__DEV__,

packages/react-devtools-extensions/webpack.config.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const {resolve} = require('path');
+const {resolve, isAbsolute, relative} = require('path');
 const Webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 const {
@@ -137,7 +137,19 @@ module.exports = {
     }),
     new Webpack.SourceMapDevToolPlugin({
       filename: '[file].map',
+      include: 'installHook.js',
       noSources: !__DEV__,
+      // https://github.com/webpack/webpack/issues/3603#issuecomment-1743147144
+      moduleFilenameTemplate(info) {
+        const {absoluteResourcePath, namespace, resourcePath} = info;
+
+        if (isAbsolute(absoluteResourcePath)) {
+          return relative(__dirname + '/build', absoluteResourcePath);
+        }
+
+        // Mimic Webpack's default behavior:
+        return `webpack://${namespace}/${resourcePath}`;
+      },
     }),
     new SourceMapIgnoreListPlugin({
       shouldIgnoreSource: (assetName, _source) => {