[DevTools] Use a single Webpack config for the extensions (#34513)
Sebastian "Sebbie" Silbermann committed
Sep 17, 2025 at 15:45 UTC
27b4076ab051b4d0e1ae6cec3266367294df024c
3 files changed
+11
-145
packages/react-devtools-extensions/build.js
-8
@@ -66,14 +66,6 @@ const build = async (tempPath, manifestPath, envExtension = {}) => {
66
stdio: 'inherit',
67
},
68
);
69
- execSync(
70
- `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
71
- {
72
- cwd: __dirname,
73
- env: mergedEnv,
74
- stdio: 'inherit',
75
- },
76
- );
69
70
// Make temp dir
71
await ensureDir(zipPath);
packages/react-devtools-extensions/webpack.backend.js
deleted
-135
@@ -1,135 +0,0 @@
1
-'use strict';
2
-
3
-const {resolve, isAbsolute, relative} = require('path');
4
-const Webpack = require('webpack');
5
-const TerserPlugin = require('terser-webpack-plugin');
6
-
7
-const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
8
-const SourceMapIgnoreListPlugin = require('react-devtools-shared/SourceMapIgnoreListPlugin');
9
-
10
-const {GITHUB_URL, getVersionString} = require('./utils');
11
-
12
-const NODE_ENV = process.env.NODE_ENV;
13
-if (!NODE_ENV) {
14
- console.error('NODE_ENV not set');
15
- process.exit(1);
16
-}
17
-
18
-const builtModulesDir = resolve(
19
- __dirname,
20
- '..',
21
- '..',
22
- 'build',
23
- 'oss-experimental',
24
-);
25
-
26
-const __DEV__ = NODE_ENV === 'development';
27
-
28
-const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
29
-
30
-const IS_CHROME = process.env.IS_CHROME === 'true';
31
-const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
32
-const IS_EDGE = process.env.IS_EDGE === 'true';
33
-
34
-const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
35
-
36
-module.exports = {
37
- mode: __DEV__ ? 'development' : 'production',
38
- devtool: false,
39
- entry: {
40
- backend: './src/backend.js',
41
- },
42
- output: {
43
- path: __dirname + '/build',
44
- filename: 'react_devtools_backend_compact.js',
45
- },
46
- node: {
47
- global: false,
48
- },
49
- resolve: {
50
- alias: {
51
- react: resolve(builtModulesDir, 'react'),
52
- 'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
53
- 'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
54
- 'react-dom': resolve(builtModulesDir, 'react-dom'),
55
- 'react-is': resolve(builtModulesDir, 'react-is'),
56
- scheduler: resolve(builtModulesDir, 'scheduler'),
57
- },
58
- },
59
- optimization: {
60
- minimize: !__DEV__,
61
- minimizer: [
62
- new TerserPlugin({
63
- terserOptions: {
64
- compress: {
65
- unused: true,
66
- dead_code: true,
67
- },
68
- mangle: {
69
- keep_fnames: true,
70
- },
71
- format: {
72
- comments: false,
73
- },
74
- },
75
- extractComments: false,
76
- }),
77
- ],
78
- },
79
- plugins: [
80
- new Webpack.ProvidePlugin({
81
- process: 'process/browser',
82
- }),
83
- new Webpack.DefinePlugin({
84
- __DEV__,
85
- __PROFILE__: false,
86
- // By importing `shared/` we may import ReactFeatureFlags
87
- __EXPERIMENTAL__: true,
88
- 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
89
- 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
90
- 'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
91
- 'process.env.IS_CHROME': IS_CHROME,
92
- 'process.env.IS_FIREFOX': IS_FIREFOX,
93
- 'process.env.IS_EDGE': IS_EDGE,
94
- __IS_CHROME__: IS_CHROME,
95
- __IS_FIREFOX__: IS_FIREFOX,
96
- __IS_EDGE__: IS_EDGE,
97
- __IS_NATIVE__: false,
98
- __IS_INTERNAL_MCP_BUILD__: false,
99
- }),
100
- new Webpack.SourceMapDevToolPlugin({
101
- filename: '[file].map',
102
- noSources: !__DEV__,
103
- // https://github.com/webpack/webpack/issues/3603#issuecomment-1743147144
104
- moduleFilenameTemplate(info) {
105
- const {absoluteResourcePath, namespace, resourcePath} = info;
106
-
107
- if (isAbsolute(absoluteResourcePath)) {
108
- return relative(__dirname + '/build', absoluteResourcePath);
109
- }
110
-
111
- // Mimic Webpack's default behavior:
112
- return `webpack://${namespace}/${resourcePath}`;
113
- },
114
- }),
115
- new SourceMapIgnoreListPlugin({
116
- shouldIgnoreSource: () => !__DEV__,
117
- }),
118
- ],
119
- module: {
120
- rules: [
121
- {
122
- test: /\.js$/,
123
- loader: 'babel-loader',
124
- options: {
125
- configFile: resolve(
126
- __dirname,
127
- '..',
128
- 'react-devtools-shared',
129
- 'babel.config.js',
130
- ),
131
- },
132
- },
133
- ],
134
- },
135
-};
packages/react-devtools-extensions/webpack.config.js
+11
-2
@@ -66,6 +66,7 @@ module.exports = {
66
mode: __DEV__ ? 'development' : 'production',
67
devtool: false,
68
entry: {
69
+ backend: './src/backend.js',
70
background: './src/background/index.js',
71
backendManager: './src/contentScripts/backendManager.js',
72
fileFetcher: './src/contentScripts/fileFetcher.js',
@@ -79,7 +80,14 @@ module.exports = {
80
output: {
81
path: __dirname + '/build',
82
publicPath: '/build/',
82
- filename: '[name].js',
83
+ filename: chunkData => {
84
+ switch (chunkData.chunk.name) {
85
+ case 'backend':
86
+ return 'react_devtools_backend_compact.js';
87
+ default:
88
+ return '[name].js';
89
+ }
90
+ },
91
chunkFilename: '[name].chunk.js',
92
},
93
node: {
@@ -141,7 +149,7 @@ module.exports = {
149
}),
150
new Webpack.SourceMapDevToolPlugin({
151
filename: '[file].map',
144
- include: 'installHook.js',
152
+ include: ['installHook.js', 'react_devtools_backend_compact.js'],
153
noSources: !__DEV__,
154
// https://github.com/webpack/webpack/issues/3603#issuecomment-1743147144
155
moduleFilenameTemplate(info) {
@@ -163,6 +171,7 @@ module.exports = {
171
}
172
173
const contentScriptNamesToIgnoreList = [
174
+ 'react_devtools_backend_compact',
175
// This is where we override console
176
'installHook',
177
];