refactor(@angular-devkit/build-angular): move addition of HMR plugins and loaders to webpack configs

Author: alan-agius4

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -19,6 +19,7 @@ import * as webpack from 'webpack';
 import { ExecutionTransformer } from '../transforms';
 import {
   BuildBrowserFeatures,
+  NormalizedBrowserBuilderSchema,
   deleteOutputDir,
   normalizeAssetPatterns,
   normalizeOptimization,
@@ -105,7 +106,7 @@ export async function buildBrowserWebpackConfigFromContext(
   options: BrowserBuilderSchema,
   context: BuilderContext,
   host: virtualFs.Host<fs.Stats> = new NodeJsSyncHost(),
-  differentialLoadingMode = false,
+  extraBuildOptions: Partial<NormalizedBrowserBuilderSchema> = {},
 ): Promise<ConfigFromContextReturn> {
   const webpackPartialGenerator = (wco: BrowserWebpackConfigOptions) => [
     getCommonConfig(wco),
@@ -122,7 +123,7 @@ export async function buildBrowserWebpackConfigFromContext(
     context,
     webpackPartialGenerator,
     host,
-    differentialLoadingMode,
+    extraBuildOptions,
   );
 }
 
@@ -192,7 +193,7 @@ async function initialize(
     projectRoot,
     projectSourceRoot,
     i18n,
-  } = await buildBrowserWebpackConfigFromContext(adjustedOptions, context, host, differentialLoadingMode);
+  } = await buildBrowserWebpackConfigFromContext(adjustedOptions, context, host, { differentialLoadingMode });
 
   // Validate asset option values if processed directly
   if (options.assets?.length && !adjustedOptions.assets?.length) {

packages/angular_devkit/build_angular/src/dev-server/index.ts

@@ -37,7 +37,6 @@ import { readTsconfig } from '../utils/read-tsconfig';
 import { assertCompatibleAngularVersion } from '../utils/version';
 import { getIndexInputFile, getIndexOutputFile } from '../utils/webpack-browser-config';
 import { addError, addWarning } from '../utils/webpack-diagnostics';
-import { HmrLoader } from '../webpack/plugins/hmr/hmr-loader';
 import { IndexHtmlWebpackPlugin } from '../webpack/plugins/index-html-webpack-plugin';
 import { createWebpackLoggingCallback } from '../webpack/utils/stats';
 import { Schema } from './schema';
@@ -120,6 +119,7 @@ export function serveWebpackBrowser(
       browserOptions,
       context,
       host,
+      { hmr: options.hmr },
     );
     let webpackConfig = config;
 
@@ -571,23 +571,8 @@ function _addLiveReload(
     entryPoints.push(
       'webpack/hot/dev-server',
     );
-
-    webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
-
-    const hmrLoader: webpack.RuleSetRule = {
-      loader: HmrLoader,
-      include: [browserOptions.main].map(p => path.resolve(root, p)),
-    };
-
-    if (typeof webpackConfig.module !== 'object') {
-      webpackConfig.module = {
-        rules: [hmrLoader],
-      };
-    } else {
-      webpackConfig.module.rules.unshift(hmrLoader);
-    }
-
   }
+
   if (typeof webpackConfig.entry !== 'object' || Array.isArray(webpackConfig.entry)) {
     webpackConfig.entry = {};
   }

packages/angular_devkit/build_angular/src/utils/build-options.ts

@@ -60,6 +60,7 @@ export interface BuildOptions {
   webWorkerTsConfig?: string;
   statsJson: boolean;
   forkTypeChecker: boolean;
+  hmr?: boolean;
 
   main: string;
   polyfills?: string;
@@ -77,6 +78,8 @@ export interface BuildOptions {
 
   experimentalRollupPass?: boolean;
   allowedCommonJsDependencies?: string[];
+
+  differentialLoadingMode?: boolean;
 }
 
 export interface WebpackTestOptions extends BuildOptions {
@@ -93,5 +96,4 @@ export interface WebpackConfigOptions<T = BuildOptions> {
   tsConfig: ParsedConfiguration;
   tsConfigPath: string;
   supportES2015: boolean;
-  differentialLoadingMode?: boolean;
 }

packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts

@@ -39,7 +39,7 @@ export async function generateWebpackConfig(
   options: NormalizedBrowserBuilderSchema,
   webpackPartialGenerator: (wco: BrowserWebpackConfigOptions) => webpack.Configuration[],
   logger: logging.LoggerApi,
-  differentialLoadingMode: boolean,
+  extraBuildOptions: Partial<NormalizedBrowserBuilderSchema>,
 ): Promise<webpack.Configuration> {
   // Ensure Build Optimizer is only used with AOT.
   if (options.buildOptimizer && !options.aot) {
@@ -67,7 +67,7 @@ export async function generateWebpackConfig(
 
   const supportES2015 = scriptTarget !== ts.ScriptTarget.JSON && scriptTarget > ts.ScriptTarget.ES5;
 
-  const buildOptions: NormalizedBrowserBuilderSchema = { ...options };
+  const buildOptions: NormalizedBrowserBuilderSchema = { ...options, ...extraBuildOptions };
   const wco: BrowserWebpackConfigOptions = {
     root: workspaceRoot,
     logger: logger.createChild('webpackConfigOptions'),
@@ -77,7 +77,6 @@ export async function generateWebpackConfig(
     tsConfig,
     tsConfigPath,
     supportES2015,
-    differentialLoadingMode,
   };
 
   wco.buildOptions.progress = defaultProgress(wco.buildOptions.progress);
@@ -104,7 +103,7 @@ export async function generateWebpackConfig(
   if (profilingEnabled) {
     const esVersionInFileName = getEsVersionForFileName(
       tsConfig.options.target,
-      wco.differentialLoadingMode,
+      buildOptions.differentialLoadingMode,
     );
 
     const SpeedMeasurePlugin = await import('speed-measure-webpack-plugin');
@@ -127,15 +126,15 @@ export async function generateI18nBrowserWebpackConfigFromContext(
   context: BuilderContext,
   webpackPartialGenerator: (wco: BrowserWebpackConfigOptions) => webpack.Configuration[],
   host: virtualFs.Host<fs.Stats> = new NodeJsSyncHost(),
-  differentialLoadingMode = false,
+  extraBuildOptions: Partial<NormalizedBrowserBuilderSchema> = {},
 ): Promise<{ config: webpack.Configuration; projectRoot: string; projectSourceRoot?: string, i18n: I18nOptions }> {
   const { buildOptions, i18n } = await configureI18nBuild(context, options);
   const result = await generateBrowserWebpackConfigFromContext(
     buildOptions,
     context,
     webpackPartialGenerator,
     host,
-    differentialLoadingMode,
+    extraBuildOptions,
   );
   const config = result.config;
 
@@ -197,7 +196,7 @@ export async function generateBrowserWebpackConfigFromContext(
   context: BuilderContext,
   webpackPartialGenerator: (wco: BrowserWebpackConfigOptions) => webpack.Configuration[],
   host: virtualFs.Host<fs.Stats> = new NodeJsSyncHost(),
-  differentialLoadingMode = false,
+  extraBuildOptions: Partial<NormalizedBrowserBuilderSchema> = {},
 ): Promise<{ config: webpack.Configuration; projectRoot: string; projectSourceRoot?: string }> {
   const projectName = context.target && context.target.project;
   if (!projectName) {
@@ -227,7 +226,7 @@ export async function generateBrowserWebpackConfigFromContext(
     normalizedOptions,
     webpackPartialGenerator,
     context.logger,
-    differentialLoadingMode,
+    extraBuildOptions,
   );
 
   return {

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

@@ -5,10 +5,12 @@
  * 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 { resolve } from 'path';
 import * as webpack from 'webpack';
 import { WebpackConfigOptions } from '../../utils/build-options';
 import { withWebpackFourOrFive } from '../../utils/webpack-version';
 import { CommonJsUsageWarnPlugin } from '../plugins';
+import { HmrLoader } from '../plugins/hmr/hmr-loader';
 import { getSourceMapDevTool } from '../utils/helpers';
 
 export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configuration {
@@ -20,6 +22,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
     vendorChunk,
     commonChunk,
     allowedCommonJsDependencies,
+    hmr,
   } = buildOptions;
 
   const extraPlugins = [];
@@ -54,7 +57,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
     extraPlugins.push(getSourceMapDevTool(
       scriptsSourceMap,
       stylesSourceMap,
-      wco.differentialLoadingMode ? true : hiddenSourceMap,
+      buildOptions.differentialLoadingMode ? true : hiddenSourceMap,
       false,
       vendorSourceMap,
     ));
@@ -67,11 +70,24 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
     crossOriginLoading = crossOrigin;
   }
 
+  const extraRules: webpack.RuleSetRule[] = [];
+  if (hmr) {
+    extraRules.push({
+      loader: HmrLoader,
+      include: [buildOptions.main].map(p => resolve(wco.root, p)),
+    });
+
+    extraPlugins.push(new webpack.HotModuleReplacementPlugin());
+  }
+
   return {
     devtool: false,
     resolve: {
       mainFields: ['es2015', 'browser', 'module', 'main'],
     },
+    module: {
+      rules: extraRules,
+    },
     ...withWebpackFourOrFive({}, { target: ['web', 'es5'] }),
     output: {
       crossOriginLoading,

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

@@ -70,7 +70,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
 
   const targetInFileName = getEsVersionForFileName(
     tsConfig.options.target,
-    wco.differentialLoadingMode,
+    buildOptions.differentialLoadingMode,
   );
 
   if (buildOptions.main) {
@@ -121,7 +121,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     }
   }
 
-  const differentialLoadingMode = !!wco.differentialLoadingMode;
+  const differentialLoadingMode = buildOptions.differentialLoadingMode;
   if (wco.buildOptions.platform !== 'server') {
     if (differentialLoadingMode || tsConfig.options.target === ScriptTarget.ES5) {
       const buildBrowserFeatures = new BuildBrowserFeatures(

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

@@ -258,12 +258,16 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   }
 
   if (buildOptions.extractCss) {
+    // extract global css from js files into own css file.
     extraPlugins.push(
-      // extract global css from js files into own css file
       new MiniCssExtractPlugin({ filename: `[name]${hashFormat.extract}.css` }),
-      // suppress empty .js files in css only entry points
-      new SuppressExtractedTextChunksWebpackPlugin(),
     );
+
+    if (!buildOptions.hmr) {
+      // don't remove `.js` files for `.css` when we are using HMR these contain HMR accept codes.
+      // suppress empty .js files in css only entry points.
+      extraPlugins.push(new SuppressExtractedTextChunksWebpackPlugin());
+    }
   }
 
   return {

packages/angular_devkit/build_angular/src/webpack/plugins/suppress-entry-chunks-webpack-plugin.ts

@@ -14,11 +14,6 @@ export class SuppressExtractedTextChunksWebpackPlugin {
   apply(compiler: import('webpack').Compiler): void {
     compiler.hooks.compilation.tap('SuppressExtractedTextChunks', (compilation) => {
       compilation.hooks.chunkAsset.tap('SuppressExtractedTextChunks', (chunk, filename) => {
-        if (compiler.options?.devServer?.hot) {
-          // don't remove `.js` files for `.css` when we are using HMR these contain HMR accept codes.
-          return;
-        }
-
         // Remove only JavaScript assets
         if (!filename.endsWith('.js')) {
           return;