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

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

Author: clydin

etc/api/angular_devkit/build_optimizer/src/_golden-api.d.ts

@@ -6,7 +6,17 @@ export declare class BuildOptimizerWebpackPlugin {
     apply(compiler: Compiler): void;
 }
 
-export default function buildOptimizerLoader(this: webpack.loader.LoaderContext, content: string, previousSourceMap: RawSourceMap): void;
+export default function buildOptimizerLoader(this: {
+    resourcePath: string;
+    _module: {
+        factoryMeta: {
+            skipBuildOptimizer?: boolean;
+            sideEffectFree?: boolean;
+        };
+    };
+    cacheable(): void;
+    callback(error?: Error | null, content?: string, sourceMap?: unknown): void;
+}, content: string, previousSourceMap: RawSourceMap): void;
 
 export declare function getPrefixClassesTransformer(): ts.TransformerFactory<ts.SourceFile>;
 

packages/angular_devkit/build_optimizer/package.json

@@ -14,5 +14,13 @@
     "tslib": "2.1.0",
     "typescript": "4.1.5",
     "webpack-sources": "2.2.0"
+  },
+  "peerDependencies": {
+    "webpack": "^4.0.0 || ^5.20.0"
+  },
+  "peerDependenciesMeta": {
+    "webpack": {
+      "optional": true
+    }
   }
 }

packages/angular_devkit/build_optimizer/src/build-optimizer/webpack-loader.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { RawSourceMap } from 'source-map';
-import * as webpack from 'webpack'; // tslint:disable-line:no-implicit-dependencies
 import { SourceMapSource } from 'webpack-sources';
 const loaderUtils = require('loader-utils');
 
@@ -27,26 +26,25 @@ const alwaysProcess = (path: string) =>
   path.endsWith('.ngstyle.js');
 
 export default function buildOptimizerLoader(
-  this: webpack.loader.LoaderContext,
+  // Webpack 5 does not provide a LoaderContext type
+  this: {
+    resourcePath: string;
+    _module: { factoryMeta: { skipBuildOptimizer?: boolean; sideEffectFree?: boolean } };
+    cacheable(): void;
+    callback(error?: Error | null, content?: string, sourceMap?: unknown): void;
+  },
   content: string,
   previousSourceMap: RawSourceMap,
 ) {
   this.cacheable();
-  const callback = this.async();
-  if (!callback) {
-    throw new Error('Async loader support is required.');
-  }
 
   const skipBuildOptimizer =
     this._module && this._module.factoryMeta && this._module.factoryMeta.skipBuildOptimizer;
 
   if (!alwaysProcess(this.resourcePath) && skipBuildOptimizer) {
     // Skip loading processing this file with Build Optimizer if we determined in
     // BuildOptimizerWebpackPlugin that we shouldn't.
-
-    // Webpack typings for previousSourceMap are wrong, they are JSON objects and not strings.
-    // tslint:disable-next-line:no-any
-    this.callback(null, content, previousSourceMap as any);
+    this.callback(null, content, previousSourceMap);
 
     return;
   }
@@ -64,8 +62,7 @@ export default function buildOptimizerLoader(
   });
 
   if (boOutput.emitSkipped || boOutput.content === null) {
-    // tslint:disable-next-line:no-any
-    this.callback(null, content, previousSourceMap as any);
+    this.callback(null, content, previousSourceMap);
 
     return;
   }
@@ -81,10 +78,7 @@ export default function buildOptimizerLoader(
 
     if (previousSourceMap) {
       // Use http://sokra.github.io/source-map-visualization/ to validate sourcemaps make sense.
-
-      // The last argument is not yet in the typings
-      // tslint:disable-next-line: no-any
-      newSourceMap = new (SourceMapSource as any)(
+      newSourceMap = new SourceMapSource(
         newContent,
         this.resourcePath,
         intermediateSourceMap,
@@ -98,7 +92,5 @@ export default function buildOptimizerLoader(
     }
   }
 
-  // Webpack typings for previousSourceMap are wrong, they are JSON objects and not strings.
-  // tslint:disable-next-line:no-any
-  callback(null, newContent, newSourceMap as any);
+  this.callback(null, newContent, newSourceMap);
 }

packages/angular_devkit/build_optimizer/src/build-optimizer/webpack-plugin.ts

@@ -1,18 +1,22 @@
-
 /**
  * @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 { Compiler } from 'webpack';  // tslint:disable-line:no-implicit-dependencies
+import { Compiler } from 'webpack';
+
+interface ModuleData {
+  resourceResolveData: { descriptionFileData?: { typings?: string } };
+}
 
 export class BuildOptimizerWebpackPlugin {
   apply(compiler: Compiler) {
     compiler.hooks.normalModuleFactory.tap('BuildOptimizerWebpackPlugin', nmf => {
+      // tslint:disable-next-line: no-any
       nmf.hooks.module.tap('BuildOptimizerWebpackPlugin', (module, data) => {
-        const { descriptionFileData } = data.resourceResolveData;
+        const { descriptionFileData } = (data as ModuleData).resourceResolveData;
         if (descriptionFileData) {
           // Only TS packages should use Build Optimizer.
           // Notes: