feat(webpack): add plugin to automatically configure build and serve …

…targets for projects
nrwl · Nov 14, 2023 · c1b3180 · c1b3180
1 parent 5d389dd
commit c1b3180
Show file tree

Hide file tree

Showing 24 changed files with 543 additions and 264 deletions.
diff --git a/docs/generated/packages/webpack/executors/webpack.json b/docs/generated/packages/webpack/executors/webpack.json
@@ -30,8 +30,7 @@
       "compiler": {
         "type": "string",
         "description": "The compiler to use.",
-        "enum": ["babel", "swc", "tsc"],
-        "default": "babel"
+        "enum": ["babel", "swc", "tsc"]
       },
       "outputPath": {
         "type": "string",
@@ -43,8 +42,7 @@
         "type": "string",
         "alias": "platform",
         "description": "Target platform for the build, same as the Webpack target option.",
-        "enum": ["node", "web", "webworker"],
-        "default": "web"
+        "enum": ["node", "web", "webworker"]
       },
       "deleteOutputPath": {
         "type": "boolean",
@@ -53,8 +51,7 @@
       },
       "watch": {
         "type": "boolean",
-        "description": "Enable re-building when files change.",
-        "default": false
+        "description": "Enable re-building when files change."
       },
       "baseHref": {
         "type": "string",
@@ -66,33 +63,27 @@
       },
       "vendorChunk": {
         "type": "boolean",
-        "description": "Use a separate bundle containing only vendor libraries.",
-        "default": true
+        "description": "Use a separate bundle containing only vendor libraries."
       },
       "commonChunk": {
         "type": "boolean",
-        "description": "Use a separate bundle containing code used across multiple bundles.",
-        "default": true
+        "description": "Use a separate bundle containing code used across multiple bundles."
       },
       "runtimeChunk": {
         "type": "boolean",
-        "description": "Use a separate bundle containing the runtime.",
-        "default": true
+        "description": "Use a separate bundle containing the runtime."
       },
       "sourceMap": {
         "description": "Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.",
-        "default": true,
         "oneOf": [{ "type": "boolean" }, { "type": "string" }]
       },
       "progress": {
         "type": "boolean",
-        "description": "Log progress to the console while building.",
-        "default": false
+        "description": "Log progress to the console while building."
       },
       "assets": {
         "type": "array",
         "description": "List of static application assets.",
-        "default": [],
         "items": {
           "oneOf": [
             {
@@ -163,8 +154,7 @@
               "x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
             }
           ]
-        },
-        "default": []
+        }
       },
       "styles": {
         "type": "array",
@@ -200,18 +190,15 @@
               "x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
             }
           ]
-        },
-        "default": []
+        }
       },
       "namedChunks": {
         "type": "boolean",
-        "description": "Names the produced bundles according to their entry file.",
-        "default": true
+        "description": "Names the produced bundles according to their entry file."
       },
       "outputHashing": {
         "type": "string",
         "description": "Define the output filename cache-busting hashing mode.",
-        "default": "none",
         "enum": ["none", "all", "media", "bundles"]
       },
       "stylePreprocessorOptions": {
@@ -221,8 +208,7 @@
           "includePaths": {
             "description": "Paths to include. Paths will be resolved to project root.",
             "type": "array",
-            "items": { "type": "string" },
-            "default": []
+            "items": { "type": "string" }
           }
         },
         "additionalProperties": false
@@ -251,13 +237,11 @@
       },
       "generatePackageJson": {
         "type": "boolean",
-        "description": "Generates a `package.json` and pruned lock file with the project's `node_module` dependencies populated for installing in a container. If a `package.json` exists in the project's directory, it will be reused with dependencies populated.",
-        "default": false
+        "description": "Generates a `package.json` and pruned lock file with the project's `node_module` dependencies populated for installing in a container. If a `package.json` exists in the project's directory, it will be reused with dependencies populated."
       },
       "transformers": {
         "type": "array",
         "description": "List of TypeScript Compiler Transfomers Plugins.",
-        "default": [],
         "aliases": ["tsPlugins"],
         "items": {
           "oneOf": [
@@ -302,49 +286,40 @@
           { "type": "string", "enum": ["none", "all"] },
           { "type": "array", "items": { "type": "string" } }
         ],
-        "description": "Dependencies to keep external to the bundle. (`all` (default), `none`, or an array of module names)",
-        "default": "all"
+        "description": "Dependencies to keep external to the bundle. (`all` (default), `none`, or an array of module names)"
       },
       "extractCss": {
         "type": "boolean",
-        "description": "Extract CSS into a `.css` file.",
-        "default": true
+        "description": "Extract CSS into a `.css` file."
       },
       "subresourceIntegrity": {
         "type": "boolean",
-        "description": "Enables the use of subresource integrity validation.",
-        "default": false
+        "description": "Enables the use of subresource integrity validation."
       },
       "polyfills": {
         "type": "string",
         "description": "Polyfills to load before application",
         "x-completion-type": "file",
         "x-completion-glob": "**/*@(.js|.ts|.tsx)"
       },
-      "verbose": {
-        "type": "boolean",
-        "description": "Emits verbose output",
-        "default": false
-      },
+      "verbose": { "type": "boolean", "description": "Emits verbose output" },
       "statsJson": {
         "type": "boolean",
-        "description": "Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or `<https://webpack.github.io/analyse>`.",
-        "default": false
+        "description": "Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or `<https://webpack.github.io/analyse>`."
       },
       "isolatedConfig": {
         "type": "boolean",
         "description": "Do not apply Nx webpack plugins automatically. Plugins need to be applied in the project's webpack.config.js file (e.g. withNx, withReact, etc.).",
-        "default": false
+        "default": true,
+        "x-deprecated": "Automatic configuration of Webpack is deprecated in favor of an explicit 'webpack.config.js' file. This option will be removed in Nx 18. See https://nx.dev/recipes/webpack/webpack-config-setup."
       },
       "extractLicenses": {
         "type": "boolean",
-        "description": "Extract all licenses in a separate file, in the case of production builds only.",
-        "default": false
+        "description": "Extract all licenses in a separate file, in the case of production builds only."
       },
       "memoryLimit": {
         "type": "number",
-        "description": "Memory limit for type checking service process in `MB`.",
-        "default": 2048
+        "description": "Memory limit for type checking service process in `MB`."
       },
       "fileReplacements": {
         "description": "Replace files with other files in the build.",
@@ -365,8 +340,7 @@
           },
           "additionalProperties": false,
           "required": ["replace", "with"]
-        },
-        "default": []
+        }
       },
       "buildLibsFromSource": {
         "type": "boolean",
@@ -375,8 +349,7 @@
       },
       "generateIndexHtml": {
         "type": "boolean",
-        "description": "Generates `index.html` file to the output path. This can be turned off if using a webpack plugin to generate HTML such as `html-webpack-plugin`.",
-        "default": true
+        "description": "Generates `index.html` file to the output path. This can be turned off if using a webpack plugin to generate HTML such as `html-webpack-plugin`."
       },
       "postcssConfig": {
         "type": "string",
@@ -391,8 +364,7 @@
       },
       "babelUpwardRootMode": {
         "type": "boolean",
-        "description": "Whether to set rootmode to upward. See https://babeljs.io/docs/en/options#rootmode",
-        "default": false
+        "description": "Whether to set rootmode to upward. See https://babeljs.io/docs/en/options#rootmode"
       },
       "babelConfig": {
         "type": "string",

diff --git a/packages/react/plugins/component-testing/index.ts b/packages/react/plugins/component-testing/index.ts
@@ -235,8 +235,8 @@ function buildTargetWebpack(
     normalizeOptions,
   } = require('@nx/webpack/src/executors/webpack/lib/normalize-options');
   const {
-    resolveCustomWebpackConfig,
-  } = require('@nx/webpack/src/utils/webpack/custom-webpack');
+    resolveUserDefinedWebpackConfig,
+  } = require('@nx/webpack/src/utils/webpack/resolve-user-defined-webpack-config');
   const {
     getWebpackConfig,
   } = require('@nx/webpack/src/executors/webpack/lib/get-webpack-config');
@@ -251,7 +251,7 @@ function buildTargetWebpack(
   let customWebpack: any;
 
   if (options.webpackConfig) {
-    customWebpack = resolveCustomWebpackConfig(
+    customWebpack = resolveUserDefinedWebpackConfig(
       options.webpackConfig,
       options.tsConfig.startsWith(context.root)
         ? options.tsConfig

diff --git a/packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts b/packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts
@@ -1,9 +1,11 @@
-import { Compiler, Configuration, WebpackOptionsNormalized } from 'webpack';
+import { Configuration, WebpackOptionsNormalized } from 'webpack';
 
 export function applyReactConfig(
   options: { svgr?: boolean },
   config: Partial<WebpackOptionsNormalized | Configuration> = {}
 ): void {
+  if (!process.env['NX_TASK_TARGET_PROJECT']) return;
+
   addHotReload(config);
 
   if (options.svgr !== false) {

diff --git a/packages/react/src/module-federation/with-module-federation.ts b/packages/react/src/module-federation/with-module-federation.ts
@@ -1,15 +1,15 @@
 import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
 import { getModuleFederationConfig } from './utils';
-import type { AsyncNxWebpackPlugin } from '@nx/webpack';
+import type { AsyncNxComposableWebpackPlugin } from '@nx/webpack';
 import ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
 
 /**
  * @param {ModuleFederationConfig} options
- * @return {Promise<AsyncNxWebpackPlugin>}
+ * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
 export async function withModuleFederation(
   options: ModuleFederationConfig
-): Promise<AsyncNxWebpackPlugin> {
+): Promise<AsyncNxComposableWebpackPlugin> {
   const { sharedDependencies, sharedLibraries, mappedRemotes } =
     await getModuleFederationConfig(options);
 

diff --git a/packages/web/src/executors/file-server/schema.d.ts b/packages/web/src/executors/file-server/schema.d.ts
@@ -1,7 +1,7 @@
 export interface Schema {
-  host: string;
-  port: number;
-  ssl: boolean;
+  host?: string;
+  port?: number;
+  ssl?: boolean;
   sslKey?: string;
   sslCert?: string;
   proxyUrl?: string;

diff --git a/packages/webpack/plugin.ts b/packages/webpack/plugin.ts
@@ -0,0 +1 @@
+export { createNodes } from './src/plugins/plugin';
diff --git a/packages/webpack/src/executors/dev-server/dev-server.impl.ts b/packages/webpack/src/executors/dev-server/dev-server.impl.ts
@@ -15,11 +15,12 @@ import {
   createTmpTsConfig,
 } from '@nx/js/src/utils/buildable-libs-utils';
 import { runWebpackDevServer } from '../../utils/run-webpack';
-import { resolveCustomWebpackConfig } from '../../utils/webpack/custom-webpack';
+import { resolveUserDefinedWebpackConfig } from '../../utils/webpack/resolve-user-defined-webpack-config';
 import { normalizeOptions } from '../webpack/lib/normalize-options';
 import { WebpackExecutorOptions } from '../webpack/schema';
 import { WebDevServerOptions } from './schema';
 import { join } from 'path';
+import { isNxWebpackComposablePlugin } from '../../utils/config';
 
 export async function* devServerExecutor(
   serveOptions: WebDevServerOptions,
@@ -37,12 +38,6 @@ export async function* devServerExecutor(
     sourceRoot
   );
 
-  if (!buildOptions.index) {
-    throw new Error(
-      `Cannot run dev-server without "index" option. Check the build options for ${context.projectName}.`
-    );
-  }
-
   if (!buildOptions.buildLibsFromSource) {
     const { target, dependencies } = calculateProjectBuildableDependencies(
       context.taskGraph,
@@ -66,30 +61,30 @@ export async function* devServerExecutor(
     let tsconfigPath = buildOptions.tsConfig.startsWith(context.root)
       ? buildOptions.tsConfig
       : join(context.root, buildOptions.tsConfig);
-    let customWebpack = resolveCustomWebpackConfig(
+    let userDefinedWebpackConfig = resolveUserDefinedWebpackConfig(
       buildOptions.webpackConfig,
       tsconfigPath
     );
 
-    if (typeof customWebpack.then === 'function') {
-      customWebpack = await customWebpack;
+    if (typeof userDefinedWebpackConfig.then === 'function') {
+      userDefinedWebpackConfig = await userDefinedWebpackConfig;
     }
 
-    if (typeof customWebpack === 'function') {
+    if (isNxWebpackComposablePlugin(userDefinedWebpackConfig)) {
       // Old behavior, call the webpack function that is specific to Nx
-      config = await customWebpack(config, {
+      config = await userDefinedWebpackConfig(config, {
         options: buildOptions,
         context,
         configuration: serveOptions.buildTarget.split(':')[2],
       });
-    } else if (customWebpack) {
+    } else if (userDefinedWebpackConfig) {
       // New behavior, use the config object as is with devServer defaults
       config = {
         devServer: {
-          ...customWebpack.devServer,
+          ...userDefinedWebpackConfig.devServer,
           ...config.devServer,
         },
-        ...customWebpack,
+        ...userDefinedWebpackConfig,
       };
     }
   }

diff --git a/packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts b/packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts
@@ -47,11 +47,14 @@ function getDevServerPartial(
   }
 
   const config: WebpackDevServerConfiguration = {
-    host: options.host,
-    port: options.port,
+    // TODO(wip): These should be read from actual config
+    host: options.host ?? 'localhost',
+    port: options.port ?? 4200,
     headers: { 'Access-Control-Allow-Origin': '*' },
     historyApiFallback: {
-      index: `${servePath}${path.basename(buildOptions.index)}`,
+      index:
+        buildOptions.index &&
+        `${servePath}${path.basename(buildOptions.index)}`,
       disableDotRule: true,
       htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
     },

diff --git a/packages/webpack/src/executors/dev-server/schema.d.ts b/packages/webpack/src/executors/dev-server/schema.d.ts
@@ -1,17 +1,17 @@
 export interface WebDevServerOptions {
-  host: string;
-  port: number;
+  host?: string;
+  port?: number;
   publicHost?: string;
-  ssl: boolean;
+  ssl?: boolean;
   sslKey?: string;
   sslCert?: string;
   proxyConfig?: string;
   buildTarget: string;
-  open: boolean;
-  liveReload: boolean;
-  hmr: boolean;
-  watch: boolean;
-  allowedHosts: string;
+  open?: boolean;
+  liveReload?: boolean;
+  hmr?: boolean;
+  watch?: boolean;
+  allowedHosts?: string;
   memoryLimit?: number;
   baseHref?: string;
 }
diff --git a/packages/webpack/src/executors/webpack/lib/normalize-options.ts b/packages/webpack/src/executors/webpack/lib/normalize-options.ts
@@ -19,7 +19,7 @@ export function normalizeOptions(
     sourceRoot,
     target: options.target ?? 'web',
     outputFileName: options.outputFileName ?? 'main.js',
-    assets: normalizeAssets(options.assets, root, sourceRoot),
+    assets: options.assets && normalizeAssets(options.assets, root, sourceRoot),
     webpackConfig: normalizePluginPath(options.webpackConfig, root),
     optimization:
       typeof options.optimization !== 'object'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { createNodes } from './src/plugins/plugin';