Skip to content

wip! webpack 5 #16371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

wip! webpack 5 #16371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cca09be
wip! webpack 5
alan-agius4 Dec 6, 2019
573069d
wip! webpack 5 - add any's
alan-agius4 Dec 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/angular_devkit/build_angular/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,12 @@
"stylus-loader": "3.0.2",
"tree-kill": "1.2.1",
"terser": "4.4.2",
"terser-webpack-plugin": "2.2.3",
"webpack": "4.41.2",
"terser-webpack-plugin": "2.2.1",
"webpack": "next",
"webpack-dev-middleware": "3.7.2",
"webpack-dev-server": "3.9.0",
"webpack-dev-server": "next",
"webpack-merge": "4.2.2",
"webpack-sources": "1.4.3",
"webpack-sources": "2.0.0-beta.8",
"webpack-subresource-integrity": "1.3.4",
"worker-plugin": "3.2.0"
},
Expand Down
10 changes: 2 additions & 8 deletions ...ages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,15 +93,9 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
vendors: false,
vendor: !!buildOptions.vendorChunk && {
name: 'vendor',
chunks: 'initial',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is initial chunks automatic now? Only node module files from initial chunks should end up in the vendor chunk. Otherwise the main bundle in production mode will contain all dependencies for the entire application including ones only used in lazy routes.

enforce: true,
test: (module: { nameForCondition?: Function }, chunks: Array<{ name: string }>) => {
const moduleName = module.nameForCondition ? module.nameForCondition() : '';

return /[\\/]node_modules[\\/]/.test(moduleName)
&& !chunks.some(({ name }) => isPolyfillsEntry(name)
|| globalStylesBundleNames.includes(name));
},
test: /[\\/]node_modules[\\/]/,
chunks: ({ name }) => !isPolyfillsEntry(name) || !globalStylesBundleNames.includes(name),
},
},
},
Expand Down
19 changes: 9 additions & 10 deletions packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ import * as CopyWebpackPlugin from 'copy-webpack-plugin';
import * as path from 'path';
import { RollupOptions } from 'rollup';
import { ScriptTarget } from 'typescript';

import {
ChunkData,
Compiler,
Configuration,
ContextReplacementPlugin,
HashedModuleIdsPlugin,
Plugin,
Rule,
compilation,
Expand All @@ -39,10 +39,10 @@ import { findAllNodeModules, findUp } from '../../utilities/find-up';
import { WebpackConfigOptions } from '../build-options';
import { getEsVersionForFileName, getOutputHashFormat, normalizeExtraEntryPoints } from './utils';

const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const webpack = require('webpack');

// tslint:disable-next-line:no-big-function
export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
Expand Down Expand Up @@ -155,11 +155,11 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
// that changes the name of the ES5 polyfills chunk to not include ES2015.
extraPlugins.push({
apply(compiler) {
compiler.hooks.compilation.tap('build-angular', compilation => {
compiler.hooks.compilation.tap('build-angular', (compilation: any): any => {
// Webpack typings do not contain MainTemplate assetPath hook
// The webpack.Compilation assetPath hook is a noop in 4.x so the template must be used
// tslint:disable-next-line: no-any
(compilation.mainTemplate.hooks as any).assetPath.tap(
(compilation.hooks as any).assetPath.tap(
'build-angular',
(filename: string, data: ChunkData) => {
const isMap = filename && filename.endsWith('.map');
Expand All @@ -168,7 +168,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
? `polyfills-es5${hashFormat.chunk}.js${isMap ? '.map' : ''}`
: filename;
},
);
)
});
},
});
Expand Down Expand Up @@ -291,7 +291,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
}

if (buildOptions.progress) {
extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose }));
extraPlugins.push(new webpack.ProgressPlugin({ profile: buildOptions.verbose }));
}

if (buildOptions.showCircularDependencies) {
Expand Down Expand Up @@ -495,7 +495,6 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
context: projectRoot,
entry: entryPoints,
output: {
futureEmitAssets: true,
path: path.resolve(root, buildOptions.outputPath as string),
publicPath: buildOptions.deployUrl,
filename: `[name]${targetInFileName}${hashFormat.chunk}.js`,
Expand Down Expand Up @@ -541,19 +540,19 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
exclude: /(ngfactory|ngstyle)\.js$/,
...buildOptimizerUseRule,
},
{
sourceMapUseRule ? {
test: /\.js$/,
exclude: /(ngfactory|ngstyle)\.js$/,
enforce: 'pre',
...sourceMapUseRule,
},
} : {},
...extraRules,
],
},
optimization: {
noEmitOnErrors: true,
minimizer: [
new HashedModuleIdsPlugin(),
new webpack.ids.HashedModuleIdsPlugin(),
...extraMinimizers,
].concat(differentialLoadingMode ? [
// Budgets are computed after differential builds, not via a plugin.
Expand Down
9 changes: 2 additions & 7 deletions packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,13 +83,8 @@ export function getTestConfig(
vendors: false,
vendor: {
name: 'vendor',
chunks: 'initial',
test: (module: { nameForCondition?: () => string }, chunks: { name: string }[]) => {
const moduleName = module.nameForCondition ? module.nameForCondition() : '';

return /[\\/]node_modules[\\/]/.test(moduleName)
&& !chunks.some(({ name }) => isPolyfillsEntry(name));
},
test: /[\\/]node_modules[\\/]/,
chunks: ({name}) => !isPolyfillsEntry(name),
},
},
},
Expand Down
36 changes: 20 additions & 16 deletions packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/worker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,30 @@ import { Configuration } from 'webpack';
import { WebpackConfigOptions } from '../build-options';
import { getTypescriptWorkerPlugin } from './typescript';

const WorkerPlugin = require('worker-plugin');
// const WorkerPlugin = require('worker-plugin');


export function getWorkerConfig(wco: WebpackConfigOptions): Configuration {
const { buildOptions } = wco;
return {};
}
// const { buildOptions } = wco;

if (!buildOptions.webWorkerTsConfig) {
return {};
}
// return ;

if (typeof buildOptions.webWorkerTsConfig != 'string') {
throw new Error('The `webWorkerTsConfig` must be a string.');
}
// if (!buildOptions.webWorkerTsConfig) {
// return {};
// }

const workerTsConfigPath = resolve(wco.root, buildOptions.webWorkerTsConfig);
// if (typeof buildOptions.webWorkerTsConfig != 'string') {
// throw new Error('The `webWorkerTsConfig` must be a string.');
// }

return {
plugins: [new WorkerPlugin({
globalObject: false,
plugins: [getTypescriptWorkerPlugin(wco, workerTsConfigPath)],
})],
};
}
// const workerTsConfigPath = resolve(wco.root, buildOptions.webWorkerTsConfig);

// return {
// plugins: [new WorkerPlugin({
// globalObject: false,
// plugins: [getTypescriptWorkerPlugin(wco, workerTsConfigPath)],
// })],
// };
//}
2 changes: 1 addition & 1 deletion ..._devkit/build_angular/src/angular-cli-files/plugins/any-component-style-budget-checker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export class AnyComponentStyleBudgetChecker implements Plugin {
}

apply(compiler: Compiler) {
compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation): any => {
compilation.hooks.afterOptimizeChunkAssets.tap(PLUGIN_NAME, () => {
// In AOT compilations component styles get processed in child compilations.
// tslint:disable-next-line: no-any
Expand Down
15 changes: 15 additions & 0 deletions packages/angular_devkit/build_angular/src/angular-cli-files/plugins/bundle-budget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,21 @@ export class BundleBudgetPlugin {
return;
}

// tslint:disable-next-line: no-any
compiler.hooks.compilation.tap('BundleBudgetPlugin', (compilation: compilation.Compilation): any => {
compilation.hooks.afterOptimizeChunkAssets.tap('BundleBudgetPlugin', () => {
// In AOT compilations component styles get processed in child compilations.
// tslint:disable-next-line: no-any
const parentCompilation = (compilation.compiler as any).parentCompilation;
if (!parentCompilation) {
return;
}

const filteredBudgets = budgets.filter(budget => budget.type === Type.AnyComponentStyle);
this.runChecks(filteredBudgets, compilation);
});
});

compiler.hooks.afterEmit.tap('BundleBudgetPlugin', (compilation: compilation.Compilation) => {
this.runChecks(budgets, compilation);
});
Expand Down
4 changes: 2 additions & 2 deletions ...ges/angular_devkit/build_angular/src/angular-cli-files/plugins/cleancss-webpack-plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ function hook(
) {
compiler.hooks.compilation.tap(
'cleancss-webpack-plugin',
(compilation: compilation.Compilation) => {
compilation.hooks.optimizeChunkAssets.tapPromise('cleancss-webpack-plugin', chunks =>
(compilation: compilation.Compilation): any => {
compilation.hooks.optimizeChunkAssets.tapPromise('cleancss-webpack-plugin', (chunks: any): any =>
action(compilation, chunks),
);
},
Expand Down
4 changes: 2 additions & 2 deletions packages/angular_devkit/build_angular/src/angular-cli-files/plugins/named-chunks-plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ const Template = require('webpack/lib/Template');
export class NamedLazyChunksPlugin {
constructor() { }
apply(compiler: Compiler): void {
compiler.hooks.compilation.tap('named-lazy-chunks-plugin', compilation => {
compiler.hooks.compilation.tap('named-lazy-chunks-plugin', (compilation: any): any => {
// The dependencyReference hook isn't in the webpack typings so we have to type it as any.
// tslint:disable-next-line: no-any
(compilation.hooks as any).dependencyReference.tap('named-lazy-chunks-plugin',
(compilation.hooks as any).dependencyReferencedExports.tap('named-lazy-chunks-plugin',
// tslint:disable-next-line: no-any
(_: any, dependency: any) => {
if (
Expand Down
8 changes: 2 additions & 6 deletions packages/angular_devkit/build_angular/src/angular-cli-files/plugins/remove-hash-plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,8 @@ export class RemoveHashPlugin {
constructor(private options: RemoveHashPluginOptions) { }

apply(compiler: Compiler): void {
compiler.hooks.compilation.tap('remove-hash-plugin', compilation => {
const mainTemplate = compilation.mainTemplate as compilation.MainTemplate & {
hooks: compilation.CompilationHooks;
};

mainTemplate.hooks.assetPath.tap('remove-hash-plugin',
compiler.hooks.compilation.tap('remove-hash-plugin', (compilation: any): any => {
compilation.hooks.assetPath.tap('remove-hash-plugin',
(path: string, data: { chunk?: { name: string } }) => {
const chunkName = data.chunk && data.chunk.name;
const { chunkNames, hashFormat } = this.options;
Expand Down
2 changes: 1 addition & 1 deletion packages/angular_devkit/build_angular/src/dev-server/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,7 +389,7 @@ async function setupLocalize(
// tslint:disable-next-line: no-non-null-assertion
webpackConfig.plugins!.push({
apply: (compiler: webpack.Compiler) => {
compiler.hooks.thisCompilation.tap('build-angular', compilation => {
compiler.hooks.thisCompilation.tap('build-angular', (compilation: any): any => {
compilation.hooks.finishModules.tap('build-angular', () => {
if (!diagnostics) {
return;
Expand Down
2 changes: 1 addition & 1 deletion packages/angular_devkit/build_optimizer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@
"source-map": "0.7.3",
"tslib": "1.10.0",
"typescript": "3.6.4",
"webpack-sources": "1.4.3"
"webpack-sources": "2.0.0-beta.8"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updating this seems to cause a bunch of tsc errors due to tapable

}
}
2 changes: 1 addition & 1 deletion packages/angular_devkit/build_optimizer/src/build-optimizer/webpack-plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { Compiler } from 'webpack'; // tslint:disable-line:no-implicit-dependen
export class BuildOptimizerWebpackPlugin {
apply(compiler: Compiler) {
compiler.hooks.normalModuleFactory.tap('BuildOptimizerWebpackPlugin', nmf => {
nmf.hooks.module.tap('BuildOptimizerWebpackPlugin', (module, data) => {
nmf.hooks.module.tap('BuildOptimizerWebpackPlugin', (module: any, data: any) => {
const resolveData = data.resourceResolveData;
if (resolveData && resolveData.descriptionFileData) {
// Only TS packages should use Build Optimizer.
Expand Down
4 changes: 2 additions & 2 deletions packages/angular_devkit/build_webpack/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"webpack-dev-server": "^3.1.4"
},
"devDependencies": {
"webpack": "4.41.2",
"webpack-dev-server": "^3.1.4"
"webpack": "next",
"webpack-dev-server": "next"
}
}
4 changes: 2 additions & 2 deletions packages/angular_devkit/build_webpack/src/plugins/architect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export class ArchitectPlugin {

// On the start of a new compilation, maybe reset the counters (and update the total), then
// listen to all hooks we're interested in.
compiler.hooks.compilation.tap('ArchitectPlugin', compilation => {
compiler.hooks.compilation.tap('ArchitectPlugin', (compilation): any => {
const hooks = hookSafelist;
if (reset) {
reset = false;
Expand All @@ -135,7 +135,7 @@ export class ArchitectPlugin {
update('Preparing...');

compilation.hooks.buildModule.tap('ArchitectPlugin', buildModule);
compilation.hooks.failedModule.tap('ArchitectPlugin', failedModule);
compilation.hooks.failedModule.tap('ArchitectPlugin', failedModule as any);
compilation.hooks.succeedModule.tap('ArchitectPlugin', succeedModule);

for (const name of hooks) {
Expand Down
4 changes: 2 additions & 2 deletions packages/ngtools/webpack/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"@angular-devkit/core": "0.0.0",
"enhanced-resolve": "4.1.1",
"rxjs": "6.5.3",
"webpack-sources": "1.4.3"
"webpack-sources": "2.0.0-beta.8"
},
"peerDependencies": {
"@angular/compiler-cli": ">=9.0.0-beta < 10",
Expand All @@ -35,6 +35,6 @@
"@angular/compiler": "9.0.0-rc.5",
"@angular/compiler-cli": "9.0.0-rc.5",
"typescript": "3.6.4",
"webpack": "4.41.2"
"webpack": "next"
}
}
10 changes: 5 additions & 5 deletions packages/ngtools/webpack/src/angular_compiler_plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -675,7 +675,7 @@ export class AngularCompilerPlugin {
});

// cleanup if not watching
compiler.hooks.thisCompilation.tap('angular-compiler', compilation => {
compiler.hooks.thisCompilation.tap('angular-compiler', (compilation): any => {
compilation.hooks.finishModules.tap('angular-compiler', () => {
this._checkUnusedFiles(compilation);

Expand Down Expand Up @@ -803,7 +803,7 @@ export class AngularCompilerPlugin {
// We resolve symbolic links in order to get the real path that would be used in webpack.
const angularCoreResourceRoot = fs.realpathSync(path.dirname(angularCorePackagePath));

cmf.hooks.afterResolve.tapPromise('angular-compiler', async result => {
cmf.hooks.afterResolve.tapPromise('angular-compiler', async (result: any) => {
// Alter only existing request from Angular or the additional lazy module resources.
const isLazyModuleResource = (resource: string) =>
resource.startsWith(angularCoreResourceRoot) ||
Expand Down Expand Up @@ -861,7 +861,9 @@ export class AngularCompilerPlugin {
'angular-compiler',
compilation => this._donePromise = this._make(compilation),
);
compiler.hooks.invalid.tap('angular-compiler', () => this._firstRun = false);
compiler.hooks.invalid.tap('angular-compiler', (): any => {
this._firstRun = false
});
compiler.hooks.afterEmit.tap('angular-compiler', compilation => {
// tslint:disable-next-line:no-any
(compilation as any)._ngToolsWebpackPluginInstance = null;
Expand Down Expand Up @@ -918,8 +920,6 @@ export class AngularCompilerPlugin {
} catch { }
}
}

return request;
},
);
});
Expand Down
Loading