Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-16 18:43:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(@angular-devkit/build-webpack): update webpack-dev-server to version 4

Browse Source 
BREAKING CHANGE:

Support for `webpack-dev-server` version 3 has been removed. For more information about the migration please see: https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

Note: this change only affects users depending on `@angular-devkit/build-webpack` directly.
This commit is contained in:
Alan Agius 2021-08-25 09:10:38 +02:00
parent 6fa263e171
commit a0b5897d50
2 changed files with 22 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/angular_devkit/build_webpack/package.json
View File

@ -17,6 +17,6 @@
}, },
"peerDependencies": { "peerDependencies": {
"webpack": "^5.30.0", "webpack": "^5.30.0",
"webpack-dev-server": "^3.1.4" "webpack-dev-server": "^4.0.0"
} }
} }

61
packages/angular_devkit/build_webpack/src/webpack-dev-server/index.ts
View File

@ -7,7 +7,6 @@
*/ */
import { BuilderContext, createBuilder } from '@angular-devkit/architect'; import { BuilderContext, createBuilder } from '@angular-devkit/architect';
import * as net from 'net';
import { resolve as pathResolve } from 'path'; import { resolve as pathResolve } from 'path';
import { Observable, from, isObservable, of } from 'rxjs'; import { Observable, from, isObservable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators'; import { switchMap } from 'rxjs/operators';
@ -53,38 +52,27 @@ export function runWebpackDevServer(
config: WebpackDevServer.Configuration, config: WebpackDevServer.Configuration,
) => { ) => {
if (options.webpackDevServerFactory) { if (options.webpackDevServerFactory) {
// webpack-dev-server types currently do not support Webpack 5 return new options.webpackDevServerFactory(config, webpack);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return new options.webpackDevServerFactory(webpack as any, config);
} }
// webpack-dev-server types currently do not support Webpack 5 return new WebpackDevServer(config, webpack);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return new WebpackDevServer(webpack as any, config);
}; };
const log: WebpackLoggingCallback = const log: WebpackLoggingCallback =
options.logging || ((stats, config) => context.logger.info(stats.toString(config.stats))); options.logging || ((stats, config) => context.logger.info(stats.toString(config.stats)));
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const devServerConfig = options.devServerConfig || (config as any).devServer || {};
if (devServerConfig.stats) {
config.stats = devServerConfig.stats;
}
// Disable stats reporting by the devserver, we have our own logger.
devServerConfig.stats = false;
return createWebpack({ ...config, watch: false }).pipe( return createWebpack({ ...config, watch: false }).pipe(
switchMap( switchMap(
(webpackCompiler) => (webpackCompiler) =>
new Observable<DevServerBuildOutput>((obs) => { new Observable<DevServerBuildOutput>((obs) => {
const server = createWebpackDevServer(webpackCompiler, devServerConfig); const devServerConfig = options.devServerConfig || config.devServer || {};
devServerConfig.host ??= 'localhost';
let result: Partial<DevServerBuildOutput>; let result: Partial<DevServerBuildOutput>;
webpackCompiler.hooks.done.tap('build-webpack', (stats) => { webpackCompiler.hooks.done.tap('build-webpack', (stats) => {
// Log stats. // Log stats.
log(stats, config); log(stats, config);
obs.next({ obs.next({
...result, ...result,
emittedFiles: getEmittedFiles(stats.compilation), emittedFiles: getEmittedFiles(stats.compilation),
@ -93,34 +81,27 @@ export function runWebpackDevServer(
} as unknown as DevServerBuildOutput); } as unknown as DevServerBuildOutput);
}); });
server.listen( const devServer = createWebpackDevServer(webpackCompiler, devServerConfig);
devServerConfig.port === undefined ? 8080 : devServerConfig.port, devServer.startCallback(() => {
devServerConfig.host === undefined ? 'localhost' : devServerConfig.host, const address = devServer.server.address();
function (this: net.Server, err) { if (!address) {
if (err) { obs.error(new Error(`Dev-server address info is not defined.`));
obs.error(err);
} else {
const address = this.address();
if (!address) {
obs.error(new Error(`Dev-server address info is not defined.`));
return; return;
} }
result = { result = {
success: true, success: true,
port: typeof address === 'string' ? 0 : address.port, port: typeof address === 'string' ? 0 : address.port,
family: typeof address === 'string' ? '' : address.family, family: typeof address === 'string' ? '' : address.family,
address: typeof address === 'string' ? address : address.address, address: typeof address === 'string' ? address : address.address,
}; };
} });
},
);
// Teardown logic. Close the server when unsubscribed from. // Teardown logic. Close the server when unsubscribed from.
return () => { return () => {
server.close(); devServer.stopCallback(() => {});
webpackCompiler.close?.(() => {}); webpackCompiler.close(() => {});
}; };
}), }),
), ),