@nx/webpack 0.0.0-pr-22179-271588f → 0.0.0-pr-26482-ebe2dba

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2023 Narwhal Technologies Inc.
+Copyright (c) 2017-2024 Narwhal Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -24,7 +24,7 @@
 
 Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.
 
-This package is a [Webpack plugin for Nx](https://nx.dev/packages/webpack).
+This package is a [Webpack plugin for Nx](https://nx.dev/nx-api/webpack).
 
 ## Getting Started
 

package/app-plugin.d.ts

@@ -0,0 +1,2 @@
+export { NxAppWebpackPlugin } from './src/plugins/nx-webpack-plugin/nx-app-webpack-plugin';
+export type { NxAppWebpackPluginOptions } from './src/plugins/nx-webpack-plugin/nx-app-webpack-plugin-options';

package/app-plugin.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NxAppWebpackPlugin = void 0;
+var nx_app_webpack_plugin_1 = require("./src/plugins/nx-webpack-plugin/nx-app-webpack-plugin");
+Object.defineProperty(exports, "NxAppWebpackPlugin", { enumerable: true, get: function () { return nx_app_webpack_plugin_1.NxAppWebpackPlugin; } });

package/index.d.ts

@@ -1,7 +1,13 @@
 import { configurationGenerator } from './src/generators/configuration/configuration';
+import { NxAppWebpackPlugin } from './src/plugins/nx-webpack-plugin/nx-app-webpack-plugin';
+import { NxTsconfigPathsWebpackPlugin as _NxTsconfigPathsWebpackPlugin } from './src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin';
 export { configurationGenerator };
 /** @deprecated Use `configurationGenerator` instead. */
 export declare const webpackProjectGenerator: typeof configurationGenerator;
+/** @deprecated Use NxAppWebpackPlugin from `@nx/webpack/app-plugin` instead. */
+export declare const NxWebpackPlugin: typeof NxAppWebpackPlugin;
+/** @deprecated Use NxTsconfigPathsWebpackPlugin from `@nx/webpack/tsconfig-paths-plugin` instead. */
+export declare const NxTsconfigPathsWebpackPlugin: typeof _NxTsconfigPathsWebpackPlugin;
 export * from './src/utils/create-copy-plugin';
 export * from './src/utils/config';
 export { webpackInitGenerator } from './src/generators/init/init';
@@ -14,5 +20,3 @@ export * from './src/utils/get-css-module-local-ident';
 export * from './src/utils/with-nx';
 export * from './src/utils/with-web';
 export * from './src/utils/module-federation/public-api';
-export { NxWebpackPlugin } from './src/plugins/nx-webpack-plugin/nx-webpack-plugin';
-export { NxTsconfigPathsWebpackPlugin } from './src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin';

package/index.js

@@ -1,12 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NxTsconfigPathsWebpackPlugin = exports.NxWebpackPlugin = exports.webpackInitGenerator = exports.webpackProjectGenerator = exports.configurationGenerator = void 0;
+exports.webpackInitGenerator = exports.NxTsconfigPathsWebpackPlugin = exports.NxWebpackPlugin = exports.webpackProjectGenerator = exports.configurationGenerator = void 0;
 const tslib_1 = require("tslib");
 const configuration_1 = require("./src/generators/configuration/configuration");
 Object.defineProperty(exports, "configurationGenerator", { enumerable: true, get: function () { return configuration_1.configurationGenerator; } });
+const nx_app_webpack_plugin_1 = require("./src/plugins/nx-webpack-plugin/nx-app-webpack-plugin");
+const nx_tsconfig_paths_webpack_plugin_1 = require("./src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin");
 // Exported for backwards compatibility in case a plugin is using the old name.
 /** @deprecated Use `configurationGenerator` instead. */
 exports.webpackProjectGenerator = configuration_1.configurationGenerator;
+// TODO(v20): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
+/** @deprecated Use NxAppWebpackPlugin from `@nx/webpack/app-plugin` instead. */
+exports.NxWebpackPlugin = nx_app_webpack_plugin_1.NxAppWebpackPlugin;
+/** @deprecated Use NxTsconfigPathsWebpackPlugin from `@nx/webpack/tsconfig-paths-plugin` instead. */
+exports.NxTsconfigPathsWebpackPlugin = nx_tsconfig_paths_webpack_plugin_1.NxTsconfigPathsWebpackPlugin;
 tslib_1.__exportStar(require("./src/utils/create-copy-plugin"), exports);
 tslib_1.__exportStar(require("./src/utils/config"), exports);
 var init_1 = require("./src/generators/init/init");
@@ -18,7 +25,3 @@ tslib_1.__exportStar(require("./src/utils/get-css-module-local-ident"), exports)
 tslib_1.__exportStar(require("./src/utils/with-nx"), exports);
 tslib_1.__exportStar(require("./src/utils/with-web"), exports);
 tslib_1.__exportStar(require("./src/utils/module-federation/public-api"), exports);
-var nx_webpack_plugin_1 = require("./src/plugins/nx-webpack-plugin/nx-webpack-plugin");
-Object.defineProperty(exports, "NxWebpackPlugin", { enumerable: true, get: function () { return nx_webpack_plugin_1.NxWebpackPlugin; } });
-var nx_tsconfig_paths_webpack_plugin_1 = require("./src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin");
-Object.defineProperty(exports, "NxTsconfigPathsWebpackPlugin", { enumerable: true, get: function () { return nx_tsconfig_paths_webpack_plugin_1.NxTsconfigPathsWebpackPlugin; } });

package/migrations.json

@@ -1,29 +1,5 @@
 {
   "generators": {
-    "add-babel-inputs": {
-      "cli": "nx",
-      "version": "15.0.0-beta.0",
-      "description": "Adds babel.config.json to the hash of all tasks",
-      "factory": "./src/migrations/update-15-0-0/add-babel-inputs"
-    },
-    "remove-es2015-polyfills-option": {
-      "cli": "nx",
-      "version": "15.4.5-beta.0",
-      "description": "Removes es2015Polyfills option since legacy browsers are no longer supported.",
-      "factory": "./src/migrations/update-15-4-5/remove-es2015-polyfills-option"
-    },
-    "webpack-config-setup": {
-      "cli": "nx",
-      "version": "15.6.3-beta.0",
-      "description": "Creates or updates webpack.config.js file with the new options for webpack.",
-      "factory": "./src/migrations/update-15-6-3/webpack-config-setup"
-    },
-    "add-babelUpwardRootMode-flag": {
-      "cli": "nx",
-      "version": "15.7.2-beta.0",
-      "description": "Add the babelUpwardRootMode option to the build executor options.",
-      "factory": "./src/migrations/update-15-7-2/add-babelUpwardRootMode-flag"
-    },
     "update-16-0-0-add-nx-packages": {
       "cli": "nx",
       "version": "16.0.0-beta.1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/webpack",
-  "version": "0.0.0-pr-22179-271588f",
+  "version": "0.0.0-pr-26482-ebe2dba",
   "private": false,
   "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
   "repository": {
@@ -12,9 +12,10 @@
     "Monorepo",
     "Webpack",
     "Web",
-    "CLI"
+    "CLI",
+    "Front-end"
   ],
-  "main": "./index.js",
+  "main": "./index",
   "typings": "./index.d.ts",
   "author": "Victor Savkin",
   "license": "MIT",
@@ -45,13 +46,13 @@
     "loader-utils": "^2.0.3",
     "mini-css-extract-plugin": "~2.4.7",
     "parse5": "4.0.0",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.38",
     "postcss-import": "~14.1.0",
     "postcss-loader": "^6.1.1",
     "rxjs": "^7.8.0",
     "sass": "^1.42.1",
     "sass-loader": "^12.2.0",
-    "source-map-loader": "^3.0.0",
+    "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.0",
     "stylus": "^0.59.0",
     "stylus-loader": "^7.1.0",
@@ -63,9 +64,9 @@
     "webpack-dev-server": "^4.9.3",
     "webpack-node-externals": "^3.0.0",
     "webpack-subresource-integrity": "^5.1.0",
-    "@nx/devkit": "0.0.0-pr-22179-271588f",
-    "@nx/js": "0.0.0-pr-22179-271588f",
-    "@nrwl/webpack": "0.0.0-pr-22179-271588f"
+    "@nx/devkit": "0.0.0-pr-26482-ebe2dba",
+    "@nx/js": "0.0.0-pr-26482-ebe2dba",
+    "@nrwl/webpack": "0.0.0-pr-26482-ebe2dba"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/dev-server/dev-server.impl.js

@@ -48,6 +48,11 @@ async function* devServerExecutor(serveOptions, context) {
                 configuration: serveOptions.buildTarget.split(':')[2],
             });
         }
+        else if (userDefinedWebpackConfig) {
+            // New behavior, we want the webpack config to export object
+            config = userDefinedWebpackConfig;
+            config.devServer ??= devServer;
+        }
     }
     return yield* (0, rxjs_for_await_1.eachValueFrom)((0, run_webpack_1.runWebpackDevServer)(config, webpack, WebpackDevServer).pipe((0, operators_1.tap)(({ stats }) => {
         console.info(stats.toString(config.stats));

package/src/executors/webpack/lib/normalize-options.js

@@ -21,7 +21,8 @@ function normalizeOptions(options, root, projectRoot, sourceRoot) {
             : options.optimization,
     };
     if (options.assets) {
-        normalizedOptions.assets = (0, normalize_options_1.normalizeAssets)(options.assets, root, sourceRoot, projectRoot);
+        normalizedOptions.assets = (0, normalize_options_1.normalizeAssets)(options.assets, root, sourceRoot, projectRoot, false // executor assets are relative to workspace root for consistency
+        );
     }
     return normalizedOptions;
 }

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

@@ -47,7 +47,7 @@ export interface WebpackExecutorOptions {
   extractLicenses?: boolean;
   fileReplacements?: FileReplacement[];
   generatePackageJson?: boolean;
-  // TODO(v19): Remove this option
+  // TODO(v20): Remove this option
   /** @deprecated set webpackConfig and provide an explicit webpack.config.js file (See: https://nx.dev/recipes/webpack/webpack-config-setup) */
   isolatedConfig?: boolean;
   standardWebpackConfigFunction?: boolean;
@@ -84,6 +84,8 @@ export interface WebpackExecutorOptions {
   stylePreprocessorOptions?: any;
   styles?: Array<ExtraEntryPointClass | string>;
   subresourceIntegrity?: boolean;
+  publicPath?: string;
+  rebaseRootRelative?: boolean;
 }
 
 export interface NormalizedWebpackExecutorOptions

package/src/executors/webpack/schema.json

@@ -235,7 +235,7 @@
       "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": 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 19. See https://nx.dev/recipes/webpack/webpack-config-setup."
+      "x-deprecated": "Automatic configuration of Webpack is deprecated in favor of an explicit 'webpack.config.js' file. This option will be removed in Nx 20. See https://nx.dev/recipes/webpack/webpack-config-setup."
     },
     "standardWebpackConfigFunction": {
       "type": "boolean",
@@ -299,6 +299,14 @@
       "type": "string",
       "description": "Path to the babel configuration file of your project. If not provided, Nx will default to the .babelrc file at the root of your project. See https://babeljs.io/docs/en/config-files",
       "x-completion-type": "file"
+    },
+    "publicPath": {
+      "type": "string",
+      "description": "Set a public path for assets resources with absolute paths."
+    },
+    "rebaseRootRelative": {
+      "type": "boolean",
+      "description": "Whether to rebase absolute path for assets in postcss cli resources."
     }
   },
   "required": [],

package/src/executors/webpack/webpack.impl.js

@@ -6,7 +6,6 @@ const rxjs_for_await_1 = require("@nx/devkit/src/utils/rxjs-for-await");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const path_1 = require("path");
-const buildable_libs_utils_1 = require("@nx/js/src/utils/buildable-libs-utils");
 const run_webpack_1 = require("./lib/run-webpack");
 const fs_1 = require("../../utils/fs");
 const resolve_user_defined_webpack_config_1 = require("../../utils/webpack/resolve-user-defined-webpack-config");
@@ -83,18 +82,13 @@ async function* webpackExecutor(_options, context) {
             };
         }
     }
-    if (!options.buildLibsFromSource && context.targetName) {
-        const { dependencies } = (0, buildable_libs_utils_1.calculateProjectBuildableDependencies)(context.taskGraph, context.projectGraph, context.root, context.projectName, context.targetName, context.configurationName);
-        options.tsConfig = (0, buildable_libs_utils_1.createTmpTsConfig)(options.tsConfig, context.root, metadata.root, dependencies);
-        process.env.NX_TSCONFIG_PATH = options.tsConfig;
-    }
     // Delete output path before bundling
     if (options.deleteOutputPath && options.outputPath) {
         (0, fs_1.deleteOutputDir)(context.root, options.outputPath);
     }
     if (options.generatePackageJson && metadata.projectType !== 'application') {
         devkit_1.logger.warn((0, devkit_1.stripIndents) `The project ${context.projectName} is using the 'generatePackageJson' option which is deprecated for library projects. It should only be used for applications.
-        For libraries, configure the project to use the '@nx/dependency-checks' ESLint rule instead (https://nx.dev/packages/eslint-plugin/documents/dependency-checks).`);
+        For libraries, configure the project to use the '@nx/dependency-checks' ESLint rule instead (https://nx.dev/nx-api/eslint-plugin/documents/dependency-checks).`);
     }
     const configs = await getWebpackConfigs(options, context);
     return yield* (0, rxjs_for_await_1.eachValueFrom)((0, rxjs_1.of)(configs).pipe((0, operators_1.mergeMap)((config) => (Array.isArray(config) ? (0, rxjs_1.from)(config) : (0, rxjs_1.of)(config))), 

package/src/generators/configuration/configuration.js

@@ -63,7 +63,7 @@ function createWebpackConfig(tree, options) {
     if (options.target === 'web') {
         tree.write((0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'), (0, has_plugin_1.hasPlugin)(tree)
             ? `
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -71,7 +71,7 @@ module.exports = {
     path: join(__dirname, '${(0, devkit_1.offsetFromRoot)(project.root)}${buildOptions.outputPath}'),
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       target: '${buildOptions.target}',
       tsConfig: '${buildOptions.tsConfig}',
       compiler: '${buildOptions.compiler}',
@@ -95,7 +95,7 @@ module.exports = composePlugins(withNx(), withWeb(), (config) => {
     else {
         tree.write((0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'), (0, has_plugin_1.hasPlugin)(tree)
             ? `
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -103,7 +103,7 @@ module.exports = {
     path: join(__dirname, '${(0, devkit_1.offsetFromRoot)(project.root)}${buildOptions.outputPath}'),
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       target: '${buildOptions.target}',
       tsConfig: '${buildOptions.tsConfig}',
       compiler: '${buildOptions.compiler}',

package/src/generators/init/init.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpackInitGeneratorInternal = exports.webpackInitGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const update_package_scripts_1 = require("@nx/devkit/src/utils/update-package-scripts");
+const add_plugin_1 = require("@nx/devkit/src/utils/add-plugin");
 const plugin_1 = require("../../plugins/plugin");
 const versions_1 = require("../../utils/versions");
 function webpackInitGenerator(tree, schema) {
@@ -15,7 +15,29 @@ async function webpackInitGeneratorInternal(tree, schema) {
         nxJson.useInferencePlugins !== false;
     schema.addPlugin ??= addPluginDefault;
     if (schema.addPlugin) {
-        addPlugin(tree);
+        await (0, add_plugin_1.addPluginV1)(tree, await (0, devkit_1.createProjectGraphAsync)(), '@nx/webpack/plugin', plugin_1.createNodes, {
+            buildTargetName: [
+                'build',
+                'webpack:build',
+                'build:webpack',
+                'webpack-build',
+                'build-webpack',
+            ],
+            serveTargetName: [
+                'serve',
+                'webpack:serve',
+                'serve:webpack',
+                'webpack-serve',
+                'serve-webpack',
+            ],
+            previewTargetName: [
+                'preview',
+                'webpack:preview',
+                'preview:webpack',
+                'webpack-preview',
+                'preview-webpack',
+            ],
+        }, schema.updatePackageScripts);
     }
     let installTask = () => { };
     if (!schema.skipPackageJson) {
@@ -28,33 +50,10 @@ async function webpackInitGeneratorInternal(tree, schema) {
         }
         installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDependencies, undefined, schema.keepExistingVersions);
     }
-    if (schema.updatePackageScripts) {
-        await (0, update_package_scripts_1.updatePackageScripts)(tree, plugin_1.createNodes);
-    }
     if (!schema.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
     return installTask;
 }
 exports.webpackInitGeneratorInternal = webpackInitGeneratorInternal;
-function addPlugin(tree) {
-    const nxJson = (0, devkit_1.readNxJson)(tree);
-    nxJson.plugins ??= [];
-    for (const plugin of nxJson.plugins) {
-        if (typeof plugin === 'string'
-            ? plugin === '@nx/webpack/plugin'
-            : plugin.plugin === '@nx/webpack/plugin') {
-            return;
-        }
-    }
-    nxJson.plugins.push({
-        plugin: '@nx/webpack/plugin',
-        options: {
-            buildTargetName: 'build',
-            serveTargetName: 'serve',
-            previewTargetName: 'preview',
-        },
-    });
-    (0, devkit_1.updateNxJson)(tree, nxJson);
-}
 exports.default = webpackInitGenerator;

package/src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin.d.ts

@@ -1,8 +1,8 @@
-import { Compiler } from 'webpack';
+import { Compiler, type Configuration, type WebpackOptionsNormalized } from 'webpack';
+import { NormalizedNxAppWebpackPluginOptions } from '../nx-webpack-plugin/nx-app-webpack-plugin-options';
 export declare class NxTsconfigPathsWebpackPlugin {
     private options;
-    constructor(options: {
-        tsConfig: string;
-    });
+    constructor(options: NormalizedNxAppWebpackPluginOptions);
     apply(compiler: Compiler): void;
+    handleBuildLibsFromSource(config: Partial<WebpackOptionsNormalized | Configuration>, options: any): void;
 }

package/src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin.js

@@ -4,6 +4,8 @@ exports.NxTsconfigPathsWebpackPlugin = void 0;
 const path = require("path");
 const tsconfig_paths_webpack_plugin_1 = require("tsconfig-paths-webpack-plugin");
 const devkit_1 = require("@nx/devkit");
+const buildable_libs_utils_1 = require("@nx/js/src/utils/buildable-libs-utils");
+const webpack_nx_build_coordination_plugin_1 = require("../webpack-nx-build-coordination-plugin");
 class NxTsconfigPathsWebpackPlugin {
     constructor(options) {
         this.options = options;
@@ -11,6 +13,8 @@ class NxTsconfigPathsWebpackPlugin {
             throw new Error(`Missing "tsConfig" option. Set this option in your Nx webpack plugin.`);
     }
     apply(compiler) {
+        // If we are not building libs from source, we need to remap paths so tsconfig may be updated.
+        this.handleBuildLibsFromSource(compiler.options, this.options);
         const extensions = new Set([
             ...['.ts', '.tsx', '.mjs', '.js', '.jsx'],
             ...(compiler.options?.resolve?.extensions ?? []),
@@ -27,5 +31,20 @@ class NxTsconfigPathsWebpackPlugin {
             mainFields: ['module', 'main'],
         }));
     }
+    handleBuildLibsFromSource(config, options) {
+        if (!options.buildLibsFromSource && options.targetName) {
+            const remappedTarget = options.targetName === 'serve' ? 'build' : options.targetName;
+            const { target, dependencies } = (0, buildable_libs_utils_1.calculateProjectBuildableDependencies)(undefined, options.projectGraph, options.root, options.projectName, remappedTarget, options.configurationName);
+            options.tsConfig = (0, buildable_libs_utils_1.createTmpTsConfig)(options.tsConfig, options.root, target.data.root, dependencies);
+            if (options.targetName === 'serve') {
+                const buildableDependencies = dependencies
+                    .filter((dependency) => dependency.node.type === 'lib')
+                    .map((dependency) => dependency.node.name)
+                    .join(',');
+                const buildCommand = `nx run-many --target=build --projects=${buildableDependencies}`;
+                config.plugins.push(new webpack_nx_build_coordination_plugin_1.WebpackNxBuildCoordinationPlugin(buildCommand));
+            }
+        }
+    }
 }
 exports.NxTsconfigPathsWebpackPlugin = NxTsconfigPathsWebpackPlugin;

package/src/plugins/nx-webpack-plugin/lib/apply-base-config.d.ts

@@ -1,5 +1,5 @@
 import { Configuration, WebpackOptionsNormalized } from 'webpack';
-import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
-export declare function applyBaseConfig(options: NormalizedNxWebpackPluginOptions, config?: Partial<WebpackOptionsNormalized | Configuration>, { useNormalizedEntry, }?: {
+import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
+export declare function applyBaseConfig(options: NormalizedNxAppWebpackPluginOptions, config?: Partial<WebpackOptionsNormalized | Configuration>, { useNormalizedEntry, }?: {
     useNormalizedEntry?: boolean;
 }): void;

package/src/plugins/nx-webpack-plugin/lib/apply-base-config.js

@@ -68,27 +68,22 @@ function applyNxIndependentConfig(options, config) {
                 : false;
     config.output = {
         ...config.output,
-        libraryTarget: (config.output?.libraryTarget ??
-            options.target === 'node')
-            ? 'commonjs'
-            : undefined,
+        libraryTarget: config.output?.libraryTarget ??
+            (options.target === 'node' ? 'commonjs' : undefined),
         path: config.output?.path ??
             (options.outputPath
                 ? path.join(options.root, options.outputPath)
                 : undefined),
-        filename: config.output?.filename ?? options.outputHashing
-            ? `[name]${hashFormat.script}.js`
-            : '[name].js',
-        chunkFilename: config.output?.chunkFilename ?? options.outputHashing
-            ? `[name]${hashFormat.chunk}.js`
-            : '[name].js',
+        filename: config.output?.filename ??
+            (options.outputHashing ? `[name]${hashFormat.script}.js` : '[name].js'),
+        chunkFilename: config.output?.chunkFilename ??
+            (options.outputHashing ? `[name]${hashFormat.chunk}.js` : '[name].js'),
         hashFunction: config.output?.hashFunction ?? 'xxhash64',
         // Disabled for performance
         pathinfo: config.output?.pathinfo ?? false,
         // Use CJS for Node since it has the widest support.
-        scriptType: config.output?.scriptType ?? options.target === 'node'
-            ? undefined
-            : 'module',
+        scriptType: config.output?.scriptType ??
+            (options.target === 'node' ? undefined : 'module'),
     };
     config.watch = options.watch;
     config.watchOptions = {
@@ -157,12 +152,23 @@ function applyNxIndependentConfig(options, config) {
         moduleTrace: !!options.verbose,
         usedExports: !!options.verbose,
     };
+    /**
+     * Initialize properties that get set when webpack is used during task execution.
+     * These properties may be used by consumers who expect them to not be undefined.
+     *
+     * When @nx/webpack/plugin resolves the config, it is not during a task, and therefore
+     * these values are not set, which can lead to errors being thrown when reading
+     * the webpack options from the resolved file.
+     */
+    config.entry ??= {};
+    config.resolve ??= {};
+    config.module ??= {};
+    config.plugins ??= [];
+    config.externals ??= [];
 }
 function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
     const tsConfig = options.tsConfig ?? (0, js_1.getRootTsConfigPath)();
-    const plugins = [
-        new nx_tsconfig_paths_webpack_plugin_1.NxTsconfigPathsWebpackPlugin({ tsConfig }),
-    ];
+    const plugins = [];
     const executorContext = {
         projectName: options.projectName,
         targetName: options.targetName,
@@ -170,6 +176,7 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
         configurationName: options.configurationName,
         root: options.root,
     };
+    plugins.push(new nx_tsconfig_paths_webpack_plugin_1.NxTsconfigPathsWebpackPlugin({ ...options, tsConfig }));
     if (!options?.skipTypeChecking) {
         const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
         plugins.push(new ForkTsCheckerWebpackPlugin({

package/src/plugins/nx-webpack-plugin/lib/apply-web-config.d.ts

@@ -1,5 +1,5 @@
 import { Configuration, WebpackOptionsNormalized } from 'webpack';
-import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
-export declare function applyWebConfig(options: NormalizedNxWebpackPluginOptions, config?: Partial<WebpackOptionsNormalized | Configuration>, { useNormalizedEntry, }?: {
+import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
+export declare function applyWebConfig(options: NormalizedNxAppWebpackPluginOptions, config?: Partial<WebpackOptionsNormalized | Configuration>, { useNormalizedEntry, }?: {
     useNormalizedEntry?: boolean;
 }): void;

package/src/plugins/nx-webpack-plugin/lib/apply-web-config.js

@@ -126,7 +126,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
             use: [
                 ...(0, stylesheet_loaders_1.getCommonLoadersForCssModules)(options, includePaths),
                 {
-                    loader: path.join(__dirname, 'webpack/deprecated-stylus-loader.js'),
+                    loader: path.join(__dirname, '../../../utils/webpack/deprecated-stylus-loader.js'),
                     options: {
                         stylusOptions: {
                             include: includePaths,
@@ -185,7 +185,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
             use: [
                 ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalCss)(options, includePaths),
                 {
-                    loader: path.join(__dirname, 'webpack/deprecated-stylus-loader.js'),
+                    loader: path.join(__dirname, '../../../utils/webpack/deprecated-stylus-loader.js'),
                     options: {
                         sourceMap: !!options.sourceMap,
                         stylusOptions: {
@@ -245,7 +245,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
             use: [
                 ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalStyle)(options, includePaths),
                 {
-                    loader: require.resolve('stylus-loader'),
+                    loader: path.join(__dirname, '../../../utils/webpack/deprecated-stylus-loader.js'),
                     options: {
                         sourceMap: !!options.sourceMap,
                         stylusOptions: {
@@ -335,7 +335,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 type: 'asset',
                 parser: {
                     dataUrlCondition: {
-                        maxSize: 10000, // 10 kB
+                        maxSize: 10_000, // 10 kB
                     },
                 },
                 generator: {
@@ -348,7 +348,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 type: 'asset',
                 parser: {
                     dataUrlCondition: {
-                        maxSize: 10000, // 10 kB
+                        maxSize: 10_000, // 10 kB
                     },
                 },
                 generator: {

package/src/plugins/nx-webpack-plugin/lib/compiler-loaders.d.ts

@@ -1,5 +1,5 @@
-import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
-export declare function createLoaderFromCompiler(options: NormalizedNxWebpackPluginOptions): {
+import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
+export declare function createLoaderFromCompiler(options: NormalizedNxAppWebpackPluginOptions): {
     test: RegExp;
     loader: string;
     exclude: RegExp;

package/src/plugins/nx-webpack-plugin/lib/compiler-loaders.js

@@ -46,14 +46,18 @@ function createLoaderFromCompiler(options) {
                 },
             };
         case 'babel':
-            const tsConfig = (0, js_1.readTsConfig)(path.join(options.root, options.tsConfig));
+            const tsConfig = options.tsConfig
+                ? (0, js_1.readTsConfig)(path.join(options.root, options.tsConfig))
+                : undefined;
             const babelConfig = {
                 test: /\.([jt])sx?$/,
                 loader: path.join(__dirname, '../../../utils/web-babel-loader'),
                 exclude: /node_modules/,
                 options: {
                     cwd: path.join(options.root, options.sourceRoot),
-                    emitDecoratorMetadata: tsConfig.options.emitDecoratorMetadata,
+                    emitDecoratorMetadata: tsConfig
+                        ? tsConfig.options.emitDecoratorMetadata
+                        : false,
                     isModern: true,
                     isTest: process.env.NX_CYPRESS_COMPONENT_TEST === 'true',
                     envName: process.env.BABEL_ENV ?? process.env.NODE_ENV,

package/src/plugins/nx-webpack-plugin/lib/instantiate-script-plugins.d.ts

@@ -1,3 +1,3 @@
 import { WebpackPluginInstance } from 'webpack';
-import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
-export declare function instantiateScriptPlugins(options: NormalizedNxWebpackPluginOptions): WebpackPluginInstance[];
+import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
+export declare function instantiateScriptPlugins(options: NormalizedNxAppWebpackPluginOptions): WebpackPluginInstance[];

package/src/plugins/nx-webpack-plugin/lib/normalize-options.d.ts

@@ -1,4 +1,4 @@
-import { AssetGlobPattern, FileReplacement, NormalizedNxWebpackPluginOptions, NxWebpackPluginOptions } from '../nx-webpack-plugin-options';
-export declare function normalizeOptions(options: NxWebpackPluginOptions): NormalizedNxWebpackPluginOptions;
-export declare function normalizeAssets(assets: any[], root: string, sourceRoot: string, projectRoot: string): AssetGlobPattern[];
+import { AssetGlobPattern, FileReplacement, NormalizedNxAppWebpackPluginOptions, NxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
+export declare function normalizeOptions(options: NxAppWebpackPluginOptions): NormalizedNxAppWebpackPluginOptions;
+export declare function normalizeAssets(assets: any[], root: string, sourceRoot: string, projectRoot: string, resolveRelativePathsToProjectRoot?: boolean): AssetGlobPattern[];
 export declare function normalizeFileReplacements(root: string, fileReplacements: FileReplacement[]): FileReplacement[];