@angular-devkit/build-angular 0.1100.0-rc.3 → 0.1100.3

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "0.1100.0-rc.3",
+  "version": "0.1100.3",
   "description": "Angular Webpack Build Facade",
   "experimental": true,
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.1100.0-rc.3",
-    "@angular-devkit/build-optimizer": "0.1100.0-rc.3",
-    "@angular-devkit/build-webpack": "0.1100.0-rc.3",
-    "@angular-devkit/core": "11.0.0-rc.3",
+    "@angular-devkit/architect": "0.1100.3",
+    "@angular-devkit/build-optimizer": "0.1100.3",
+    "@angular-devkit/build-webpack": "0.1100.3",
+    "@angular-devkit/core": "11.0.3",
     "@babel/core": "7.12.3",
     "@babel/generator": "7.12.1",
     "@babel/plugin-transform-runtime": "7.12.1",
@@ -18,7 +18,7 @@
     "@babel/runtime": "7.12.1",
     "@babel/template": "7.10.4",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "11.0.0-rc.3",
+    "@ngtools/webpack": "11.0.3",
     "ansi-colors": "4.1.1",
     "autoprefixer": "9.8.6",
     "babel-loader": "8.1.0",
@@ -28,7 +28,7 @@
     "circular-dependency-plugin": "5.2.0",
     "copy-webpack-plugin": "6.2.1",
     "core-js": "3.6.5",
-    "css-loader": "5.0.0",
+    "css-loader": "4.3.0",
     "cssnano": "4.1.10",
     "file-loader": "6.1.1",
     "find-cache-dir": "3.3.1",
@@ -78,10 +78,10 @@
     "worker-plugin": "5.0.0"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^11.0.0 || ^11.0.0-next",
-    "@angular/localize": "^11.0.0 || ^11.0.0-next",
-    "karma": "^5.2.0",
-    "ng-packagr": "^11.0.0 || ^11.0.0-next",
+    "@angular/compiler-cli": "^11.0.0",
+    "@angular/localize": "^11.0.0",
+    "karma": "~5.1.0",
+    "ng-packagr": "^11.0.0",
     "protractor": "^7.0.0",
     "tslint": "^6.1.0",
     "typescript": "~4.0.0"
@@ -124,11 +124,5 @@
   "bugs": {
     "url": "https://github.com/angular/angular-cli/issues"
   },
-  "homepage": "https://github.com/angular/angular-cli",
-  "husky": {
-    "hooks": {
-      "commit-msg": "yarn -s ng-dev commit-message pre-commit-validate --file-env-variable HUSKY_GIT_PARAMS",
-      "prepare-commit-msg": "yarn -s ng-dev commit-message restore-commit-message-draft --file-env-variable HUSKY_GIT_PARAMS"
-    }
-  }
+  "homepage": "https://github.com/angular/angular-cli"
 }

package/src/app-shell/schema.d.ts

@@ -9,7 +9,9 @@ export interface Schema {
      */
     appModuleBundle?: string;
     /**
-     * Target to build.
+     * A browser builder target use for rendering the app shell in the format of
+     * `project:target[:configuration]`. You can also pass in more than one configuration name
+     * as a comma-separated list. Example: `project:target:production,staging`.
      */
     browserTarget: string;
     /**
@@ -26,7 +28,9 @@ export interface Schema {
      */
     route?: string;
     /**
-     * Server target to use for rendering the app shell.
+     * A server builder target use for rendering the app shell in the format of
+     * `project:target[:configuration]`. You can also pass in more than one configuration name
+     * as a comma-separated list. Example: `project:target:production,staging`.
      */
     serverTarget: string;
 }

package/src/app-shell/schema.json

@@ -6,12 +6,12 @@
   "properties": {
     "browserTarget": {
       "type": "string",
-      "description": "Target to build.",
+      "description": "A browser builder target use for rendering the app shell in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
       "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
     },
     "serverTarget": {
       "type": "string",
-      "description": "Server target to use for rendering the app shell.",
+      "description": "A server builder target use for rendering the app shell in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
       "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
     },
     "appModuleBundle": {

package/src/browser/index.js

@@ -423,17 +423,17 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                     for (const result of processResults) {
                         const chunk = (_a = webpackStats.chunks) === null || _a === void 0 ? void 0 : _a.find((chunk) => chunk.id.toString() === result.name);
                         if (result.original) {
-                            bundleInfoStats.push(generateBundleInfoStats(result.original, chunk));
+                            bundleInfoStats.push(generateBundleInfoStats(result.original, chunk, 'modern'));
                         }
                         if (result.downlevel) {
-                            bundleInfoStats.push(generateBundleInfoStats(result.downlevel, chunk));
+                            bundleInfoStats.push(generateBundleInfoStats(result.downlevel, chunk, 'legacy'));
                         }
                     }
                     const unprocessedChunks = ((_b = webpackStats.chunks) === null || _b === void 0 ? void 0 : _b.filter((chunk) => !processResults
                         .find((result) => chunk.id.toString() === result.name))) || [];
                     for (const chunk of unprocessedChunks) {
                         const asset = (_c = webpackStats.assets) === null || _c === void 0 ? void 0 : _c.find(a => a.name === chunk.files[0]);
-                        bundleInfoStats.push(stats_1.generateBundleStats({ ...chunk, size: asset === null || asset === void 0 ? void 0 : asset.size }, true));
+                        bundleInfoStats.push(stats_1.generateBundleStats({ ...chunk, size: asset === null || asset === void 0 ? void 0 : asset.size }));
                     }
                     // Check for budget errors and display them to the user.
                     const budgets = options.budgets || [];
@@ -550,7 +550,7 @@ function mapErrorToMessage(error) {
 function assertNever(input) {
     throw new Error(`Unexpected call to assertNever() with input: ${JSON.stringify(input, null /* replacer */, 4 /* tabSize */)}`);
 }
-function generateBundleInfoStats(bundle, chunk) {
+function generateBundleInfoStats(bundle, chunk, chunkType) {
     return stats_1.generateBundleStats({
         size: bundle.size,
         files: bundle.map ? [bundle.filename, bundle.map.filename] : [bundle.filename],
@@ -558,6 +558,7 @@ function generateBundleInfoStats(bundle, chunk) {
         entry: !!(chunk === null || chunk === void 0 ? void 0 : chunk.names.includes('runtime')),
         initial: !!(chunk === null || chunk === void 0 ? void 0 : chunk.initial),
         rendered: true,
-    }, true);
+        chunkType,
+    });
 }
 exports.default = architect_1.createBuilder(buildWebpackBrowser);

package/src/browser/schema.d.ts

@@ -95,6 +95,9 @@ export interface Schema {
      * 'import()' syntax instead.
      */
     lazyModules?: string[];
+    /**
+     * Translate the bundles in one or more locales.
+     */
     localize?: Localize;
     /**
      * The full path for the main entry point to the app, relative to the current workspace.
@@ -109,7 +112,9 @@ export interface Schema {
      */
     ngswConfigPath?: string;
     /**
-     * Enables optimization of the build output.
+     * Enables optimization of the build output. Including minification of scripts and styles,
+     * tree-shaking, dead-code eliminiation and fonts inlining. For more information, see
+     * https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.
      */
     optimization?: OptimizationUnion;
     /**
@@ -303,9 +308,14 @@ export interface IndexObject {
      */
     output?: string;
 }
+/**
+ * Translate the bundles in one or more locales.
+ */
 export declare type Localize = string[] | boolean;
 /**
- * Enables optimization of the build output.
+ * Enables optimization of the build output. Including minification of scripts and styles,
+ * tree-shaking, dead-code eliminiation and fonts inlining. For more information, see
+ * https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.
  */
 export declare type OptimizationUnion = boolean | OptimizationClass;
 export interface OptimizationClass {

package/src/browser/schema.json

@@ -57,7 +57,7 @@
       "additionalProperties": false
     },
     "optimization": {
-      "description": "Enables optimization of the build output.",
+      "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code eliminiation and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.",
       "x-user-analytics": 16,
       "default": false,
       "oneOf": [
@@ -210,6 +210,7 @@
       "default": "warning"
     },
     "localize": {
+      "description": "Translate the bundles in one or more locales.",
       "oneOf": [
         {
           "type": "boolean",
@@ -429,11 +430,11 @@
           "properties": {
             "src": {
               "type": "string",
-              "pattern": "\\.([cm]?j|t)sx?$"
+              "pattern": "\\.(([cm]?j|t)sx?|json)$"
             },
             "replaceWith": {
               "type": "string",
-              "pattern": "\\.([cm]?j|t)sx?$"
+              "pattern": "\\.(([cm]?j|t)sx?|json)$"
             }
           },
           "additionalProperties": false,
@@ -447,11 +448,11 @@
           "properties": {
             "replace": {
               "type": "string",
-              "pattern": "\\.([cm]?j|t)sx?$"
+              "pattern": "\\.(([cm]?j|t)sx?|json)$"
             },
             "with": {
               "type": "string",
-              "pattern": "\\.([cm]?j|t)sx?$"
+              "pattern": "\\.(([cm]?j|t)sx?|json)$"
             }
           },
           "additionalProperties": false,

package/src/dev-server/index.js

@@ -19,6 +19,7 @@ const ts = require("typescript");
 const url = require("url");
 const webpackDevServer = require("webpack-dev-server");
 const browser_1 = require("../browser");
+const schema_1 = require("../browser/schema");
 const utils_1 = require("../utils");
 const cache_path_1 = require("../utils/cache-path");
 const check_port_1 = require("../utils/check-port");
@@ -64,7 +65,7 @@ function serveWebpackBrowser(options, context, transforms = {}) {
     async function setup() {
         var _a;
         // Get the browser configuration from the target name.
-        const rawBrowserOptions = await context.getTargetOptions(browserTarget);
+        const rawBrowserOptions = (await context.getTargetOptions(browserTarget));
         options.port = await check_port_1.checkPort((_a = options.port) !== null && _a !== void 0 ? _a : 4200, options.host || 'localhost');
         // Override options we need to override, if defined.
         const overrides = Object.keys(options)
@@ -82,6 +83,12 @@ function serveWebpackBrowser(options, context, transforms = {}) {
         }), {});
         // In dev server we should not have budgets because of extra libs such as socks-js
         overrides.budgets = undefined;
+        if (rawBrowserOptions.outputHashing && rawBrowserOptions.outputHashing !== schema_1.OutputHashing.None) {
+            // Disable output hashing for dev build as this can cause memory leaks
+            // See: https://github.com/webpack/webpack-dev-server/issues/377#issuecomment-241258405
+            overrides.outputHashing = schema_1.OutputHashing.None;
+            logger.warn(`Warning: 'outputHashing' option is disabled when using the dev-server.`);
+        }
         const browserName = await context.getBuilderNameForTarget(browserTarget);
         const browserOptions = await context.validateOptions({ ...rawBrowserOptions, ...overrides }, browserName);
         const { config, projectRoot, i18n } = await webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext(browserOptions, context, wco => [

package/src/dev-server/schema.d.ts

@@ -17,7 +17,9 @@ export interface Schema {
      */
     baseHref?: string;
     /**
-     * Target to serve.
+     * A browser builder target to serve in the format of `project:target[:configuration]`. You
+     * can also pass in more than one configuration name as a comma-separated list. Example:
+     * `project:target:production,staging`.
      */
     browserTarget: string;
     /**
@@ -62,7 +64,10 @@ export interface Schema {
      */
     open?: boolean;
     /**
-     * Enables optimization of the build output.
+     * Enables optimization of the build output. Including minification of scripts and styles,
+     * tree-shaking, dead-code eliminiation, tree-shaking and fonts inlining. For more
+     * information, see
+     * https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.
      * @deprecated Use the "optimization" option in the browser builder instead.
      */
     optimization?: OptimizationUnion;
@@ -130,7 +135,10 @@ export interface Schema {
     watch?: boolean;
 }
 /**
- * Enables optimization of the build output.
+ * Enables optimization of the build output. Including minification of scripts and styles,
+ * tree-shaking, dead-code eliminiation, tree-shaking and fonts inlining. For more
+ * information, see
+ * https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.
  * @deprecated Use the "optimization" option in the browser builder instead.
  */
 export declare type OptimizationUnion = boolean | OptimizationClass;

package/src/dev-server/schema.json

@@ -6,7 +6,7 @@
   "properties": {
     "browserTarget": {
       "type": "string",
-      "description": "Target to serve.",
+      "description": "A browser builder target to serve in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
       "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
     },
     "port": {
@@ -105,7 +105,7 @@
       "x-deprecated": "No longer has an effect."
     },
     "optimization": {
-      "description": "Enables optimization of the build output.",
+      "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code eliminiation, tree-shaking and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.",
       "x-user-analytics": 16,
       "oneOf": [
         {

package/src/extract-i18n/schema.d.ts

@@ -3,7 +3,9 @@
  */
 export interface Schema {
     /**
-     * Target to extract from.
+     * A browser builder target to extract i18n messages in the format of
+     * `project:target[:configuration]`. You can also pass in more than one configuration name
+     * as a comma-separated list. Example: `project:target:production,staging`.
      */
     browserTarget: string;
     /**

package/src/extract-i18n/schema.json

@@ -6,7 +6,7 @@
   "properties": {
     "browserTarget": {
       "type": "string",
-      "description": "Target to extract from.",
+      "description": "A browser builder target to extract i18n messages in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
       "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
     },
     "format": {

package/src/protractor/schema.d.ts

@@ -7,7 +7,9 @@ export interface Schema {
      */
     baseUrl?: string;
     /**
-     * Dev server target to run tests against.
+     * A dev-server builder target to run tests against in the format of
+     * `project:target[:configuration]`. You can also pass in more than one configuration name
+     * as a comma-separated list. Example: `project:target:production,staging`.
      */
     devServerTarget?: string;
     /**

package/src/protractor/schema.json

@@ -10,7 +10,7 @@
     },
     "devServerTarget": {
       "type": "string",
-      "description": "Dev server target to run tests against.",
+      "description": "A dev-server builder target to run tests against in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
       "pattern": "^([^:\\s]+:[^:\\s]+(:[^\\s]+)?)?$"
     },
     "grep": {

package/src/server/schema.d.ts

@@ -55,6 +55,9 @@ export interface Schema {
      * 'import()' syntax instead.
      */
     lazyModules?: string[];
+    /**
+     * Translate the bundles in one or more locales.
+     */
     localize?: Localize;
     /**
      * The name of the main entry-point file.
@@ -65,7 +68,9 @@ export interface Schema {
      */
     namedChunks?: boolean;
     /**
-     * Enables optimization of the build output.
+     * Enables optimization of the build output. Including minification of scripts and styles,
+     * tree-shaking and dead-code eliminiation. For more information, see
+     * https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.
      */
     optimization?: OptimizationUnion;
     /**
@@ -146,9 +151,14 @@ export declare enum I18NMissingTranslation {
     Ignore = "ignore",
     Warning = "warning"
 }
+/**
+ * Translate the bundles in one or more locales.
+ */
 export declare type Localize = string[] | boolean;
 /**
- * Enables optimization of the build output.
+ * Enables optimization of the build output. Including minification of scripts and styles,
+ * tree-shaking and dead-code eliminiation. For more information, see
+ * https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.
  */
 export declare type OptimizationUnion = boolean | OptimizationClass;
 export interface OptimizationClass {

package/src/server/schema.json

@@ -29,7 +29,7 @@
       "additionalProperties": false
     },
     "optimization": {
-      "description": "Enables optimization of the build output.",
+      "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking and dead-code eliminiation. For more information, see https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.",
       "x-user-analytics": 16,
       "default": false,
       "oneOf": [
@@ -142,6 +142,7 @@
       "default": "warning"
     },
     "localize": {
+      "description": "Translate the bundles in one or more locales.",
       "oneOf": [
         {
           "type": "boolean",
@@ -260,11 +261,11 @@
           "properties": {
             "src": {
               "type": "string",
-              "pattern": "\\.([cm]?j|t)sx?$"
+              "pattern": "\\.(([cm]?j|t)sx?|json)$"
             },
             "replaceWith": {
               "type": "string",
-              "pattern": "\\.([cm]?j|t)sx?$"
+              "pattern": "\\.(([cm]?j|t)sx?|json)$"
             }
           },
           "additionalProperties": false,
@@ -278,11 +279,11 @@
           "properties": {
             "replace": {
               "type": "string",
-              "pattern": "\\.([cm]?j|t)sx?$"
+              "pattern": "\\.(([cm]?j|t)sx?|json)$"
             },
             "with": {
               "type": "string",
-              "pattern": "\\.([cm]?j|t)sx?$"
+              "pattern": "\\.(([cm]?j|t)sx?|json)$"
             }
           },
           "additionalProperties": false,

package/src/utils/index-file/augment-index-html.js

@@ -41,7 +41,7 @@ async function augmentIndexHtml(params) {
             }
         }
     }
-    const scriptTags = [];
+    let scriptTags = [];
     for (const script of scripts) {
         const attrs = [`src="${deployUrl}${script}"`];
         if (crossOrigin !== 'none') {
@@ -75,7 +75,7 @@ async function augmentIndexHtml(params) {
         }
         scriptTags.push(`<script ${attrs.join(' ')}></script>`);
     }
-    const linkTags = [];
+    let linkTags = [];
     for (const stylesheet of stylesheets) {
         const attrs = [
             `rel="stylesheet"`,
@@ -124,17 +124,24 @@ async function augmentIndexHtml(params) {
                 for (const linkTag of linkTags) {
                     rewriter.emitRaw(linkTag);
                 }
+                linkTags = [];
                 break;
             case 'body':
                 // Add script tags
                 for (const scriptTag of scriptTags) {
                     rewriter.emitRaw(scriptTag);
                 }
+                scriptTags = [];
                 break;
         }
         rewriter.emitEndTag(tag);
     });
-    return transformedContent;
+    const content = await transformedContent;
+    if (linkTags.length || scriptTags.length) {
+        // In case no body/head tags are not present (dotnet partial templates)
+        return linkTags.join('') + scriptTags.join('') + content;
+    }
+    return content;
 }
 exports.augmentIndexHtml = augmentIndexHtml;
 function generateSriAttributes(content) {

package/src/utils/index-file/inline-fonts.js

@@ -122,10 +122,10 @@ class InlineFontsProcessor {
             cssContent += await this.getResponse(url, "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36" /* Chrome */);
             if (this.options.minifyInlinedCSS) {
                 cssContent = cssContent
+                    // Comments.
+                    .replace(/\/\*([\s\S]*?)\*\//g, '')
                     // New lines.
                     .replace(/\n/g, '')
-                    // Comments and new lines.
-                    .replace(/\/\*\s.+\s\*\//g, '')
                     // Safe spaces.
                     .replace(/\s?[\{\:\;]\s+/g, s => s.trim());
             }

package/src/webpack/configs/dev-server.js

@@ -30,6 +30,9 @@ function getDevServerConfig(wco) {
         const parsedHost = url.parse(publicHost);
         publicHost = parsedHost.host;
     }
+    else {
+        publicHost = '0.0.0.0:0';
+    }
     if (!watch) {
         // There's no option to turn off file watching in webpack-dev-server, but
         // we can override the file watcher instead.

package/src/webpack/configs/styles.js

@@ -198,7 +198,7 @@ function getStylesConfig(wco) {
     }));
     // load global css as css files
     if (globalStylePaths.length > 0) {
-        const globalSourceMap = !!(cssSourceMap && !buildOptions.extractCss && !buildOptions.sourceMap.hidden);
+        const globalSourceMap = !!cssSourceMap && !buildOptions.sourceMap.hidden;
         rules.push(...baseRules.map(({ test, use }) => {
             return {
                 include: globalStylePaths,

package/src/webpack/plugins/hmr/hmr-accept.js

@@ -34,7 +34,8 @@ function default_1(mod) {
         if (!appRef) {
             return;
         }
-        const oldInputs = document.querySelectorAll('input, textarea');
+        // Inputs that are hidden should be ignored
+        const oldInputs = document.querySelectorAll('input:not([type="hidden"]), textarea');
         const oldOptions = document.querySelectorAll('option');
         // Create new application
         appRef.components
@@ -115,8 +116,8 @@ function dispatchEvents(element) {
     element.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
 }
 function restoreFormValues(oldInputs, oldOptions) {
-    // Restore input
-    const newInputs = document.querySelectorAll('input, textarea');
+    // Restore input that are not hidden
+    const newInputs = document.querySelectorAll('input:not([type="hidden"]), textarea');
     if (newInputs.length && newInputs.length === oldInputs.length) {
         console.log('[NG HMR] Restoring input/textarea values.');
         for (let index = 0; index < newInputs.length; index++) {

package/src/webpack/plugins/karma.js

@@ -85,13 +85,14 @@ const init = (config, emitter, customFileHandlers) => {
         const hasIstanbulReporter = reporters.includes('coverage-istanbul');
         if (hasCoveragePlugin && !hasCoverageReporter) {
             reporters.push('coverage');
+            logger.warn(`There is a known issue with Karma and karma-coverage. Tests that exceed the coverage threshold will not fail. This will be fixed in Karma 5.2.x soon.`);
         }
         else if (hasIstanbulPlugin && !hasIstanbulReporter) {
             // coverage-istanbul is deprecated in favor of karma-coverage
             reporters.push('coverage-istanbul');
         }
-        else {
-            throw new Error('karma-coverage must be installed in order to run code coverage');
+        else if (!hasCoveragePlugin && !hasIstanbulPlugin) {
+            throw new Error('karma-coverage must be installed in order to run code coverage.');
         }
         if (hasIstanbulPlugin) {
             logger.warn(`'karma-coverage-istanbul-reporter' usage has been deprecated since version 11.\n` +

package/src/webpack/utils/stats.d.ts

@@ -10,9 +10,11 @@ import { WebpackLoggingCallback } from '@angular-devkit/build-webpack';
 import { Configuration, Stats } from 'webpack';
 export declare function formatSize(size: number): string;
 export declare type BundleStatsData = [files: string, names: string, size: number | string];
+export declare type ChunkType = 'modern' | 'legacy' | 'unknown';
 export interface BundleStats {
     initial: boolean;
     stats: BundleStatsData;
+    chunkType: ChunkType;
 }
 export declare function generateBundleStats(info: {
     size?: number;
@@ -21,7 +23,8 @@ export declare function generateBundleStats(info: {
     entry: boolean;
     initial: boolean;
     rendered?: boolean;
-}, colors: boolean): BundleStats;
+    chunkType?: ChunkType;
+}): BundleStats;
 export declare function statsWarningsToString(json: any, statsConfig: any): string;
 export declare function statsErrorsToString(json: any, statsConfig: any): string;
 export declare function statsHasErrors(json: any): boolean;

package/src/webpack/utils/stats.js

@@ -27,13 +27,15 @@ function formatSize(size) {
 }
 exports.formatSize = formatSize;
 ;
-function generateBundleStats(info, colors) {
+function generateBundleStats(info) {
     var _a;
     const size = typeof info.size === 'number' ? info.size : '-';
     const files = info.files.filter(f => !f.endsWith('.map')).map(f => path.basename(f)).join(', ');
     const names = ((_a = info.names) === null || _a === void 0 ? void 0 : _a.length) ? info.names.join(', ') : '-';
     const initial = !!(info.entry || info.initial);
+    const chunkType = info.chunkType || 'unknown';
     return {
+        chunkType,
         initial,
         stats: [files, names, size],
     };
@@ -46,8 +48,10 @@ function generateBuildStatsTable(data, colors, showTotalSize) {
     const dim = (x) => colors ? color_1.colors.dim(x) : x;
     const changedEntryChunksStats = [];
     const changedLazyChunksStats = [];
-    let initialTotalSize = 0;
-    for (const { initial, stats } of data) {
+    let initialModernTotalSize = 0;
+    let initialLegacyTotalSize = 0;
+    let modernFileSuffix;
+    for (const { initial, stats, chunkType } of data) {
         const [files, names, size] = stats;
         const data = [
             g(files),
@@ -57,7 +61,22 @@ function generateBuildStatsTable(data, colors, showTotalSize) {
         if (initial) {
             changedEntryChunksStats.push(data);
             if (typeof size === 'number') {
-                initialTotalSize += size;
+                switch (chunkType) {
+                    case 'modern':
+                        initialModernTotalSize += size;
+                        if (!modernFileSuffix) {
+                            const match = files.match(/-(es20\d{2}|esnext)/);
+                            modernFileSuffix = match === null || match === void 0 ? void 0 : match[1].toString().toUpperCase();
+                        }
+                        break;
+                    case 'legacy':
+                        initialLegacyTotalSize += size;
+                        break;
+                    default:
+                        initialModernTotalSize += size;
+                        initialLegacyTotalSize += size;
+                        break;
+                }
             }
         }
         else {
@@ -70,7 +89,12 @@ function generateBuildStatsTable(data, colors, showTotalSize) {
         bundleInfo.push(['Initial Chunk Files', 'Names', 'Size'].map(bold), ...changedEntryChunksStats);
         if (showTotalSize) {
             bundleInfo.push([]);
-            bundleInfo.push([' ', 'Initial Total', formatSize(initialTotalSize)].map(bold));
+            if (initialModernTotalSize === initialLegacyTotalSize) {
+                bundleInfo.push([' ', 'Initial Total', formatSize(initialModernTotalSize)].map(bold));
+            }
+            else {
+                bundleInfo.push([' ', 'Initial ES5 Total', formatSize(initialLegacyTotalSize)].map(bold), [' ', `Initial ${modernFileSuffix} Total`, formatSize(initialModernTotalSize)].map(bold));
+            }
         }
     }
     // Seperator
@@ -103,7 +127,7 @@ function statsToString(json, statsConfig, bundleState) {
             }
             const assets = json.assets.filter((asset) => chunk.files.includes(asset.name));
             const summedSize = assets.filter((asset) => !asset.name.endsWith(".map")).reduce((total, asset) => { return total + asset.size; }, 0);
-            changedChunksStats.push(generateBundleStats({ ...chunk, size: summedSize }, colors));
+            changedChunksStats.push(generateBundleStats({ ...chunk, size: summedSize }));
         }
         unchangedChunkNumber = json.chunks.length - changedChunksStats.length;
     }