@nx/webpack 24.0.0-beta.3 → 24.0.0-beta.4

package/dist/ready-check.d.ts

@@ -0,0 +1 @@
+export declare function waitForDevServer(configPath: string): Promise<void>;

package/dist/ready-check.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.waitForDevServer = waitForDevServer;
+const dev_server_ready_check_1 = require("./src/utils/dev-server-ready-check");
+// The config can leave handles open, such as a type checker's workers
+async function waitForDevServer(configPath) {
+    await (0, dev_server_ready_check_1.waitForWebpackDevServer)(configPath);
+    process.exit(0);
+}

package/dist/ready-signal.d.ts

@@ -0,0 +1 @@
+export { NxReadySignalPlugin } from './src/utils/dev-server-ready-signal';

package/dist/ready-signal.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NxReadySignalPlugin = void 0;
+var dev_server_ready_signal_1 = require("./src/utils/dev-server-ready-signal");
+Object.defineProperty(exports, "NxReadySignalPlugin", { enumerable: true, get: function () { return dev_server_ready_signal_1.NxReadySignalPlugin; } });

package/dist/src/plugins/nx-webpack-plugin/nx-app-webpack-plugin.d.ts

@@ -1,5 +1,6 @@
 import type { Compiler } from 'webpack';
 import { NxAppWebpackPluginOptions } from './nx-app-webpack-plugin-options';
+import { READY_SIGNAL_PLUGIN } from '../../utils/dev-server-ready-signal';
 /**
  * This plugin provides features to build Node and Web applications.
  * - TS support (including tsconfig paths)
@@ -12,6 +13,7 @@ import { NxAppWebpackPluginOptions } from './nx-app-webpack-plugin-options';
  */
 export declare class NxAppWebpackPlugin {
     private readonly options;
+    readonly [READY_SIGNAL_PLUGIN] = true;
     constructor(options?: NxAppWebpackPluginOptions);
     apply(compiler: Compiler): void;
 }

package/dist/src/plugins/nx-webpack-plugin/nx-app-webpack-plugin.js

@@ -1,7 +1,9 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NxAppWebpackPlugin = void 0;
 const normalize_options_1 = require("./lib/normalize-options");
+const dev_server_ready_signal_1 = require("../../utils/dev-server-ready-signal");
 /**
  * This plugin provides features to build Node and Web applications.
  * - TS support (including tsconfig paths)
@@ -14,6 +16,7 @@ const normalize_options_1 = require("./lib/normalize-options");
  */
 class NxAppWebpackPlugin {
     constructor(options = {}) {
+        this[_a] = true;
         // If we're building inferred targets, skip normalizing build options.
         if (!global.NX_GRAPH_CREATION) {
             this.options = (0, normalize_options_1.normalizeOptions)(options);
@@ -23,6 +26,8 @@ class NxAppWebpackPlugin {
         // Lazy-required so a generator can load this without the webpack bundler.
         const { applyBaseConfig } = require('./lib/apply-base-config');
         const { applyWebConfig } = require('./lib/apply-web-config');
+        const { applyDevServerReadySignal } = require('../../utils/dev-server-ready-signal');
+        applyDevServerReadySignal(compiler);
         // Defaults to 'web' if not specified to match Webpack's default.
         const target = this.options.target ?? compiler.options.target ?? 'web';
         this.options.outputPath ??= compiler.options.output?.path;
@@ -54,3 +59,4 @@ class NxAppWebpackPlugin {
     }
 }
 exports.NxAppWebpackPlugin = NxAppWebpackPlugin;
+_a = dev_server_ready_signal_1.READY_SIGNAL_PLUGIN;

package/dist/src/plugins/plugin.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createNodesV2 = exports.createNodes = void 0;
 const internal_1 = require("@nx/devkit/internal");
+const dev_server_ready_signal_1 = require("../utils/dev-server-ready-signal");
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
 const internal_2 = require("@nx/js/internal");
@@ -121,6 +122,7 @@ async function createWebpackTargets(configFilePath, projectRoot, options, contex
             },
         },
     };
+    const devServerReadyWhen = getDevServerReadyWhen(configFilePath, webpackOptions);
     targets[options.serveTargetName] = {
         continuous: true,
         inputs: [...buildInputs],
@@ -129,6 +131,7 @@ async function createWebpackTargets(configFilePath, projectRoot, options, contex
             cwd: projectRoot,
             env: { NODE_ENV: 'development' },
         },
+        readyWhen: devServerReadyWhen,
         metadata: {
             technologies: ['webpack'],
             description: 'Starts Webpack dev server',
@@ -150,6 +153,7 @@ async function createWebpackTargets(configFilePath, projectRoot, options, contex
             cwd: projectRoot,
             env: { NODE_ENV: 'production' },
         },
+        readyWhen: devServerReadyWhen,
         metadata: {
             technologies: ['webpack'],
             description: 'Starts Webpack dev server in production mode',
@@ -172,6 +176,7 @@ async function createWebpackTargets(configFilePath, projectRoot, options, contex
             buildTarget: options.buildTargetName,
             spa: true,
         },
+        readyWhen: { port: '{options.port}', host: '{options.host ?? localhost}' },
     };
     // for `convert-to-inferred` we need to leave the port undefined or the options will not match
     if (webpackConfig.devServer?.port && webpackConfig.devServer?.port !== 4200) {
@@ -255,3 +260,22 @@ function normalizeOptions(options) {
         watchDepsTargetName: 'watch-deps',
     };
 }
+// A dev server whose config loads NxAppWebpackPlugin or NxReadySignalPlugin reports
+// when it listens. Otherwise the check reads the config when the task runs,
+// with the task's env and options, and waits for the dev server's port.
+function getDevServerReadyWhen(configFilePath, configs) {
+    // webpack-cli starts a dev server for each config with devServer. Only the
+    // first one to listen would signal, so several get the check that waits
+    // for each of them.
+    const withDevServer = configs.filter((config) => config.devServer);
+    const signals = withDevServer.length === 1 && (0, dev_server_ready_signal_1.sendsReadySignal)(withDevServer[0]);
+    return signals
+        ? { signal: true }
+        : {
+            // Unquoted: the plugin's glob fixes the file name. Quote it if it ever
+            // becomes user-chosen, since the shell expands $, backticks and %.
+            command: `node -e "require('@nx/webpack/ready-check').waitForDevServer(process.argv[1])" ${(0, path_1.basename)(configFilePath)}`,
+            // Each attempt loads the config
+            interval: 1000,
+        };
+}

package/dist/src/plugins/use-legacy-nx-plugin/use-legacy-nx-plugin.js

@@ -59,6 +59,9 @@ async function useLegacyNxPlugin(fn, executorOptions) {
         apply(compiler) {
             compiler.hooks.beforeCompile.tapPromise('NxLegacyAsyncPlugin', () => {
                 return new Promise((resolve) => {
+                    // Legacy functions are typed to take `Configuration` but mutate the
+                    // normalized options in place. From webpack 5.111 the two types
+                    // conflict (`output.copy`), and the public signature can't widen.
                     fn(compiler.options, ctx).then((updated) => {
                         // Merge options back shallowly since it's a fully functional configuration.
                         // Most likely, the user modified the config in place, but this guarantees that updates are applied if users did something like:

package/dist/src/utils/dev-server-ready-check.d.ts

@@ -0,0 +1,48 @@
+export interface ServeFlags {
+    port?: string;
+    host?: string;
+    configNames: string[];
+    configs: string[];
+    merge: boolean;
+    env: Record<string, unknown>;
+    extends: string[];
+}
+/**
+ * The flags `webpack-cli serve` gets from the target's options, in the order
+ * run-commands passes them: named options, `args`, then overrides.
+ */
+export declare function parseServeFlags(options: Record<string, unknown>): ServeFlags;
+/**
+ * The `argv` webpack-cli passes to a function config: its commander options,
+ * with `env` set by the caller. Values stay strings except `--port`, which
+ * webpack-cli converts to a number when it is numeric.
+ */
+export declare function parseServeArgv(options: Record<string, unknown>, env: Record<string, unknown>): Record<string, unknown>;
+export type DevServerAddress = {
+    port: number;
+    host?: string;
+};
+/**
+ * Where a dev server listens, or null when it picks its port or listens on a
+ * socket. Returns null for those, since nothing can be probed ahead of them.
+ */
+export declare function getDevServerAddress(devServer: {
+    port?: unknown;
+    host?: unknown;
+    ipc?: unknown;
+} | undefined, flags: ServeFlags, basePort: string | undefined): DevServerAddress | null;
+/** Resolves once every address accepts a TCP connection. */
+export declare function waitForAddresses(addresses: DevServerAddress[]): Promise<void>;
+export declare function readTaskOptions(): Record<string, unknown> & {
+    cwd?: string;
+};
+export declare function enterTaskCwd(options: {
+    cwd?: string;
+}): void;
+/**
+ * The readyWhen of the inferred serve targets when the config doesn't load the
+ * signal plugin. Runs in the env and with the options of the serve task, reads
+ * the config the way `webpack-cli serve` does, and waits for each dev server it
+ * starts.
+ */
+export declare function waitForWebpackDevServer(configPath: string): Promise<void>;

package/dist/src/utils/dev-server-ready-check.js

@@ -0,0 +1,325 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseServeFlags = parseServeFlags;
+exports.parseServeArgv = parseServeArgv;
+exports.getDevServerAddress = getDevServerAddress;
+exports.waitForAddresses = waitForAddresses;
+exports.readTaskOptions = readTaskOptions;
+exports.enterTaskCwd = enterTaskCwd;
+exports.waitForWebpackDevServer = waitForWebpackDevServer;
+const internal_1 = require("@nx/devkit/internal");
+const module_1 = require("module");
+const net_1 = require("net");
+const path_1 = require("path");
+const SHORT_FLAGS = {
+    c: 'config',
+    m: 'merge',
+    e: 'extends',
+};
+const VARIADIC_FLAGS = new Set(['config', 'config-name', 'env', 'extends']);
+// The flags read here that webpack-cli accepts as `--name=value`, the form
+// run-commands gives named options
+const NAMED_FLAGS = ['port', 'host', 'config', 'config-name', 'extends'];
+/**
+ * The flags `webpack-cli serve` gets from the target's options, in the order
+ * run-commands passes them: named options, `args`, then overrides.
+ */
+function parseServeFlags(options) {
+    const flags = {
+        configNames: [],
+        configs: [],
+        merge: false,
+        env: {},
+        extends: [],
+    };
+    const set = (name, value) => {
+        if (name === 'port')
+            flags.port = value;
+        else if (name === 'host')
+            flags.host = value;
+        else if (name === 'config-name')
+            flags.configNames.push(value);
+        else if (name === 'config')
+            flags.configs.push(value);
+        else if (name === 'extends')
+            flags.extends.push(value);
+        else if (name === 'env')
+            parseEnv(value, flags.env);
+    };
+    const argv = getServeArgv(options);
+    const isValue = (arg) => arg && !arg.startsWith('-');
+    for (let i = 0; i < argv.length; i++) {
+        const [, long, inline] = argv[i].match(/^--([^=]+)(?:=(.*))?$/) ?? [];
+        const [, short, attached] = long
+            ? []
+            : (argv[i].match(/^-(.)(.+)?$/) ?? []);
+        const name = long ?? SHORT_FLAGS[short];
+        if (!name)
+            continue;
+        if (name === 'merge') {
+            flags.merge = true;
+            continue;
+        }
+        const value = inline ?? attached ?? (isValue(argv[i + 1]) ? argv[++i] : undefined);
+        if (value === undefined)
+            continue;
+        set(name, value);
+        // Commander continues a variadic list only after a value in its own arg
+        if (inline === undefined &&
+            attached === undefined &&
+            VARIADIC_FLAGS.has(name)) {
+            while (isValue(argv[i + 1]))
+                set(name, argv[++i]);
+        }
+    }
+    return flags;
+}
+/**
+ * The `argv` webpack-cli passes to a function config: its commander options,
+ * with `env` set by the caller. Values stay strings except `--port`, which
+ * webpack-cli converts to a number when it is numeric.
+ */
+function parseServeArgv(options, env) {
+    const argv = {};
+    const tokens = getServeArgv(options);
+    const isValue = (arg) => arg && !arg.startsWith('-');
+    for (let i = 0; i < tokens.length; i++) {
+        const [, long, inline] = tokens[i].match(/^--([^=]+)(?:=(.*))?$/) ?? [];
+        const [, short, attached] = long
+            ? []
+            : (tokens[i].match(/^-(.)(.+)?$/) ?? []);
+        const flag = long ?? SHORT_FLAGS[short];
+        if (!flag)
+            continue;
+        const negated = flag.startsWith('no-');
+        const name = (negated ? flag.slice(3) : flag).replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+        if (negated) {
+            argv[name] = false;
+            continue;
+        }
+        const values = [];
+        const first = inline ?? attached ?? (isValue(tokens[i + 1]) ? tokens[++i] : undefined);
+        if (first !== undefined) {
+            values.push(first);
+            if (inline === undefined &&
+                attached === undefined &&
+                VARIADIC_FLAGS.has(flag)) {
+                while (isValue(tokens[i + 1]))
+                    values.push(tokens[++i]);
+            }
+        }
+        if (flag === 'env')
+            continue;
+        if (VARIADIC_FLAGS.has(flag)) {
+            argv[name] = [...(argv[name] ?? []), ...values];
+        }
+        else if (values.length === 0) {
+            argv[name] = true;
+        }
+        else {
+            const value = values[0];
+            argv[name] =
+                flag === 'port' && value.trim() !== '' && !isNaN(Number(value))
+                    ? Number(value)
+                    : value;
+        }
+    }
+    return { ...argv, env };
+}
+function getServeArgv(options) {
+    const args = (0, internal_1.splitShellArgs)(Array.isArray(options.args)
+        ? options.args.join(' ')
+        : typeof options.args === 'string'
+            ? options.args
+            : '');
+    const unparsed = Array.isArray(options.__unparsed__)
+        ? options.__unparsed__.map(String)
+        : [];
+    // run-commands drops a named option that overrides set, or that args set to
+    // another value
+    const named = NAMED_FLAGS.filter((name) => {
+        const value = options[name];
+        const fromArgs = flagValues(args, name);
+        return (['string', 'number', 'boolean'].includes(typeof value) &&
+            flagValues(unparsed, name).length === 0 &&
+            (fromArgs.length === 0 ||
+                (fromArgs.length === 1 && fromArgs[0] === String(value))));
+    }).map((name) => `--${name}=${options[name]}`);
+    // run-commands keeps `--env` for itself and drops it from the overrides,
+    // with the value it parsed for it
+    const env = flagValues(unparsed, 'env');
+    const envValue = String(env.length === 1 ? env[0] : env);
+    const overrides = unparsed.filter((arg, i) => !/^--env(=|$|\.[^=]*=)/.test(arg) &&
+        !(unparsed[i - 1] === '--env' && arg === envValue));
+    return [...named, ...args, ...overrides];
+}
+// The values yargs-parser reads for `--name`, as strings
+function flagValues(argv, name) {
+    const values = [];
+    argv.forEach((arg, i) => {
+        if (arg === `--no-${name}`)
+            values.push(false);
+        else if (arg.startsWith(`--${name}=`)) {
+            values.push(arg.slice(name.length + 3));
+        }
+        else if (arg === `--${name}`) {
+            const next = argv[i + 1];
+            values.push(next && !next.startsWith('-') ? next : true);
+        }
+    });
+    return values;
+}
+// webpack-cli's `--env` parser, edge cases included
+function parseEnv(value, env) {
+    const [allKeys, val] = value.split(/[=](.+)/, 2);
+    const splitKeys = allKeys.split(/\.(?!$)/);
+    let prevRef = env;
+    for (let [index, someKey] of splitKeys.entries()) {
+        if (someKey.endsWith('=')) {
+            someKey = someKey.slice(0, -1);
+            prevRef[someKey] = undefined;
+            continue;
+        }
+        if (!prevRef[someKey] || typeof prevRef[someKey] === 'string') {
+            prevRef[someKey] = {};
+        }
+        if (index === splitKeys.length - 1) {
+            prevRef[someKey] = typeof val === 'string' ? val : true;
+        }
+        prevRef = prevRef[someKey];
+    }
+}
+/**
+ * Where a dev server listens, or null when it picks its port or listens on a
+ * socket. Returns null for those, since nothing can be probed ahead of them.
+ */
+function getDevServerAddress(devServer, flags, basePort) {
+    if (devServer?.ipc)
+        return null;
+    const port = flags.port ?? devServer?.port ?? basePort ?? 8080;
+    if (port === 'auto' || String(port) === '0')
+        return null;
+    const number = Number(port);
+    if (!Number.isInteger(number) || number <= 0)
+        return null;
+    const configured = flags.host ?? devServer?.host;
+    const host = typeof configured === 'string' ? (0, internal_1.resolveStartupHost)(configured) : undefined;
+    return host && !LOOPBACK_HOSTS.has(host)
+        ? { port: number, host }
+        : { port: number };
+}
+// The probe reaches these on loopback. `local-ip` and friends resolve to an
+// interface address first, the way the dev server resolves them.
+const LOOPBACK_HOSTS = new Set(['localhost', '0.0.0.0', '::']);
+/** Resolves once every address accepts a TCP connection. */
+async function waitForAddresses(addresses) {
+    await Promise.all(addresses.map(waitForAddress));
+}
+async function waitForAddress({ port, host }) {
+    const hosts = host ? [host] : ['127.0.0.1', '::1'];
+    while (!(await Promise.any(hosts.map((h) => connects(port, h))).catch(() => false))) {
+        await new Promise((r) => setTimeout(r, 250));
+    }
+}
+function connects(port, host) {
+    return new Promise((resolve, reject) => {
+        const socket = (0, net_1.createConnection)({ port, host });
+        socket.once('connect', () => {
+            socket.destroy();
+            resolve(true);
+        });
+        socket.once('error', (e) => {
+            socket.destroy();
+            reject(e);
+        });
+    });
+}
+function readTaskOptions() {
+    try {
+        return JSON.parse(process.env.NX_TASK_OPTIONS ?? '{}');
+    }
+    catch {
+        return {};
+    }
+}
+// The serve command runs from the target's cwd, so its config does too
+function enterTaskCwd(options) {
+    if (options.cwd)
+        process.chdir((0, path_1.resolve)(options.cwd));
+}
+async function loadConfigExport(path) {
+    if (/\.(ts|mts|cts)$/.test(path)) {
+        const { getRootTsConfigPath } = require('@nx/js');
+        const { resolveUserDefinedWebpackConfig } = require('./webpack/resolve-user-defined-webpack-config');
+        return resolveUserDefinedWebpackConfig(path, getRootTsConfigPath());
+    }
+    const config = await (0, internal_1.loadConfigFile)(path);
+    // webpack-cli also unwraps a default export's own `default`
+    return config && typeof config === 'object' && 'default' in config
+        ? config.default
+        : config;
+}
+// webpack-cli merges with its own webpack-merge, and runs from the task's cwd
+function loadWebpackMerge() {
+    const cliRequire = (0, module_1.createRequire)(require.resolve('webpack-cli', { paths: [process.cwd()] }));
+    return cliRequire('webpack-merge').merge;
+}
+/**
+ * The readyWhen of the inferred serve targets when the config doesn't load the
+ * signal plugin. Runs in the env and with the options of the serve task, reads
+ * the config the way `webpack-cli serve` does, and waits for each dev server it
+ * starts.
+ */
+async function waitForWebpackDevServer(configPath) {
+    const options = readTaskOptions();
+    const flags = parseServeFlags(options);
+    // The config's file name, in the cwd of the serve task
+    const absoluteConfigPath = (0, path_1.resolve)(options.cwd ?? '.', configPath);
+    enterTaskCwd(options);
+    // Skips NxAppWebpackPlugin's option normalization, which nothing here uses
+    global.NX_GRAPH_CREATION = true;
+    const { readWebpackOptions } = require('./webpack/read-webpack-options');
+    const env = { WEBPACK_SERVE: true, ...flags.env };
+    const argv = parseServeArgv(options, env);
+    const load = async (path) => readWebpackOptions(await loadConfigExport((0, path_1.resolve)(path)), env, argv);
+    let configs = (await Promise.all((flags.configs.length > 0 ? flags.configs : [absoluteConfigPath]).map(load)))
+        .flat()
+        .filter((config) => flags.configNames.length === 0 ||
+        flags.configNames.includes(config.name));
+    let webpackMerge;
+    const merge = (...configs) => (webpackMerge ??= loadWebpackMerge())(...configs);
+    const resolveExtends = async (config, extendsPaths, seen) => {
+        delete config.extends;
+        const paths = extendsPaths.map((path) => (0, path_1.resolve)(path));
+        if (paths.some((path) => seen.includes(path))) {
+            throw new Error('Recursive configuration detected.');
+        }
+        const extended = (await Promise.all(paths.map(load))).flat();
+        if (extended.length > 0)
+            config = merge(...extended, config);
+        return config.extends
+            ? resolveExtends(config, [config.extends].flat(), [...seen, ...paths])
+            : config;
+    };
+    configs = await Promise.all(configs.map((config) => flags.extends.length > 0
+        ? resolveExtends(config, flags.extends, [])
+        : config.extends
+            ? resolveExtends(config, [config.extends].flat(), [])
+            : config));
+    if (flags.merge) {
+        if (configs.length < 2) {
+            throw new Error('At least two configurations are required for merge.');
+        }
+        configs = [configs.reduce((merged, config) => merge(merged, config), {})];
+    }
+    // webpack-cli starts a dev server for every config with devServer, or for
+    // the first config when none has one
+    const withDevServer = configs.filter((config) => config.devServer);
+    const servers = withDevServer.length > 0 ? withDevServer : configs.slice(0, 1);
+    const addresses = servers
+        .filter((config) => config.devServer !== false)
+        .map((config) => getDevServerAddress(config.devServer, flags, process.env.WEBPACK_DEV_SERVER_BASE_PORT));
+    if (addresses.some((address) => address === null))
+        return;
+    await waitForAddresses(addresses);
+}

package/dist/src/utils/dev-server-ready-signal.d.ts

@@ -0,0 +1,29 @@
+import type { AddressInfo } from 'net';
+import type { Compiler } from 'webpack';
+export declare const READY_SIGNAL_PLUGIN: unique symbol;
+/** Whether the dev server of this config will report its readiness. */
+export declare function sendsReadySignal(config: {
+    devServer?: unknown;
+    plugins?: unknown[];
+}): boolean;
+/**
+ * Reports the dev server's address to an Nx task whose readyWhen is `signal`.
+ * `webpack-cli serve` reads `devServer` from the compiler after plugins apply,
+ * so wrapping `onListening` here reaches the server it starts.
+ */
+export declare function applyDevServerReadySignal(compiler: Compiler): void;
+/** Reports the dev server's address to an Nx task whose readyWhen is `signal`. */
+export declare class NxReadySignalPlugin {
+    readonly [READY_SIGNAL_PLUGIN] = true;
+    apply(compiler: Compiler): void;
+}
+export declare function getDevServerUrl(server: {
+    server?: {
+        address(): AddressInfo | string | null;
+    };
+    options?: {
+        server?: string | {
+            type?: string;
+        };
+    };
+}): string | undefined;

package/dist/src/utils/dev-server-ready-signal.js

@@ -0,0 +1,60 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NxReadySignalPlugin = exports.READY_SIGNAL_PLUGIN = void 0;
+exports.sendsReadySignal = sendsReadySignal;
+exports.applyDevServerReadySignal = applyDevServerReadySignal;
+exports.getDevServerUrl = getDevServerUrl;
+// Set on the plugins that report readiness, so inference can find them in a
+// config it has loaded
+exports.READY_SIGNAL_PLUGIN = Symbol.for('@nx/ready-signal-plugin');
+/** Whether the dev server of this config will report its readiness. */
+function sendsReadySignal(config) {
+    return (typeof config.devServer === 'object' &&
+        !!config.devServer &&
+        !!config.plugins?.some((plugin) => plugin?.[exports.READY_SIGNAL_PLUGIN]));
+}
+/**
+ * Reports the dev server's address to an Nx task whose readyWhen is `signal`.
+ * `webpack-cli serve` reads `devServer` from the compiler after plugins apply,
+ * so wrapping `onListening` here reaches the server it starts.
+ */
+function applyDevServerReadySignal(compiler) {
+    const devServer = compiler.options.devServer;
+    if (!devServer || !process.env.NX_READY_SIGNAL_SOCKET) {
+        return;
+    }
+    const { signalTaskReady } = require('@nx/devkit');
+    const onListening = devServer.onListening;
+    devServer.onListening = (server) => {
+        onListening?.(server);
+        signalTaskReady({ url: getDevServerUrl(server) });
+    };
+}
+/** Reports the dev server's address to an Nx task whose readyWhen is `signal`. */
+class NxReadySignalPlugin {
+    constructor() {
+        this[_a] = true;
+    }
+    apply(compiler) {
+        applyDevServerReadySignal(compiler);
+    }
+}
+exports.NxReadySignalPlugin = NxReadySignalPlugin;
+_a = exports.READY_SIGNAL_PLUGIN;
+function getDevServerUrl(server) {
+    const address = server.server?.address();
+    if (!address || typeof address === 'string') {
+        return undefined;
+    }
+    const type = typeof server.options?.server === 'string'
+        ? server.options.server
+        : server.options?.server?.type;
+    const protocol = type && type !== 'http' ? 'https' : 'http';
+    const host = address.address === '::' || address.address === '0.0.0.0'
+        ? 'localhost'
+        : address.family === 'IPv6'
+            ? `[${address.address}]`
+            : address.address;
+    return `${protocol}://${host}:${address.port}/`;
+}

package/dist/src/utils/webpack/read-webpack-options.d.ts

@@ -8,4 +8,4 @@ import type { Configuration } from 'webpack';
  *
  * @param webpackConfig
  */
-export declare function readWebpackOptions(webpackConfig: unknown): Promise<Configuration[]>;
+export declare function readWebpackOptions(webpackConfig: unknown, env?: Record<string, unknown>, argv?: Record<string, unknown>): Promise<Configuration[]>;

package/dist/src/utils/webpack/read-webpack-options.js

@@ -13,7 +13,9 @@ const internal_1 = require("@nx/devkit/internal");
  *
  * @param webpackConfig
  */
-async function readWebpackOptions(webpackConfig) {
+async function readWebpackOptions(webpackConfig, 
+// A function config gets the production build's env unless told otherwise
+env = { production: true }, argv = {}) {
     const configs = [];
     const resolveConfig = async (config) => {
         if ((0, config_1.isNxWebpackComposablePlugin)(config)) {
@@ -39,9 +41,7 @@ async function readWebpackOptions(webpackConfig) {
             });
         }
         else if (typeof config === 'function') {
-            const resolved = await config({
-                production: true, // we want the production build options
-            }, {});
+            const resolved = await config(env, argv);
             // If the resolved configuration is an array, resolve each configuration
             return Array.isArray(resolved)
                 ? (await Promise.all(resolved.map(resolveConfig))).flat()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/webpack",
-  "version": "24.0.0-beta.3",
+  "version": "24.0.0-beta.4",
   "private": false,
   "type": "commonjs",
   "files": [
@@ -38,6 +38,12 @@
       ],
       "internal": [
         "dist/internal.d.ts"
+      ],
+      "ready-check": [
+        "dist/ready-check.d.ts"
+      ],
+      "ready-signal": [
+        "dist/ready-signal.d.ts"
       ]
     }
   },
@@ -74,6 +80,16 @@
       "types": "./dist/plugin.d.ts",
       "default": "./dist/plugin.js"
     },
+    "./ready-check": {
+      "@nx/nx-source": "./ready-check.ts",
+      "types": "./dist/ready-check.d.ts",
+      "default": "./dist/ready-check.js"
+    },
+    "./ready-signal": {
+      "@nx/nx-source": "./ready-signal.ts",
+      "types": "./dist/ready-signal.d.ts",
+      "default": "./dist/ready-signal.js"
+    },
     "./tsconfig-paths-plugin": {
       "@nx/nx-source": "./tsconfig-paths-plugin.ts",
       "types": "./dist/tsconfig-paths-plugin.d.ts",
@@ -118,8 +134,8 @@
     "tslib": "^2.3.0",
     "webpack-node-externals": "^3.0.0",
     "webpack-subresource-integrity": "^5.1.0",
-    "@nx/devkit": "24.0.0-beta.3",
-    "@nx/js": "24.0.0-beta.3"
+    "@nx/devkit": "24.0.0-beta.4",
+    "@nx/js": "24.0.0-beta.4"
   },
   "peerDependencies": {
     "webpack": "^5.0.0",
@@ -138,7 +154,7 @@
     }
   },
   "devDependencies": {
-    "nx": "24.0.0-beta.3"
+    "nx": "24.0.0-beta.4"
   },
   "publishConfig": {
     "access": "public"