feat(@angular-devkit/build-webpack): support Webpack 5

The `@angular-devkit/build-webpack` package now officially supports Webpack 5.
Webpack 4 support is temporarily maintained while the remainder of the tooling is transitioned.

Author: clydin

packages/angular_devkit/build_webpack/package.json

@@ -12,10 +12,11 @@
   },
   "devDependencies": {
     "@angular-devkit/core": "0.0.0",
-    "node-fetch": "2.6.1"
+    "node-fetch": "2.6.1",
+    "webpack": "5.30.0"
   },
   "peerDependencies": {
-    "webpack": "^4.6.0",
+    "webpack": "^4.6.0 || ^5.30.0",
     "webpack-dev-server": "^3.1.4"
   }
 }

packages/angular_devkit/build_webpack/src/webpack-5.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import * as webpack from 'webpack';
+
+// Webpack 5 transition support types
+declare module 'webpack' {
+  export namespace compilation {
+    export type Chunk = webpack.Chunk;
+    export type Compilation = webpack.Compilation;
+  }
+
+  export namespace Stats {
+    export type ToJsonOutput = webpack.StatsCompilation;
+  }
+}

packages/angular_devkit/build_webpack/src/webpack-dev-server/index.ts

@@ -52,16 +52,21 @@ export function runWebpackDevServer(
     config: WebpackDevServer.Configuration,
   ) => {
     if (options.webpackDevServerFactory) {
-      return new options.webpackDevServerFactory(webpack, config);
+      // webpack-dev-server types currently do not support Webpack 5
+      // tslint:disable-next-line: no-any
+      return new options.webpackDevServerFactory(webpack as any, config);
     }
 
-    return new WebpackDevServer(webpack, config);
+    // webpack-dev-server types currently do not support Webpack 5
+    // tslint:disable-next-line: no-any
+    return new WebpackDevServer(webpack as any, config);
   };
 
   const log: WebpackLoggingCallback = options.logging
     || ((stats, config) => context.logger.info(stats.toString(config.stats)));
 
-  const devServerConfig = options.devServerConfig || config.devServer || {};
+  // tslint:disable-next-line: no-any
+  const devServerConfig = options.devServerConfig || (config as any).devServer || {};
   if (devServerConfig.stats) {
     config.stats = devServerConfig.stats;
   }
@@ -110,7 +115,10 @@ export function runWebpackDevServer(
       );
 
       // Teardown logic. Close the server when unsubscribed from.
-      return () => server.close();
+      return (() => {
+        server.close();
+        webpackCompiler.close?.(() => {});
+      });
     })),
   );
 }

yarn.lock

@@ -87,7 +87,7 @@
 
 "@angular/dev-infra-private@https://github.com/angular/dev-infra-private-builds.git#001abdbcf9bd49e46dd3a678898dc104c8148a9f":
   version "0.0.0"
-  resolved "https://github.com/angular/dev-infra-private-builds.git#001abdbcf9bd49e46dd3a678898dc104c8148a9f"
+  resolved "https://github.com/angular/dev-infra-private-builds.git#b8bc310f856ff98bf501a95980ec8c904bff9d55"
   dependencies:
     "@angular/benchpress" "0.2.1"
     "@bazel/buildifier" "^0.29.0"
@@ -5384,6 +5384,11 @@ es-module-lexer@^0.3.26:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.3.26.tgz#7b507044e97d5b03b01d4392c74ffeb9c177a83b"
   integrity sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA==
 
+es-module-lexer@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.4.1.tgz#dda8c6a14d8f340a24e34331e0fab0cb50438e0e"
+  integrity sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -13393,6 +13398,35 @@ [email protected]:
     watchpack "^2.0.0"
     webpack-sources "^2.1.1"
 
+[email protected]:
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.30.0.tgz#07d87c182a060e0c2491062f3dc0edc85a29d884"
+  integrity sha512-Zr9NIri5yzpfmaMea2lSMV1UygbW0zQsSlGLMgKUm63ACXg6alhd1u4v5UBSBjzYKXJN6BNMGVM7w165e7NxYA==
+  dependencies:
+    "@types/eslint-scope" "^3.7.0"
+    "@types/estree" "^0.0.46"
+    "@webassemblyjs/ast" "1.11.0"
+    "@webassemblyjs/wasm-edit" "1.11.0"
+    "@webassemblyjs/wasm-parser" "1.11.0"
+    acorn "^8.0.4"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.7.0"
+    es-module-lexer "^0.4.0"
+    eslint-scope "^5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.4"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.0.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.1.1"
+    watchpack "^2.0.0"
+    webpack-sources "^2.1.1"
+
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"