refactor(@angular-devkit/build-angular): consistent import from webpack style

Author: lekhmanrus

goldens/public-api/angular_devkit/build_angular/src/index.md

@@ -8,12 +8,12 @@ import { BuilderContext } from '@angular-devkit/architect';
 import { BuilderOutput } from '@angular-devkit/architect';
 import { BuildResult } from '@angular-devkit/build-webpack';
 import { ConfigOptions } from 'karma';
+import { Configuration } from 'webpack';
 import { DevServerBuildOutput } from '@angular-devkit/build-webpack';
 import { json } from '@angular-devkit/core';
 import { JsonObject } from '@angular-devkit/core';
 import { Observable } from 'rxjs';
 import webpack from 'webpack';
-import * as webpack_2 from 'webpack';
 import { WebpackLoggingCallback } from '@angular-devkit/build-webpack';
 
 // @public (undocumented)
@@ -133,7 +133,7 @@ export function executeExtractI18nBuilder(options: ExtractI18nBuilderOptions, co
 
 // @public
 export function executeKarmaBuilder(options: KarmaBuilderOptions, context: BuilderContext, transforms?: {
-    webpackConfiguration?: ExecutionTransformer<webpack_2.Configuration>;
+    webpackConfiguration?: ExecutionTransformer<Configuration>;
     karmaOptions?: (options: KarmaConfigOptions) => KarmaConfigOptions;
 }): Observable<BuilderOutput>;
 

packages/angular_devkit/build_angular/src/builders/karma/index.ts

@@ -12,7 +12,7 @@ import { Config, ConfigOptions } from 'karma';
 import { dirname, resolve } from 'path';
 import { Observable, from } from 'rxjs';
 import { defaultIfEmpty, switchMap } from 'rxjs/operators';
-import * as webpack from 'webpack';
+import { Configuration } from 'webpack';
 import { ExecutionTransformer } from '../../transforms';
 import { assertCompatibleAngularVersion } from '../../utils/version';
 import { generateBrowserWebpackConfigFromContext } from '../../utils/webpack-browser-config';
@@ -36,8 +36,8 @@ export type KarmaConfigOptions = ConfigOptions & {
 async function initialize(
   options: KarmaBuilderOptions,
   context: BuilderContext,
-  webpackConfigurationTransformer?: ExecutionTransformer<webpack.Configuration>,
-): Promise<[typeof import('karma'), webpack.Configuration]> {
+  webpackConfigurationTransformer?: ExecutionTransformer<Configuration>,
+): Promise<[typeof import('karma'), Configuration]> {
   const { config } = await generateBrowserWebpackConfigFromContext(
     // only two properties are missing:
     // * `outputPath` which is fixed for tests
@@ -84,7 +84,7 @@ export function execute(
   options: KarmaBuilderOptions,
   context: BuilderContext,
   transforms: {
-    webpackConfiguration?: ExecutionTransformer<webpack.Configuration>;
+    webpackConfiguration?: ExecutionTransformer<Configuration>;
     // The karma options transform cannot be async without a refactor of the builder implementation
     karmaOptions?: (options: KarmaConfigOptions) => KarmaConfigOptions;
   } = {},

packages/angular_devkit/build_angular/src/webpack/configs/browser.ts

@@ -6,13 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as webpack from 'webpack';
+import { Configuration } from 'webpack';
 import { SubresourceIntegrityPlugin } from 'webpack-subresource-integrity';
 import { WebpackConfigOptions } from '../../utils/build-options';
 import { CommonJsUsageWarnPlugin } from '../plugins';
 import { getSourceMapDevTool } from '../utils/helpers';
 
-export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configuration {
+export function getBrowserConfig(wco: WebpackConfigOptions): Configuration {
   const { buildOptions } = wco;
   const {
     crossOrigin = 'none',

packages/angular_devkit/build_angular/src/webpack/configs/dev-server.ts

@@ -10,16 +10,16 @@ import { logging, tags } from '@angular-devkit/core';
 import { existsSync } from 'fs';
 import { posix, resolve } from 'path';
 import * as url from 'url';
-import * as webpack from 'webpack';
-import { Configuration } from 'webpack-dev-server';
+import { Configuration, RuleSetRule } from 'webpack';
+import { Configuration as DevServerConfiguration } from 'webpack-dev-server';
 import { WebpackConfigOptions, WebpackDevServerOptions } from '../../utils/build-options';
 import { loadEsmModule } from '../../utils/load-esm';
 import { getIndexOutputFile } from '../../utils/webpack-browser-config';
 import { HmrLoader } from '../plugins/hmr/hmr-loader';
 
 export async function getDevServerConfig(
   wco: WebpackConfigOptions<WebpackDevServerOptions>,
-): Promise<webpack.Configuration> {
+): Promise<Configuration> {
   const {
     buildOptions: { host, port, index, headers, watch, hmr, main, liveReload, proxyConfig },
     logger,
@@ -28,7 +28,7 @@ export async function getDevServerConfig(
 
   const servePath = buildServePath(wco.buildOptions, logger);
 
-  const extraRules: webpack.RuleSetRule[] = [];
+  const extraRules: RuleSetRule[] = [];
   if (hmr) {
     extraRules.push({
       loader: HmrLoader,
@@ -139,7 +139,10 @@ export function buildServePath(
  * Private method to enhance a webpack config with SSL configuration.
  * @private
  */
-function getSslConfig(root: string, options: WebpackDevServerOptions): Configuration['https'] {
+function getSslConfig(
+  root: string,
+  options: WebpackDevServerOptions,
+): DevServerConfiguration['https'] {
   const { ssl, sslCert, sslKey } = options;
   if (ssl && sslCert && sslKey) {
     return {
@@ -217,7 +220,9 @@ function findDefaultServePath(baseHref?: string, deployUrl?: string): string | n
   return `${normalizedBaseHref}${deployUrl || ''}`;
 }
 
-function getAllowedHostsConfig(options: WebpackDevServerOptions): Configuration['allowedHosts'] {
+function getAllowedHostsConfig(
+  options: WebpackDevServerOptions,
+): DevServerConfiguration['allowedHosts'] {
   if (options.disableHostCheck) {
     return 'all';
   } else if (options.allowedHosts?.length) {

packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

@@ -8,7 +8,7 @@
 
 import * as fs from 'fs';
 import * as path from 'path';
-import * as webpack from 'webpack';
+import { Configuration, RuleSetUseItem } from 'webpack';
 import { ExtraEntryPoint } from '../../builders/browser/schema';
 import { SassWorkerImplementation } from '../../sass/sass-service';
 import { BuildBrowserFeatures } from '../../utils/build-browser-features';
@@ -71,13 +71,13 @@ function resolveGlobalStyles(
 }
 
 // eslint-disable-next-line max-lines-per-function
-export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuration {
+export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   const postcssImports = require('postcss-import');
   const postcssPresetEnv: typeof import('postcss-preset-env') = require('postcss-preset-env');
 
   const { root, buildOptions } = wco;
-  const extraPlugins: { apply(compiler: webpack.Compiler): void }[] = [];
+  const extraPlugins: Configuration['plugins'] = [];
 
   extraPlugins.push(new AnyComponentStyleBudgetChecker(buildOptions.budgets));
 
@@ -230,7 +230,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
   const postCss = require('postcss');
   const postCssLoaderPath = require.resolve('postcss-loader');
 
-  const componentStyleLoaders: webpack.RuleSetUseItem[] = [
+  const componentStyleLoaders: RuleSetUseItem[] = [
     {
       loader: postCssLoaderPath,
       options: {
@@ -240,7 +240,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
     },
   ];
 
-  const globalStyleLoaders: webpack.RuleSetUseItem[] = [
+  const globalStyleLoaders: RuleSetUseItem[] = [
     {
       loader: MiniCssExtractPlugin.loader,
     },
@@ -263,7 +263,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
 
   const styleLanguages: {
     extensions: string[];
-    use: webpack.RuleSetUseItem[];
+    use: RuleSetUseItem[];
   }[] = [
     {
       extensions: ['css'],

packages/angular_devkit/build_angular/src/webpack/configs/test.ts

@@ -9,21 +9,19 @@
 import * as glob from 'glob';
 import * as path from 'path';
 import { ScriptTarget } from 'typescript';
-import * as webpack from 'webpack';
+import { Configuration, RuleSetRule } from 'webpack';
 import { WebpackConfigOptions, WebpackTestOptions } from '../../utils/build-options';
 import { getSourceMapDevTool, isPolyfillsEntry } from '../utils/helpers';
 
-export function getTestConfig(
-  wco: WebpackConfigOptions<WebpackTestOptions>,
-): webpack.Configuration {
+export function getTestConfig(wco: WebpackConfigOptions<WebpackTestOptions>): Configuration {
   const {
     buildOptions: { codeCoverage, codeCoverageExclude, main, sourceMap, webWorkerTsConfig },
     root,
     sourceRoot,
   } = wco;
 
-  const extraRules: webpack.RuleSetRule[] = [];
-  const extraPlugins: { apply(compiler: webpack.Compiler): void }[] = [];
+  const extraRules: RuleSetRule[] = [];
+  const extraPlugins: Configuration['plugins'] = [];
 
   if (codeCoverage) {
     const exclude: (string | RegExp)[] = [/\.(e2e|spec)\.tsx?$/, /node_modules/];