build: upgrade webpack and related deps (#34990)

build/webpack/webpack.config.base.js

@@ -75,9 +75,17 @@ module.exports = ({
 
     if (targetDeletesNodeGlobals) {
       plugins.push(new webpack.ProvidePlugin({
-        process: ['@electron/internal/common/webpack-provider', 'process'],
+        Buffer: ['@electron/internal/common/webpack-provider', 'Buffer'],
         global: ['@electron/internal/common/webpack-provider', '_global'],
-        Buffer: ['@electron/internal/common/webpack-provider', 'Buffer']
+        process: ['@electron/internal/common/webpack-provider', 'process']
+      }));
+    }
+
+    // Webpack 5 no longer polyfills process or Buffer.
+    if (!alwaysHasNode) {
+      plugins.push(new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+        process: 'process/browser'
       }));
     }
 
@@ -129,7 +137,12 @@ if ((globalThis.process || binding.process).argv.includes("--profile-electron-in
           // Force timers to resolve to our dependency that doesn't use window.postMessage
           timers: path.resolve(electronRoot, 'node_modules', 'timers-browserify', 'main.js')
         },
-        extensions: ['.ts', '.js']
+        extensions: ['.ts', '.js'],
+        fallback: {
+          // We provide our own "timers" import above, any usage of setImmediate inside
+          // one of our renderer bundles should import it from the 'timers' package
+          setImmediate: false
+        }
       },
       module: {
         rules: [{
@@ -150,10 +163,7 @@ if ((globalThis.process || binding.process).argv.includes("--profile-electron-in
       },
       node: {
         __dirname: false,
-        __filename: false,
-        // We provide our own "timers" import above, any usage of setImmediate inside
-        // one of our renderer bundles should import it from the 'timers' package
-        setImmediate: false
+        __filename: false
       },
       optimization: {
         minimize: env.mode === 'production',

build/webpack/webpack.gni

@@ -30,11 +30,14 @@ template("webpack_build") {
     args = [
       "--config",
       rebase_path(invoker.config_file),
-      "--output-filename=" + get_path_info(invoker.out_file, "file"),
-      "--output-path=" + rebase_path(get_path_info(invoker.out_file, "dir")),
-      "--env.buildflags=" +
-          rebase_path("$target_gen_dir/buildflags/buildflags.h"),
-      "--env.mode=" + mode,
+      "--output-filename",
+      get_path_info(invoker.out_file, "file"),
+      "--output-path",
+      rebase_path(get_path_info(invoker.out_file, "dir")),
+      "--env",
+      "buildflags=" + rebase_path("$target_gen_dir/buildflags/buildflags.h"),
+      "--env",
+      "mode=" + mode,
     ]
     deps += [ "//electron/buildflags" ]
 

package.json

@@ -27,12 +27,13 @@
     "@types/stream-json": "^1.5.1",
     "@types/temp": "^0.8.34",
     "@types/uuid": "^3.4.6",
-    "@types/webpack": "^4.41.21",
-    "@types/webpack-env": "^1.16.3",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-env": "^1.17.0",
     "@typescript-eslint/eslint-plugin": "^4.4.1",
     "@typescript-eslint/parser": "^4.4.1",
     "asar": "^3.1.0",
     "aws-sdk": "^2.814.0",
+    "buffer": "^6.0.3",
     "check-for-leaks": "^1.2.1",
     "colors": "1.4.0",
     "dotenv-safe": "^4.0.4",
@@ -57,6 +58,7 @@
     "minimist": "^1.2.6",
     "null-loader": "^4.0.0",
     "pre-flight": "^1.1.0",
+    "process": "^0.11.10",
     "remark-cli": "^10.0.0",
     "remark-preset-lint-markdown-style-guide": "^4.0.0",
     "semver": "^5.6.0",
@@ -69,8 +71,8 @@
     "ts-loader": "^8.0.2",
     "ts-node": "6.2.0",
     "typescript": "^4.5.5",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
     "wrapper-webpack-plugin": "^2.1.0"
   },
   "private": true,
@@ -146,4 +148,4 @@
   "resolutions": {
     "nan": "nodejs/nan#16fa32231e2ccd89d2804b3f765319128b20c4ac"
   }
-}
+}

script/gen-filenames.ts

@@ -48,10 +48,10 @@ const main = async () => {
     const child = cp.spawn('node', [
       './node_modules/webpack-cli/bin/cli.js',
       '--config', `./build/webpack/${webpackTarget.config}`,
-      '--display', 'errors-only',
-      `--output-path=${tmpDir}`,
-      `--output-filename=${webpackTarget.name}.measure.js`,
-      '--env.PRINT_WEBPACK_GRAPH'
+      '--stats', 'errors-only',
+      '--output-path', tmpDir,
+      '--output-filename', `${webpackTarget.name}.measure.js`,
+      '--env', 'PRINT_WEBPACK_GRAPH'
     ], {
       cwd: path.resolve(__dirname, '..')
     });