fix(@angular-devkit/build-angular): fixes optimizeChunkAssets is deprecated in webpack 5

Author: valorkin

packages/angular_devkit/build_angular/src/webpack/plugins/optimize-css-webpack-plugin.ts

@@ -8,25 +8,49 @@
 import * as cssNano from 'cssnano';
 import { ProcessOptions, Result } from 'postcss';
 import { Compiler, compilation } from 'webpack';
-import { RawSource, SourceMapSource } from 'webpack-sources';
+import { RawSource, Source, SourceMapSource } from 'webpack-sources';
 import { addWarning } from '../../utils/webpack-diagnostics';
+import { isWebpackFiveOrHigher } from '../../utils/webpack-version';
 
 export interface OptimizeCssWebpackPluginOptions {
   sourceMap: boolean;
   test: (file: string) => boolean;
 }
 
+const PLUGIN_NAME = 'optimize-css-webpack-plugin';
+
 function hook(
   compiler: Compiler,
-  action: (
-    compilation: compilation.Compilation,
-    chunks: Iterable<compilation.Chunk>,
-  ) => Promise<void>,
+  action: (compilation: compilation.Compilation, assetsURI: string[]) => Promise<void>,
 ) {
-  compiler.hooks.compilation.tap('optimize-css-webpack-plugin', (compilation) => {
-    compilation.hooks.optimizeChunkAssets.tapPromise('optimize-css-webpack-plugin', (chunks) =>
-      action(compilation, chunks),
-    );
+  compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+    if (isWebpackFiveOrHigher()) {
+      // webpack 5 migration "guide"
+      // https://github.com/webpack/webpack/blob/07fc554bef5930f8577f91c91a8b81791fc29746/lib/Compilation.js#L527-L532
+      // TODO_WEBPACK_5 const stage = Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE;
+      const stage = 100;
+      // tslint:disable-next-line: no-any
+      (compilation.hooks as any)
+        .processAssets.tapPromise({name: PLUGIN_NAME, stage}, (assets: Record<string, Source>) => {
+          return action(compilation, Object.keys(assets));
+      });
+    } else {
+      compilation.hooks.optimizeChunkAssets
+        .tapPromise(PLUGIN_NAME, (chunks: compilation.Chunk[]) => {
+          const files: string[] = [];
+          for (const chunk of chunks) {
+            if (!chunk.files) {
+              continue;
+            }
+
+            for (const file of chunk.files) {
+              files.push(file);
+            }
+          }
+
+          return action(compilation, files);
+        });
+    }
   });
 }
 
@@ -42,18 +66,8 @@ export class OptimizeCssWebpackPlugin {
   }
 
   apply(compiler: Compiler): void {
-    hook(compiler, (compilation: compilation.Compilation, chunks: Iterable<compilation.Chunk>) => {
-      const files: string[] = [...compilation.additionalChunkAssets];
-
-      for (const chunk of chunks) {
-        if (!chunk.files) {
-          continue;
-        }
-
-        for (const file of chunk.files) {
-          files.push(file);
-        }
-      }
+    hook(compiler, (compilation: compilation.Compilation, assetsURI: string[]) => {
+      const files = [...compilation.additionalChunkAssets, ...assetsURI];
 
       const actions = files
         .filter(file => this._options.test(file))