feat(webpack): move web-specific options into withWeb plugin (#14590)

packages/react/plugins/with-react.ts

@@ -1,13 +1,18 @@
 import type { Configuration } from 'webpack';
+import type { WithWebOptions } from '@nrwl/webpack';
 
 const processed = new Set();
 
-export function withReact() {
+interface WithReactOptions extends WithWebOptions {}
+
+export function withReact(pluginOptions: WithReactOptions = {}) {
   return function configure(config: Configuration, _ctx?: any): Configuration {
     const { withWeb } = require('@nrwl/webpack');
 
     if (processed.has(config)) return config;
-    config = withWeb()(config, _ctx);
+
+    // Apply web config for CSS, JSX, index.html handling, etc.
+    config = withWeb(pluginOptions)(config, _ctx);
 
     config.module.rules.push({
       test: /\.svg$/,

packages/webpack/package.json

@@ -50,7 +50,6 @@
     "loader-utils": "^2.0.3",
     "mini-css-extract-plugin": "~2.4.7",
     "parse5": "4.0.0",
-    "parse5-html-rewriting-stream": "6.0.1",
     "postcss": "^8.4.14",
     "postcss-import": "~14.1.0",
     "postcss-loader": "^6.1.1",

packages/webpack/src/executors/dev-server/dev-server.impl.ts

@@ -17,7 +17,6 @@ import {
 import { runWebpackDevServer } from '../../utils/run-webpack';
 import { resolveCustomWebpackConfig } from '../../utils/webpack/custom-webpack';
 import { normalizeOptions } from '../webpack/lib/normalize-options';
-import { getEmittedFiles } from '../webpack/lib/get-emitted-files';
 import { WebpackExecutorOptions } from '../webpack/schema';
 import { WebDevServerOptions } from './schema';
 
@@ -83,7 +82,6 @@ export async function* devServerExecutor(
       map(({ baseUrl, stats }) => {
         return {
           baseUrl,
-          emittedFiles: getEmittedFiles(stats),
           success: !stats.hasErrors(),
         };
       })

packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts

@@ -2,14 +2,11 @@ import { ExecutorContext, logger } from '@nrwl/devkit';
 import type { Configuration as WebpackConfiguration } from 'webpack';
 import type { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import * as path from 'path';
-import { basename, resolve } from 'path';
 
 import { getWebpackConfig } from '../../webpack/lib/get-webpack-config';
 import { WebDevServerOptions } from '../schema';
 import { buildServePath } from './serve-path';
 import { readFileSync } from 'fs-extra';
-import { generateEntryPoints } from '../../../utils//webpack/package-chunk-sort';
-import { IndexHtmlWebpackPlugin } from '../../../utils/webpack/plugins/index-html-webpack-plugin';
 import { NormalizedWebpackExecutorOptions } from '../../webpack/schema';
 
 export function getDevServerConfig(
@@ -28,27 +25,6 @@ export function getDevServerConfig(
     buildOptions
   );
 
-  const {
-    deployUrl,
-    subresourceIntegrity,
-    scripts = [],
-    styles = [],
-    index,
-    baseHref,
-  } = buildOptions;
-
-  webpackConfig.plugins.push(
-    new IndexHtmlWebpackPlugin({
-      indexPath: resolve(workspaceRoot, index),
-      outputPath: basename(index),
-      baseHref,
-      entrypoints: generateEntryPoints({ scripts, styles }),
-      deployUrl,
-      sri: subresourceIntegrity,
-      moduleEntrypoints: [],
-    })
-  );
-
   return webpackConfig as WebpackConfiguration;
 }
 

packages/webpack/src/executors/webpack/schema.d.ts

@@ -1,5 +1,4 @@
 import { AssetGlob } from '@nrwl/workspace/src/utilities/assets';
-import { CrossOriginValue } from '../../utils/webpack/write-index-html';
 
 export interface AssetGlobPattern {
   glob: string;
@@ -40,20 +39,14 @@ export interface OptimizationOptions {
 export interface WebpackExecutorOptions {
   additionalEntryPoints?: AdditionalEntryPoint[];
   assets?: Array<AssetGlob | string>;
-  baseHref?: string;
   buildLibsFromSource?: boolean;
   commonChunk?: boolean;
   compiler?: 'babel' | 'swc' | 'tsc';
-  crossOrigin?: CrossOriginValue;
   deleteOutputPath?: boolean;
-  deployUrl?: string;
   externalDependencies?: 'all' | 'none' | string[];
-  extractCss?: boolean;
   extractLicenses?: boolean;
   fileReplacements?: FileReplacement[];
-  generateIndexHtml?: boolean;
   generatePackageJson?: boolean;
-  index?: string;
   isolatedConfig?: boolean;
   main: string;
   memoryLimit?: number;
@@ -64,22 +57,40 @@ export interface WebpackExecutorOptions {
   outputPath: string;
   poll?: number;
   polyfills?: string;
-  postcssConfig?: string;
   progress?: boolean;
   runtimeChunk?: boolean;
-  scripts?: Array<ExtraEntryPointClass | string>;
   sourceMap?: boolean | 'hidden';
   statsJson?: boolean;
-  stylePreprocessorOptions?: any;
-  styles?: Array<ExtraEntryPointClass | string>;
-  subresourceIntegrity?: boolean;
   target?: 'node' | 'web';
   transformers?: TransformerEntry[];
   tsConfig: string;
   vendorChunk?: boolean;
   verbose?: boolean;
   watch?: boolean;
   webpackConfig?: string;
+  // TODO(jack): Also deprecate these in schema.json once we have migration from executor options to webpack.config.js file.
+  /** @deprecated Moved to withWeb options from `@nrwl/webpack` */
+  baseHref?: string;
+  /** @deprecated Moved to withWeb options from `@nrwl/webpack` */
+  crossOrigin?: 'none' | 'anonymous' | 'use-credentials';
+  /** @deprecated Moved to withWeb options from `@nrwl/webpack` */
+  deployUrl?: string;
+  /** @deprecated Moved to withWeb options from `@nrwl/webpack` */
+  extractCss?: boolean;
+  /** @deprecated Moved to withWeb options from `@nrwl/webpack` */
+  generateIndexHtml?: boolean;
+  /** @deprecated Moved to withWeb options from `@nrwl/webpack` */
+  index?: string;
+  /** @deprecated Moved to withWeb options from `@nrwl/webpack` */
+  postcssConfig?: string;
+  /** @deprecated Moved to withWeb options from `@nrwl/webpack` */
+  scripts?: Array<ExtraEntryPointClass | string>;
+  /** @deprecated Moved to withWeb options from `@nrwl/webpack` */
+  stylePreprocessorOptions?: any;
+  /** @deprecated Moved to withWeb options from `@nrwl/webpack` */
+  styles?: Array<ExtraEntryPointClass | string>;
+  /** @deprecated Moved to withWeb options from `@nrwl/webpack` */
+  subresourceIntegrity?: boolean;
 }
 
 export interface NormalizedWebpackExecutorOptions

packages/webpack/src/executors/webpack/webpack.impl.ts

@@ -4,24 +4,21 @@ import { eachValueFrom } from '@nrwl/devkit/src/utils/rxjs-for-await';
 import type { Configuration } from 'webpack';
 import { of } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
-import { basename, join, resolve } from 'path';
+import { resolve } from 'path';
 import {
   calculateProjectDependencies,
   createTmpTsConfig,
 } from '@nrwl/workspace/src/utilities/buildable-libs-utils';
 
 import { getWebpackConfig } from './lib/get-webpack-config';
-import { getEmittedFiles } from './lib/get-emitted-files';
 import { runWebpack } from './lib/run-webpack';
 import { deleteOutputDir } from '../../utils/fs';
-import { writeIndexHtml } from '../../utils/webpack/write-index-html';
 import { resolveCustomWebpackConfig } from '../../utils/webpack/custom-webpack';
 import type {
   NormalizedWebpackExecutorOptions,
   WebpackExecutorOptions,
 } from './schema';
 import { normalizeOptions } from './lib/normalize-options';
-import { EmittedFile } from '../../utils/models';
 
 async function getWebpackConfigs(
   options: NormalizedWebpackExecutorOptions,
@@ -32,6 +29,7 @@ async function getWebpackConfigs(
       `Using "isolatedConfig" without a "webpackConfig" is not supported.`
     );
   }
+
   let customWebpack = null;
 
   if (options.webpackConfig) {
@@ -73,7 +71,6 @@ export type WebpackExecutorEvent =
   | {
       success: true;
       outfile: string;
-      emittedFiles: EmittedFile[];
       options?: WebpackExecutorOptions;
     };
 
@@ -151,30 +148,13 @@ export async function* webpackExecutor(
       }),
       switchMap(async (result) => {
         const success = result && !result.hasErrors();
-        const emittedFiles = getEmittedFiles(result);
-        if (options.index && options.generateIndexHtml) {
-          await writeIndexHtml({
-            crossOrigin: options.crossOrigin,
-            sri: options.subresourceIntegrity,
-            outputPath: join(options.outputPath, basename(options.index)),
-            indexPath: join(context.root, options.index),
-            files: emittedFiles.filter((x) => x.extension === '.css'),
-            noModuleFiles: [],
-            moduleFiles: emittedFiles,
-            baseHref: options.baseHref,
-            deployUrl: options.deployUrl,
-            scripts: options.scripts,
-            styles: options.styles,
-          });
-        }
         return {
           success,
           outfile: resolve(
             context.root,
             options.outputPath,
             options.outputFileName
           ),
-          emittedFiles,
           options,
         };
       })

packages/webpack/src/plugins/stats-json-plugin.ts

@@ -2,7 +2,7 @@ import { Compiler, sources } from 'webpack';
 
 export class StatsJsonPlugin {
   apply(compiler: Compiler) {
-    compiler.hooks.emit.tap('angular-cli-stats', (compilation) => {
+    compiler.hooks.emit.tap('StatsJsonPlugin', (compilation) => {
       const data = JSON.stringify(compilation.getStats().toJson('verbose'));
       compilation.assets[`stats.json`] = new sources.RawSource(data);
     });