@angular-devkit/build-angular 13.0.2 → 13.1.0-next.2

package/src/webpack/plugins/json-stats-plugin.js

@@ -0,0 +1,54 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JsonStatsPlugin = void 0;
+const fs_1 = require("fs");
+const path_1 = require("path");
+const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
+class JsonStatsPlugin {
+    constructor(statsOutputPath) {
+        this.statsOutputPath = statsOutputPath;
+    }
+    apply(compiler) {
+        compiler.hooks.done.tapPromise('angular-json-stats', async (stats) => {
+            const { stringifyStream } = await Promise.resolve().then(() => __importStar(require('@discoveryjs/json-ext')));
+            const data = stats.toJson('verbose');
+            try {
+                await fs_1.promises.mkdir((0, path_1.dirname)(this.statsOutputPath), { recursive: true });
+                await new Promise((resolve, reject) => stringifyStream(data)
+                    .pipe((0, fs_1.createWriteStream)(this.statsOutputPath))
+                    .on('close', resolve)
+                    .on('error', reject));
+            }
+            catch (error) {
+                (0, webpack_diagnostics_1.addError)(stats.compilation, `Unable to write stats file: ${error.message || 'unknown error'}`);
+            }
+        });
+    }
+}
+exports.JsonStatsPlugin = JsonStatsPlugin;

package/src/webpack/plugins/progress-plugin.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Google LLC 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 { ProgressPlugin as WebpackProgressPlugin } from 'webpack';
+export declare class ProgressPlugin extends WebpackProgressPlugin {
+    constructor(platform: 'server' | 'browser');
+}

package/src/webpack/plugins/progress-plugin.js

@@ -0,0 +1,38 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressPlugin = void 0;
+const webpack_1 = require("webpack");
+const spinner_1 = require("../../utils/spinner");
+class ProgressPlugin extends webpack_1.ProgressPlugin {
+    constructor(platform) {
+        const platformCapitalFirst = platform.replace(/^\w/, (s) => s.toUpperCase());
+        const spinner = new spinner_1.Spinner();
+        spinner.start(`Generating ${platform} application bundles (phase: setup)...`);
+        super({
+            handler: (percentage, message) => {
+                const phase = message ? ` (phase: ${message})` : '';
+                spinner.text = `Generating ${platform} application bundles${phase}...`;
+                switch (percentage) {
+                    case 1:
+                        if (spinner.isSpinning) {
+                            spinner.succeed(`${platformCapitalFirst} application bundle generation complete.`);
+                        }
+                        break;
+                    case 0:
+                        if (!spinner.isSpinning) {
+                            spinner.start();
+                        }
+                        break;
+                }
+            },
+        });
+    }
+}
+exports.ProgressPlugin = ProgressPlugin;

package/src/webpack/plugins/transfer-size-plugin.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright Google LLC 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';
+export declare class TransferSizePlugin {
+    constructor();
+    apply(compiler: Compiler): void;
+}

package/src/webpack/plugins/transfer-size-plugin.js

@@ -0,0 +1,47 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransferSizePlugin = void 0;
+const util_1 = require("util");
+const zlib_1 = require("zlib");
+const brotliCompressAsync = (0, util_1.promisify)(zlib_1.brotliCompress);
+const PLUGIN_NAME = 'angular-transfer-size-estimator';
+class TransferSizePlugin {
+    constructor() { }
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.processAssets.tapPromise({
+                name: PLUGIN_NAME,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ANALYSE,
+            }, async (compilationAssets) => {
+                const actions = [];
+                for (const assetName of Object.keys(compilationAssets)) {
+                    if (!assetName.endsWith('.js') && !assetName.endsWith('.css')) {
+                        continue;
+                    }
+                    const scriptAsset = compilation.getAsset(assetName);
+                    if (!scriptAsset || scriptAsset.source.size() <= 0) {
+                        continue;
+                    }
+                    actions.push(brotliCompressAsync(scriptAsset.source.source())
+                        .then((result) => {
+                        compilation.updateAsset(assetName, (s) => s, {
+                            estimatedTransferSize: result.length,
+                        });
+                    })
+                        .catch((error) => {
+                        compilation.warnings.push(new compilation.compiler.webpack.WebpackError(`Unable to calculate estimated transfer size for '${assetName}'. Reason: ${error.message}`));
+                    }));
+                }
+                await Promise.all(actions);
+            });
+        });
+    }
+}
+exports.TransferSizePlugin = TransferSizePlugin;

package/src/webpack/{configs/browser.d.ts → plugins/typescript.d.ts}

@@ -5,6 +5,6 @@
  * 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';
+import { AngularWebpackPlugin } from '@ngtools/webpack';
 import { WebpackConfigOptions } from '../../utils/build-options';
-export declare function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configuration;
+export declare function createIvyPlugin(wco: WebpackConfigOptions, aot: boolean, tsconfig: string): AngularWebpackPlugin;

package/src/webpack/{configs → plugins}/typescript.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTypescriptWorkerPlugin = exports.getTypeScriptConfig = void 0;
+exports.createIvyPlugin = void 0;
 const core_1 = require("@angular-devkit/core");
 const webpack_1 = require("@ngtools/webpack");
 const typescript_1 = require("typescript");
@@ -22,6 +22,9 @@ function ensureIvy(wco) {
     wco.tsConfig.options.enableIvy = true;
 }
 function createIvyPlugin(wco, aot, tsconfig) {
+    if (aot) {
+        ensureIvy(wco);
+    }
     const { buildOptions } = wco;
     const optimize = buildOptions.optimization.scripts;
     const compilerOptions = {
@@ -69,26 +72,4 @@ function createIvyPlugin(wco, aot, tsconfig) {
         inlineStyleFileExtension,
     });
 }
-function getTypeScriptConfig(wco) {
-    const { buildOptions: { aot = false, main, polyfills }, tsConfigPath, } = wco;
-    if (main || polyfills) {
-        ensureIvy(wco);
-        return {
-            module: {
-                rules: [
-                    {
-                        test: /\.[jt]sx?$/,
-                        loader: webpack_1.AngularWebpackLoaderPath,
-                    },
-                ],
-            },
-            plugins: [createIvyPlugin(wco, aot, tsConfigPath)],
-        };
-    }
-    return {};
-}
-exports.getTypeScriptConfig = getTypeScriptConfig;
-function getTypescriptWorkerPlugin(wco, workerTsConfigPath) {
-    return createIvyPlugin(wco, false, workerTsConfigPath);
-}
-exports.getTypescriptWorkerPlugin = getTypescriptWorkerPlugin;
+exports.createIvyPlugin = createIvyPlugin;

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

@@ -5,8 +5,10 @@
  * 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 { Configuration, SourceMapDevToolPlugin } from 'webpack';
-import { ExtraEntryPoint, ExtraEntryPointClass } from '../../builders/browser/schema';
+import type { ObjectPattern } from 'copy-webpack-plugin';
+import type { Configuration, WebpackOptionsNormalized } from 'webpack';
+import { AssetPatternClass, ExtraEntryPoint, ExtraEntryPointClass } from '../../builders/browser/schema';
+import { WebpackConfigOptions } from '../../utils/build-options';
 export interface HashFormat {
     chunk: string;
     extract: string;
@@ -16,8 +18,16 @@ export interface HashFormat {
 export declare function getOutputHashFormat(option: string, length?: number): HashFormat;
 export declare type NormalizedEntryPoint = Required<ExtraEntryPointClass>;
 export declare function normalizeExtraEntryPoints(extraEntryPoints: ExtraEntryPoint[], defaultBundleName: string): NormalizedEntryPoint[];
-export declare function getSourceMapDevTool(scriptsSourceMap: boolean | undefined, stylesSourceMap: boolean | undefined, hiddenSourceMap?: boolean, inlineSourceMap?: boolean): SourceMapDevToolPlugin;
-export declare function isPolyfillsEntry(name: string): boolean;
-export declare function getWatchOptions(poll: number | undefined): NonNullable<Configuration['watchOptions']>;
 export declare function assetNameTemplateFactory(hashFormat: HashFormat): (resourcePath: string) => string;
 export declare function getInstrumentationExcludedPaths(sourceRoot: string, excludedPaths: string[]): Set<string>;
+export declare function getCacheSettings(wco: WebpackConfigOptions, angularVersion: string): WebpackOptionsNormalized['cache'];
+export declare function globalScriptsByBundleName(root: string, scripts: ExtraEntryPoint[]): {
+    bundleName: string;
+    inject: boolean;
+    paths: string[];
+}[];
+export declare function assetPatterns(root: string, assets: AssetPatternClass[]): ObjectPattern[];
+export declare function externalizePackages(context: string, request: string | undefined, callback: (error?: Error, result?: string) => void): void;
+declare type WebpackStatsOptions = Exclude<Configuration['stats'], string | boolean>;
+export declare function getStatsOptions(verbose?: boolean): WebpackStatsOptions;
+export {};

package/src/webpack/utils/helpers.js

@@ -29,10 +29,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.getWatchOptions = exports.isPolyfillsEntry = exports.getSourceMapDevTool = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
+exports.getStatsOptions = exports.externalizePackages = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
+const crypto_1 = require("crypto");
+const fs_1 = require("fs");
 const glob_1 = __importDefault(require("glob"));
 const path = __importStar(require("path"));
-const webpack_1 = require("webpack");
 function getOutputHashFormat(option, length = 20) {
     const hashFormats = {
         none: { chunk: '', extract: '', file: '', script: '' },
@@ -74,38 +75,6 @@ function normalizeExtraEntryPoints(extraEntryPoints, defaultBundleName) {
     });
 }
 exports.normalizeExtraEntryPoints = normalizeExtraEntryPoints;
-function getSourceMapDevTool(scriptsSourceMap, stylesSourceMap, hiddenSourceMap = false, inlineSourceMap = false) {
-    const include = [];
-    if (scriptsSourceMap) {
-        include.push(/js$/);
-    }
-    if (stylesSourceMap) {
-        include.push(/css$/);
-    }
-    return new webpack_1.SourceMapDevToolPlugin({
-        filename: inlineSourceMap ? undefined : '[file].map',
-        include,
-        // We want to set sourceRoot to  `webpack:///` for non
-        // inline sourcemaps as otherwise paths to sourcemaps will be broken in browser
-        // `webpack:///` is needed for Visual Studio breakpoints to work properly as currently
-        // there is no way to set the 'webRoot'
-        sourceRoot: 'webpack:///',
-        moduleFilenameTemplate: '[resource-path]',
-        append: hiddenSourceMap ? false : undefined,
-    });
-}
-exports.getSourceMapDevTool = getSourceMapDevTool;
-function isPolyfillsEntry(name) {
-    return name === 'polyfills';
-}
-exports.isPolyfillsEntry = isPolyfillsEntry;
-function getWatchOptions(poll) {
-    return {
-        poll,
-        ignored: poll === undefined ? '**/$_lazy_route_resources' : 'node_modules/**',
-    };
-}
-exports.getWatchOptions = getWatchOptions;
 function assetNameTemplateFactory(hashFormat) {
     const visitedFiles = new Map();
     return (resourcePath) => {
@@ -140,3 +109,159 @@ function getInstrumentationExcludedPaths(sourceRoot, excludedPaths) {
     return excluded;
 }
 exports.getInstrumentationExcludedPaths = getInstrumentationExcludedPaths;
+function getCacheSettings(wco, angularVersion) {
+    const { enabled, path: cacheDirectory } = wco.buildOptions.cache;
+    if (enabled) {
+        const packageVersion = require('../../../package.json').version;
+        return {
+            type: 'filesystem',
+            cacheDirectory: path.join(cacheDirectory, 'angular-webpack'),
+            maxMemoryGenerations: 1,
+            // We use the versions and build options as the cache name. The Webpack configurations are too
+            // dynamic and shared among different build types: test, build and serve.
+            // None of which are "named".
+            name: (0, crypto_1.createHash)('sha1')
+                .update(angularVersion)
+                .update(packageVersion)
+                .update(wco.projectRoot)
+                .update(JSON.stringify(wco.tsConfig))
+                .update(JSON.stringify({
+                ...wco.buildOptions,
+                // Needed because outputPath changes on every build when using i18n extraction
+                // https://github.com/angular/angular-cli/blob/736a5f89deaca85f487b78aec9ff66d4118ceb6a/packages/angular_devkit/build_angular/src/utils/i18n-options.ts#L264-L265
+                outputPath: undefined,
+            }))
+                .digest('hex'),
+        };
+    }
+    if (wco.buildOptions.watch) {
+        return {
+            type: 'memory',
+            maxGenerations: 1,
+        };
+    }
+    return false;
+}
+exports.getCacheSettings = getCacheSettings;
+function globalScriptsByBundleName(root, scripts) {
+    return normalizeExtraEntryPoints(scripts, 'scripts').reduce((prev, curr) => {
+        const { bundleName, inject, input } = curr;
+        let resolvedPath = path.resolve(root, input);
+        if (!(0, fs_1.existsSync)(resolvedPath)) {
+            try {
+                resolvedPath = require.resolve(input, { paths: [root] });
+            }
+            catch {
+                throw new Error(`Script file ${input} does not exist.`);
+            }
+        }
+        const existingEntry = prev.find((el) => el.bundleName === bundleName);
+        if (existingEntry) {
+            if (existingEntry.inject && !inject) {
+                // All entries have to be lazy for the bundle to be lazy.
+                throw new Error(`The ${bundleName} bundle is mixing injected and non-injected scripts.`);
+            }
+            existingEntry.paths.push(resolvedPath);
+        }
+        else {
+            prev.push({
+                bundleName,
+                inject,
+                paths: [resolvedPath],
+            });
+        }
+        return prev;
+    }, []);
+}
+exports.globalScriptsByBundleName = globalScriptsByBundleName;
+function assetPatterns(root, assets) {
+    return assets.map((asset, index) => {
+        // Resolve input paths relative to workspace root and add slash at the end.
+        // eslint-disable-next-line prefer-const
+        let { input, output, ignore = [], glob } = asset;
+        input = path.resolve(root, input).replace(/\\/g, '/');
+        input = input.endsWith('/') ? input : input + '/';
+        output = output.endsWith('/') ? output : output + '/';
+        if (output.startsWith('..')) {
+            throw new Error('An asset cannot be written to a location outside of the output path.');
+        }
+        return {
+            context: input,
+            // Now we remove starting slash to make Webpack place it from the output root.
+            to: output.replace(/^\//, ''),
+            from: glob,
+            noErrorOnMissing: true,
+            force: true,
+            globOptions: {
+                dot: true,
+                followSymbolicLinks: !!asset.followSymlinks,
+                ignore: [
+                    '.gitkeep',
+                    '**/.DS_Store',
+                    '**/Thumbs.db',
+                    // Negate patterns needs to be absolute because copy-webpack-plugin uses absolute globs which
+                    // causes negate patterns not to match.
+                    // See: https://github.com/webpack-contrib/copy-webpack-plugin/issues/498#issuecomment-639327909
+                    ...ignore,
+                ].map((i) => path.posix.join(input, i)),
+            },
+            priority: index,
+        };
+    });
+}
+exports.assetPatterns = assetPatterns;
+function externalizePackages(context, request, callback) {
+    if (!request) {
+        return;
+    }
+    // Absolute & Relative paths are not externals
+    if (request.startsWith('.') || path.isAbsolute(request)) {
+        callback();
+        return;
+    }
+    try {
+        require.resolve(request, { paths: [context] });
+        callback(undefined, request);
+    }
+    catch {
+        // Node couldn't find it, so it must be user-aliased
+        callback();
+    }
+}
+exports.externalizePackages = externalizePackages;
+function getStatsOptions(verbose = false) {
+    const webpackOutputOptions = {
+        all: false,
+        colors: true,
+        hash: true,
+        timings: true,
+        chunks: true,
+        builtAt: true,
+        warnings: true,
+        errors: true,
+        assets: true,
+        cachedAssets: true,
+        // Needed for markAsyncChunksNonInitial.
+        ids: true,
+        entrypoints: true,
+    };
+    const verboseWebpackOutputOptions = {
+        // The verbose output will most likely be piped to a file, so colors just mess it up.
+        colors: false,
+        usedExports: true,
+        optimizationBailout: true,
+        reasons: true,
+        children: true,
+        assets: true,
+        version: true,
+        chunkModules: true,
+        errorDetails: true,
+        moduleTrace: true,
+        logging: 'verbose',
+        modulesSpace: Infinity,
+    };
+    return verbose
+        ? { ...webpackOutputOptions, ...verboseWebpackOutputOptions }
+        : webpackOutputOptions;
+}
+exports.getStatsOptions = getStatsOptions;

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

@@ -10,13 +10,19 @@ import { logging } from '@angular-devkit/core';
 import { Configuration, StatsCompilation } from 'webpack';
 import { Schema as BrowserBuilderOptions } from '../../builders/browser/schema';
 export declare function formatSize(size: number): string;
-export declare type BundleStatsData = [files: string, names: string, size: number | string];
+export declare type BundleStatsData = [
+    files: string,
+    names: string,
+    rawSize: number | string,
+    estimatedTransferSize: number | string
+];
 export interface BundleStats {
     initial: boolean;
     stats: BundleStatsData;
 }
 export declare function generateBundleStats(info: {
-    size?: number;
+    rawSize?: number;
+    estimatedTransferSize?: number;
     files?: string[];
     names?: string[];
     initial?: boolean;

package/src/webpack/utils/stats.js

@@ -34,7 +34,6 @@ const core_1 = require("@angular-devkit/core");
 const path = __importStar(require("path"));
 const text_table_1 = __importDefault(require("text-table"));
 const color_1 = require("../../utils/color");
-const stats_1 = require("../configs/stats");
 const async_chunks_1 = require("./async-chunks");
 const helpers_1 = require("./helpers");
 function formatSize(size) {
@@ -51,35 +50,52 @@ function formatSize(size) {
 exports.formatSize = formatSize;
 function generateBundleStats(info) {
     var _a, _b, _c;
-    const size = typeof info.size === 'number' ? info.size : '-';
+    const rawSize = typeof info.rawSize === 'number' ? info.rawSize : '-';
+    const estimatedTransferSize = typeof info.estimatedTransferSize === 'number' ? info.estimatedTransferSize : '-';
     const files = (_b = (_a = info.files) === null || _a === void 0 ? void 0 : _a.filter((f) => !f.endsWith('.map')).map((f) => path.basename(f)).join(', ')) !== null && _b !== void 0 ? _b : '';
     const names = ((_c = info.names) === null || _c === void 0 ? void 0 : _c.length) ? info.names.join(', ') : '-';
     const initial = !!info.initial;
     return {
         initial,
-        stats: [files, names, size],
+        stats: [files, names, rawSize, estimatedTransferSize],
     };
 }
 exports.generateBundleStats = generateBundleStats;
-function generateBuildStatsTable(data, colors, showTotalSize) {
+function generateBuildStatsTable(data, colors, showTotalSize, showEstimatedTransferSize) {
     const g = (x) => (colors ? color_1.colors.greenBright(x) : x);
     const c = (x) => (colors ? color_1.colors.cyanBright(x) : x);
     const bold = (x) => (colors ? color_1.colors.bold(x) : x);
     const dim = (x) => (colors ? color_1.colors.dim(x) : x);
     const changedEntryChunksStats = [];
     const changedLazyChunksStats = [];
-    let initialTotalSize = 0;
+    let initialTotalRawSize = 0;
+    let initialTotalEstimatedTransferSize;
     for (const { initial, stats } of data) {
-        const [files, names, size] = stats;
-        const data = [
-            g(files),
-            names,
-            c(typeof size === 'number' ? formatSize(size) : size),
-        ];
+        const [files, names, rawSize, estimatedTransferSize] = stats;
+        let data;
+        if (showEstimatedTransferSize) {
+            data = [
+                g(files),
+                names,
+                c(typeof rawSize === 'number' ? formatSize(rawSize) : rawSize),
+                c(typeof estimatedTransferSize === 'number'
+                    ? formatSize(estimatedTransferSize)
+                    : estimatedTransferSize),
+            ];
+        }
+        else {
+            data = [g(files), names, c(typeof rawSize === 'number' ? formatSize(rawSize) : rawSize), ''];
+        }
         if (initial) {
             changedEntryChunksStats.push(data);
-            if (typeof size === 'number') {
-                initialTotalSize += size;
+            if (typeof rawSize === 'number') {
+                initialTotalRawSize += rawSize;
+            }
+            if (showEstimatedTransferSize && typeof estimatedTransferSize === 'number') {
+                if (initialTotalEstimatedTransferSize === undefined) {
+                    initialTotalEstimatedTransferSize = 0;
+                }
+                initialTotalEstimatedTransferSize += estimatedTransferSize;
             }
         }
         else {
@@ -87,12 +103,24 @@ function generateBuildStatsTable(data, colors, showTotalSize) {
         }
     }
     const bundleInfo = [];
+    const baseTitles = ['Names', 'Raw Size'];
+    const tableAlign = ['l', 'l', 'r'];
+    if (showEstimatedTransferSize) {
+        baseTitles.push('Estimated Transfer Size');
+        tableAlign.push('r');
+    }
     // Entry chunks
     if (changedEntryChunksStats.length) {
-        bundleInfo.push(['Initial Chunk Files', 'Names', 'Size'].map(bold), ...changedEntryChunksStats);
+        bundleInfo.push(['Initial Chunk Files', ...baseTitles].map(bold), ...changedEntryChunksStats);
         if (showTotalSize) {
             bundleInfo.push([]);
-            bundleInfo.push([' ', 'Initial Total', formatSize(initialTotalSize)].map(bold));
+            const totalSizeElements = [' ', 'Initial Total', formatSize(initialTotalRawSize)];
+            if (showEstimatedTransferSize) {
+                totalSizeElements.push(typeof initialTotalEstimatedTransferSize === 'number'
+                    ? formatSize(initialTotalEstimatedTransferSize)
+                    : '-');
+            }
+            bundleInfo.push(totalSizeElements.map(bold));
         }
     }
     // Seperator
@@ -101,12 +129,12 @@ function generateBuildStatsTable(data, colors, showTotalSize) {
     }
     // Lazy chunks
     if (changedLazyChunksStats.length) {
-        bundleInfo.push(['Lazy Chunk Files', 'Names', 'Size'].map(bold), ...changedLazyChunksStats);
+        bundleInfo.push(['Lazy Chunk Files', ...baseTitles].map(bold), ...changedLazyChunksStats);
     }
     return (0, text_table_1.default)(bundleInfo, {
         hsep: dim(' | '),
         stringLength: (s) => (0, color_1.removeColor)(s).length,
-        align: ['l', 'l', 'r'],
+        align: tableAlign,
     });
 }
 function generateBuildStats(hash, time, colors) {
@@ -128,6 +156,7 @@ statsConfig, bundleState) {
     const rs = (x) => (colors ? color_1.colors.reset(x) : x);
     const changedChunksStats = bundleState !== null && bundleState !== void 0 ? bundleState : [];
     let unchangedChunkNumber = 0;
+    let hasEstimatedTransferSizes = false;
     if (!(bundleState === null || bundleState === void 0 ? void 0 : bundleState.length)) {
         const isFirstRun = !runsCache.has(json.outputPath || '');
         for (const chunk of json.chunks) {
@@ -137,8 +166,24 @@ statsConfig, bundleState) {
                 continue;
             }
             const assets = (_b = json.assets) === null || _b === void 0 ? void 0 : _b.filter((asset) => { var _a; return (_a = chunk.files) === null || _a === void 0 ? void 0 : _a.includes(asset.name); });
-            const summedSize = assets === null || assets === void 0 ? void 0 : assets.filter((asset) => !asset.name.endsWith('.map')).reduce((total, asset) => total + asset.size, 0);
-            changedChunksStats.push(generateBundleStats({ ...chunk, size: summedSize }));
+            let rawSize = 0;
+            let estimatedTransferSize;
+            if (assets) {
+                for (const asset of assets) {
+                    if (asset.name.endsWith('.map')) {
+                        continue;
+                    }
+                    rawSize += asset.size;
+                    if (typeof asset.info.estimatedTransferSize === 'number') {
+                        if (estimatedTransferSize === undefined) {
+                            estimatedTransferSize = 0;
+                            hasEstimatedTransferSizes = true;
+                        }
+                        estimatedTransferSize += asset.info.estimatedTransferSize;
+                    }
+                }
+            }
+            changedChunksStats.push(generateBundleStats({ ...chunk, rawSize, estimatedTransferSize }));
         }
         unchangedChunkNumber = json.chunks.length - changedChunksStats.length;
         runsCache.add(json.outputPath || '');
@@ -153,7 +198,7 @@ statsConfig, bundleState) {
         }
         return 0;
     });
-    const statsTable = generateBuildStatsTable(changedChunksStats, colors, unchangedChunkNumber === 0);
+    const statsTable = generateBuildStatsTable(changedChunksStats, colors, unchangedChunkNumber === 0, hasEstimatedTransferSizes);
     // In some cases we do things outside of webpack context
     // Such us index generation, service worker augmentation etc...
     // This will correct the time and include these.
@@ -266,7 +311,7 @@ function createWebpackLoggingCallback(options, logger) {
         if (verbose) {
             logger.info(stats.toString(config.stats));
         }
-        const rawStats = stats.toJson((0, stats_1.getWebpackStatsConfig)(false));
+        const rawStats = stats.toJson((0, helpers_1.getStatsOptions)(false));
         const webpackStats = {
             ...rawStats,
             chunks: (0, async_chunks_1.markAsyncChunksNonInitial)(rawStats, extraEntryPoints),