refactor(@angular-devkit/build-angular): use Webpack ChunkGraph API in SuppressExtractedTextChunksWebpackPlugin

Author: clydin

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/suppress-entry-chunks-webpack-plugin.ts

@@ -5,58 +5,82 @@
  * 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
  */
-// tslint:disable
-// TODO: cleanup this file, it's copied as is from Angular CLI.
-
-// Remove .js files from entry points consisting entirely of .css|scss|sass|less|styl.
-// To be used together with ExtractTextPlugin.
 
+/**
+ * Remove .js files from entry points consisting entirely of stylesheets.
+ * To be used together with mini-css-extract-plugin.
+ */
 export class SuppressExtractedTextChunksWebpackPlugin {
-  constructor() { }
-
-  apply(compiler: any): void {
-    compiler.hooks.compilation.tap('SuppressExtractedTextChunks', (compilation: any) => {
-      // find which chunks have css only entry points
-      const cssOnlyChunks: string[] = [];
-      const entryPoints = compilation.options.entry;
-      // determine which entry points are composed entirely of css files
-      for (let entryPoint of Object.keys(entryPoints)) {
-        let entryFiles: string[] | string = entryPoints[entryPoint];
-        // when type of entryFiles is not array, make it as an array
-        entryFiles = entryFiles instanceof Array ? entryFiles : [entryFiles];
-        if (entryFiles.every((el: string) =>
-          el.match(/\.(css|scss|sass|less|styl)$/) !== null)) {
-          cssOnlyChunks.push(entryPoint);
+  apply(compiler: import('webpack').Compiler): void {
+    compiler.hooks.compilation.tap('SuppressExtractedTextChunks', (compilation) => {
+      compilation.hooks.chunkAsset.tap('SuppressExtractedTextChunks', (chunk, filename) => {
+        // Remove only JavaScript assets
+        if (!filename.endsWith('.js')) {
+          return;
+        }
+
+        // Only chunks with a css asset should have JavaScript assets removed
+        let hasCssFile = false;
+        // chunk.files is an Array in Webpack 4 and a Set in Webpack 5
+        for (const file of chunk.files) {
+          if (file.endsWith('.css')) {
+            hasCssFile = true;
+            break;
+          }
+        }
+
+        if (!hasCssFile) {
+          return;
         }
-      }
-      // Remove the js file for supressed chunks
-      compilation.hooks.afterSeal.tap('SuppressExtractedTextChunks', () => {
-        compilation.chunks
-          .filter((chunk: any) => cssOnlyChunks.indexOf(chunk.name) !== -1)
-          .forEach((chunk: any) => {
-            let newFiles: string[] = [];
-            chunk.files.forEach((file: string) => {
-              if (file.match(/\.js(\.map)?$/)) {
-                // remove js files
-                delete compilation.assets[file];
-              } else {
-                newFiles.push(file);
-              }
+
+        // Only chunks with all CSS entry dependencies should have JavaScript assets removed
+        let cssOnly = false;
+        // The any cast is used for default Webpack 4 type compatibility
+        // tslint:disable-next-line: no-any
+        const entryModules = (compilation as any).chunkGraph?.getChunkEntryModulesIterable(chunk);
+        if (entryModules) {
+          // Webpack 5
+          for (const module of entryModules) {
+            cssOnly = module.dependencies.every(
+              (dependency: {}) => dependency.constructor.name === 'CssDependency',
+            );
+
+            if (!cssOnly) {
+              break;
+            }
+          }
+        } else {
+          // Webpack 4
+          for (const module of chunk.modulesIterable as Iterable<{ dependencies: {}[] }>) {
+            cssOnly = module.dependencies.every((dependency) => {
+              const name = dependency.constructor.name;
+
+              return (
+                name === 'CssDependency' ||
+                name === 'SingleEntryDependency' ||
+                name === 'MultiEntryDependency'
+              );
             });
-            chunk.files = newFiles;
-          });
+
+            if (!cssOnly) {
+              break;
+            }
+          }
+        }
+
+        if (cssOnly) {
+          if (Array.isArray(chunk.files)) {
+            // Webpack 4
+            (chunk.files as string[]) = chunk.files.filter((file) => file !== filename);
+            delete compilation.assets[filename];
+          } else {
+            // Webpack 5
+            // Casting is used for default Webpack 4 type compatibility
+            ((chunk.files as unknown) as Set<string>).delete(filename);
+            ((compilation as unknown) as { deleteAsset(file: string): void }).deleteAsset(filename);
+          }
+        }
       });
-      // Remove scripts tags with a css file as source, because HtmlWebpackPlugin will use
-      // a css file as a script for chunks without js files.
-      // TODO: Enable this once HtmlWebpackPlugin supports Webpack 4
-      // compilation.plugin('html-webpack-plugin-alter-asset-tags',
-      //   (htmlPluginData: any, callback: any) => {
-      //     const filterFn = (tag: any) =>
-      //       !(tag.tagName === 'script' && tag.attributes.src.match(/\.css$/));
-      //     htmlPluginData.head = htmlPluginData.head.filter(filterFn);
-      //     htmlPluginData.body = htmlPluginData.body.filter(filterFn);
-      //     callback(null, htmlPluginData);
-      //   });
     });
   }
 }