fix(@angular-devkit/build-angular): fixed afterOptimizeChunkAssets is deprecated in webpack 5

This commit is contained in:
Dmitriy Shekhovtsov 2020-09-28 15:15:05 +03:00 committed by Alan Agius
parent defc8f562d
commit 38023fe41c

View File

@ -11,6 +11,7 @@ import { Compiler } from 'webpack';
import { Budget, Type } from '../../browser/schema'; import { Budget, Type } from '../../browser/schema';
import { ThresholdSeverity, calculateThresholds, checkThresholds } from '../../utils/bundle-calculator'; import { ThresholdSeverity, calculateThresholds, checkThresholds } from '../../utils/bundle-calculator';
import { addError, addWarning } from '../../utils/webpack-diagnostics'; import { addError, addWarning } from '../../utils/webpack-diagnostics';
import { isWebpackFiveOrHigher } from '../../utils/webpack-version';
const PLUGIN_NAME = 'AnyComponentStyleBudgetChecker'; const PLUGIN_NAME = 'AnyComponentStyleBudgetChecker';
@ -20,13 +21,14 @@ const PLUGIN_NAME = 'AnyComponentStyleBudgetChecker';
*/ */
export class AnyComponentStyleBudgetChecker { export class AnyComponentStyleBudgetChecker {
private readonly budgets: Budget[]; private readonly budgets: Budget[];
constructor(budgets: Budget[]) { constructor(budgets: Budget[]) {
this.budgets = budgets.filter((budget) => budget.type === Type.AnyComponentStyle); this.budgets = budgets.filter((budget) => budget.type === Type.AnyComponentStyle);
} }
apply(compiler: Compiler) { apply(compiler: Compiler) {
compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
compilation.hooks.afterOptimizeChunkAssets.tap(PLUGIN_NAME, () => { const afterOptimizeChunkAssets = () => {
// In AOT compilations component styles get processed in child compilations. // In AOT compilations component styles get processed in child compilations.
// tslint:disable-next-line: no-any // tslint:disable-next-line: no-any
const parentCompilation = (compilation.compiler as any).parentCompilation; const parentCompilation = (compilation.compiler as any).parentCompilation;
@ -43,15 +45,15 @@ export class AnyComponentStyleBudgetChecker {
]; ];
const componentStyles = Object.keys(compilation.assets) const componentStyles = Object.keys(compilation.assets)
.filter((name) => cssExtensions.includes(path.extname(name))) .filter((name) => cssExtensions.includes(path.extname(name)))
.map((name) => ({ .map((name) => ({
size: compilation.assets[name].size(), size: compilation.assets[name].size(),
label: name, label: name,
})); }));
const thresholds = flatMap(this.budgets, (budget) => calculateThresholds(budget)); const thresholds = flatMap(this.budgets, (budget) => calculateThresholds(budget));
for (const { size, label } of componentStyles) { for (const {size, label} of componentStyles) {
for (const { severity, message } of checkThresholds(thresholds[Symbol.iterator](), size, label)) { for (const {severity, message} of checkThresholds(thresholds[Symbol.iterator](), size, label)) {
switch (severity) { switch (severity) {
case ThresholdSeverity.Warning: case ThresholdSeverity.Warning:
addWarning(compilation, message); addWarning(compilation, message);
@ -65,7 +67,18 @@ export class AnyComponentStyleBudgetChecker {
} }
} }
} }
}); };
if (isWebpackFiveOrHigher()) {
// webpack 5 migration "guide"
// https://github.com/webpack/webpack/blob/07fc554bef5930f8577f91c91a8b81791fc29746/lib/Compilation.js#L535-L539
// TODO_WEBPACK_5 const stage = Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE + 1;
const stage = 101;
// tslint:disable-next-line: no-any
(compilation.hooks as any).processAssets.tap({name: PLUGIN_NAME, stage}, afterOptimizeChunkAssets);
} else {
compilation.hooks.afterOptimizeChunkAssets.tap(PLUGIN_NAME, afterOptimizeChunkAssets);
}
}); });
} }
} }