@nx/webpack 21.0.0-beta.1 → 21.0.0-beta.11

package/index.d.ts

@@ -6,7 +6,7 @@ import { useLegacyNxPlugin } from './src/plugins/use-legacy-nx-plugin/use-legacy
 export { configurationGenerator, convertConfigToWebpackPluginGenerator, useLegacyNxPlugin, };
 /** @deprecated Use `configurationGenerator` instead. */
 export declare const webpackProjectGenerator: typeof configurationGenerator;
-/** @deprecated Use NxAppWebpackPlugin from `@nx/webpack/app-plugin` instead. */
+/** @deprecated Use NxAppWebpackPlugin from `@nx/webpack/app-plugin` instead, which can improve graph creation by 150-200ms per file. */
 export declare const NxWebpackPlugin: typeof NxAppWebpackPlugin;
 /** @deprecated Use NxTsconfigPathsWebpackPlugin from `@nx/webpack/tsconfig-paths-plugin` instead. */
 export declare const NxTsconfigPathsWebpackPlugin: typeof _NxTsconfigPathsWebpackPlugin;

package/index.js

@@ -13,8 +13,7 @@ Object.defineProperty(exports, "useLegacyNxPlugin", { enumerable: true, get: fun
 // Exported for backwards compatibility in case a plugin is using the old name.
 /** @deprecated Use `configurationGenerator` instead. */
 exports.webpackProjectGenerator = configuration_1.configurationGenerator;
-// TODO(v21): 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. */
+/** @deprecated Use NxAppWebpackPlugin from `@nx/webpack/app-plugin` instead, which can improve graph creation by 150-200ms per file. */
 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;

package/migrations.json

@@ -1,16 +1,16 @@
 {
   "generators": {
-    "update-17-2-1-webpack-config-setup": {
-      "cli": "nx",
-      "version": "17.2.1-beta.0",
-      "description": "Add webpack.config.js file when webpackConfig is not defined",
-      "implementation": "./src/migrations/update-17-2-1/webpack-config-setup"
-    },
     "update-19-6-3-proxy-config": {
       "cli": "nx",
       "version": "19.6.3-beta.0",
       "description": "Migrate proxy config files to match new format from webpack-dev-server v5.",
       "implementation": "./src/migrations/update-19-6-3/proxy-config"
+    },
+    "update-21-0-0-remove-isolated-config": {
+      "cli": "nx",
+      "version": "21.0.0-beta.11",
+      "description": "Remove isolatedConfig option for @nx/webpack:webpack",
+      "implementation": "./src/migrations/update-21-0-0/remove-isolated-config"
     }
   },
   "packageJsonUpdates": {
@@ -35,6 +35,28 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.5.0": {
+      "version": "20.5.0-beta.3",
+      "packages": {
+        "sass-loader": {
+          "version": "^16.0.4",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "20.7.1": {
+      "version": "20.7.1-beta.0",
+      "packages": {
+        "webpack": {
+          "version": "5.98.0",
+          "alwaysAddToPackageJson": false
+        },
+        "webpack-dev-server": {
+          "version": "^5.2.1",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/webpack",
-  "version": "21.0.0-beta.1",
+  "version": "21.0.0-beta.11",
   "private": false,
   "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
   "repository": {
@@ -51,8 +51,9 @@
     "postcss-import": "~14.1.0",
     "postcss-loader": "^6.1.1",
     "rxjs": "^7.8.0",
-    "sass": "^1.42.1",
-    "sass-loader": "^12.2.0",
+    "sass": "^1.85.0",
+    "sass-embedded": "^1.83.4",
+    "sass-loader": "^16.0.4",
     "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.0",
     "stylus": "^0.64.0",
@@ -61,12 +62,12 @@
     "ts-loader": "^9.3.1",
     "tsconfig-paths-webpack-plugin": "4.0.0",
     "tslib": "^2.3.0",
-    "webpack": "^5.80.0",
-    "webpack-dev-server": "^5.0.4",
+    "webpack": "5.98.0",
+    "webpack-dev-server": "^5.2.1",
     "webpack-node-externals": "^3.0.0",
     "webpack-subresource-integrity": "^5.1.0",
-    "@nx/devkit": "21.0.0-beta.1",
-    "@nx/js": "21.0.0-beta.1"
+    "@nx/devkit": "21.0.0-beta.11",
+    "@nx/js": "21.0.0-beta.11"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/dev-server/schema.json

@@ -1,5 +1,6 @@
 {
   "version": 2,
+  "continuous": true,
   "outputCapture": "direct-nodejs",
   "title": "Webpack dev server",
   "description": "Serve an application using webpack.",

package/src/executors/ssr-dev-server/schema.json

@@ -1,5 +1,6 @@
 {
   "version": 2,
+  "continuous": true,
   "outputCapture": "direct-nodejs",
   "title": "Webpack SSR Dev Server",
   "description": "Serve a SSR application using webpack.",

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

@@ -16,6 +16,7 @@ function normalizeOptions(options, root, projectRoot, sourceRoot) {
         outputFileName: options.outputFileName ?? 'main.js',
         webpackConfig: normalizePluginPath(options.webpackConfig, root),
         fileReplacements: (0, normalize_options_1.normalizeFileReplacements)(root, options.fileReplacements),
+        sassImplementation: options.sassImplementation ?? 'sass',
         optimization: typeof options.optimization !== 'object'
             ? {
                 scripts: options.optimization,

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

@@ -47,9 +47,6 @@ export interface WebpackExecutorOptions {
   extractLicenses?: boolean;
   fileReplacements?: FileReplacement[];
   generatePackageJson?: boolean;
-  // TODO(v21): 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;
   main?: string;
   memoryLimit?: number;
@@ -81,6 +78,7 @@ export interface WebpackExecutorOptions {
   index?: string;
   postcssConfig?: string;
   scripts?: Array<ExtraEntryPointClass | string>;
+  sassImplementation?: 'sass' | 'sass-embedded';
   stylePreprocessorOptions?: any;
   styles?: Array<ExtraEntryPointClass | string>;
   subresourceIntegrity?: boolean;

package/src/executors/webpack/schema.json

@@ -144,6 +144,12 @@
       },
       "additionalProperties": false
     },
+    "sassImplementation": {
+      "type": "string",
+      "description": "The implementation of the SASS compiler to use. Can be either `sass` or `sass-embedded`. Defaults to `sass-embedded`.",
+      "enum": ["sass", "sass-embedded"],
+      "default": "sass"
+    },
     "optimization": {
       "description": "Enables optimization of the build output.",
       "oneOf": [
@@ -248,12 +254,6 @@
       "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>`."
     },
-    "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": 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 20. See https://nx.dev/recipes/webpack/webpack-config-setup."
-    },
     "standardWebpackConfigFunction": {
       "type": "boolean",
       "description": "Set to true if the webpack config exports a standard webpack function, not an Nx-specific one. See: https://webpack.js.org/configuration/configuration-types/#exporting-a-function",

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

@@ -11,13 +11,8 @@ const fs_1 = require("../../utils/fs");
 const resolve_user_defined_webpack_config_1 = require("../../utils/webpack/resolve-user-defined-webpack-config");
 const normalize_options_1 = require("./lib/normalize-options");
 const config_1 = require("../../utils/config");
-const with_nx_1 = require("../../utils/with-nx");
 const js_1 = require("@nx/js");
-const with_web_1 = require("../../utils/with-web");
 async function getWebpackConfigs(options, context) {
-    if (options.isolatedConfig && !options.webpackConfig) {
-        throw new Error(`Using "isolatedConfig" without a "webpackConfig" is not supported.`);
-    }
     let userDefinedWebpackConfig = null;
     if (options.webpackConfig) {
         userDefinedWebpackConfig = (0, resolve_user_defined_webpack_config_1.resolveUserDefinedWebpackConfig)(options.webpackConfig, (0, js_1.getRootTsConfigPath)());
@@ -25,11 +20,7 @@ async function getWebpackConfigs(options, context) {
             userDefinedWebpackConfig = await userDefinedWebpackConfig;
         }
     }
-    const config = options.isolatedConfig
-        ? {}
-        : (options.target === 'web'
-            ? (0, config_1.composePluginsSync)((0, with_nx_1.withNx)(options), (0, with_web_1.withWeb)(options))
-            : (0, with_nx_1.withNx)(options))({}, { options, context });
+    const config = {};
     if (typeof userDefinedWebpackConfig === 'function' &&
         ((0, config_1.isNxWebpackComposablePlugin)(userDefinedWebpackConfig) ||
             !options.standardWebpackConfigFunction)) {

package/src/generators/convert-to-inferred/utils/build-post-target-transformer.js

@@ -90,14 +90,6 @@ function extractPluginOptions(options, context, configName) {
             }
             delete options.memoryLimit;
         }
-        else if (key === 'isolatedConfig') {
-            context.logger.addLog({
-                executorName: '@nx/webpack:webpack',
-                log: `The 'isolatedConfig' option is deprecated and not supported by the NxAppWebpackPlugin. It was removed from your project configuration.`,
-                project: context.projectName,
-            });
-            delete options.isolatedConfig;
-        }
         else if (key === 'standardWebpackConfigFunction') {
             delete options.standardWebpackConfigFunction;
         }

package/src/generators/convert-to-inferred/utils/serve-post-target-transformer.js

@@ -156,7 +156,10 @@ function extractDevServerOptions(options, context) {
     return devServerOptions;
 }
 function applyDefaults(options, buildOptions) {
-    if (options.port === undefined) {
+    if (!options) {
+        options = {};
+    }
+    if (options?.port === undefined) {
         options.port = 4200;
     }
     options.headers = { 'Access-Control-Allow-Origin': '*' };

package/src/generators/init/init.js

@@ -15,7 +15,7 @@ async function webpackInitGeneratorInternal(tree, schema) {
         nxJson.useInferencePlugins !== false;
     schema.addPlugin ??= addPluginDefault;
     if (schema.addPlugin) {
-        await (0, add_plugin_1.addPluginV1)(tree, await (0, devkit_1.createProjectGraphAsync)(), '@nx/webpack/plugin', plugin_1.createNodes, {
+        await (0, add_plugin_1.addPlugin)(tree, await (0, devkit_1.createProjectGraphAsync)(), '@nx/webpack/plugin', plugin_1.createNodesV2, {
             buildTargetName: [
                 'build',
                 'webpack:build',

package/src/migrations/update-21-0-0/remove-isolated-config.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const devkit_1 = require("@nx/devkit");
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+async function default_1(tree) {
+    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/webpack:webpack', (options, projectName, targetName, configurationName) => {
+        // Only handle webpack config for default configuration
+        if (configurationName)
+            return;
+        const projectConfiguration = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+        if (!options.webpackConfig) {
+            delete options['isolatedConfig'];
+            options.webpackConfig = `${projectConfiguration.root}/webpack.config.js`;
+            tree.write(options.webpackConfig, options.target === 'web'
+                ? `
+const { composePlugins, withNx, withWeb } = require('@nx/webpack');
+
+// Nx plugins for webpack.
+module.exports = composePlugins(withNx(), withWeb(), (config) => {
+  // Note: This was added by an Nx migration. Webpack builds are required to have a corresponding Webpack config file.
+  // See: https://nx.dev/recipes/webpack/webpack-config-setup
+  return config;
+});
+`
+                : `
+const { composePlugins, withNx } = require('@nx/webpack');
+
+// Nx plugins for webpack.
+module.exports = composePlugins(withNx(), (config) => {
+  // Note: This was added by an Nx migration. Webpack builds are required to have a corresponding Webpack config file.
+  // See: https://nx.dev/recipes/webpack/webpack-config-setup
+  return config;
+});
+        `);
+            projectConfiguration.targets[targetName].options = options;
+            (0, devkit_1.updateProjectConfiguration)(tree, projectName, projectConfiguration);
+        }
+    });
+    await (0, devkit_1.formatFiles)(tree);
+}

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

@@ -4,5 +4,5 @@ export declare class NxTsconfigPathsWebpackPlugin {
     private options;
     constructor(options: NormalizedNxAppWebpackPluginOptions);
     apply(compiler: Compiler): void;
-    handleBuildLibsFromSource(config: Partial<WebpackOptionsNormalized | Configuration>, options: any): void;
+    handleBuildLibsFromSource(config: Partial<WebpackOptionsNormalized | Configuration>, options: NormalizedNxAppWebpackPluginOptions): void;
 }

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

@@ -42,7 +42,9 @@ class NxTsconfigPathsWebpackPlugin {
                     .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));
+                config.plugins.push(new webpack_nx_build_coordination_plugin_1.WebpackNxBuildCoordinationPlugin(buildCommand, {
+                    skipWatchingDeps: options.watchDependencies === false,
+                }));
             }
         }
     }

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

@@ -15,10 +15,15 @@ const compiler_loaders_1 = require("./compiler-loaders");
 const TerserPlugin = require("terser-webpack-plugin");
 const nodeExternals = require("webpack-node-externals");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const utils_1 = require("./utils");
 const IGNORED_WEBPACK_WARNINGS = [
     /The comment file/i,
     /could not find any license/i,
 ];
+const extensionAlias = {
+    '.js': ['.ts', '.js'],
+    '.mjs': ['.mts', '.mjs'],
+};
 const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
 const mainFields = ['module', 'main'];
 function applyBaseConfig(options, config = {}, { useNormalizedEntry, } = {}) {
@@ -183,8 +188,11 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
     if (options.useTsconfigPaths) {
         plugins.push(new nx_tsconfig_paths_webpack_plugin_1.NxTsconfigPathsWebpackPlugin({ ...options, tsConfig }));
     }
-    // New TS Solution already has a typecheck target
-    if (!options?.skipTypeChecking && !isUsingTsSolution) {
+    // New TS Solution already has a typecheck target but allow it to run during serve
+    if ((!options?.skipTypeChecking && !isUsingTsSolution) ||
+        (isUsingTsSolution &&
+            options?.skipTypeChecking === false &&
+            process.env['WEBPACK_SERVE'])) {
         const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
         plugins.push(new ForkTsCheckerWebpackPlugin({
             typescript: {
@@ -271,7 +279,31 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
     const externals = [];
     if (options.target === 'node' && options.externalDependencies === 'all') {
         const modulesDir = `${options.root}/node_modules`;
-        externals.push(nodeExternals({ modulesDir }));
+        const graph = options.projectGraph;
+        const projectName = options.projectName;
+        const deps = graph?.dependencies?.[projectName] ?? [];
+        // Collect non-buildable TS project references so that they are bundled
+        // in the final output. This is needed for projects that are not buildable
+        // but are referenced by buildable projects. This is needed for the new TS
+        // solution setup.
+        const nonBuildableWorkspaceLibs = isUsingTsSolution
+            ? deps
+                .filter((dep) => {
+                const node = graph.nodes?.[dep.target];
+                if (!node || node.type !== 'lib')
+                    return false;
+                const hasBuildTarget = 'build' in (node.data?.targets ?? {});
+                if (hasBuildTarget) {
+                    return false;
+                }
+                // If there is no build target we check the package exports to see if they reference
+                // source files
+                return !(0, utils_1.isBuildableLibrary)(node);
+            })
+                .map((dep) => graph.nodes?.[dep.target]?.data?.metadata?.js?.packageName)
+                .filter((name) => !!name)
+            : [];
+        externals.push(nodeExternals({ modulesDir, allowlist: nonBuildableWorkspaceLibs }));
     }
     else if (Array.isArray(options.externalDependencies)) {
         externals.push(function (ctx, callback) {
@@ -286,6 +318,10 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
     config.resolve = {
         ...config.resolve,
         extensions: [...(config?.resolve?.extensions ?? []), ...extensions],
+        extensionAlias: {
+            ...(config.resolve?.extensionAlias ?? {}),
+            ...extensionAlias,
+        },
         alias: {
             ...(config.resolve?.alias ?? {}),
             ...(options.fileReplacements?.reduce((aliases, replacement) => ({

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

@@ -34,7 +34,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
             sri: options.subresourceIntegrity,
             outputPath: path.basename(options.index),
             indexPath: path.join(options.root, options.index),
-            baseHref: options.baseHref,
+            baseHref: options.baseHref !== false ? options.baseHref : undefined,
             deployUrl: options.deployUrl,
             scripts: options.scripts,
             styles: options.styles,
@@ -56,6 +56,8 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
     const globalStylePaths = [];
     // Determine hashing format.
     const hashFormat = (0, hash_format_1.getOutputHashFormat)(options.outputHashing);
+    const sassOptions = options.stylePreprocessorOptions?.sassOptions;
+    const lessOptions = options.stylePreprocessorOptions?.lessOptions;
     const includePaths = [];
     if (options?.stylePreprocessorOptions?.includePaths?.length > 0) {
         options.stylePreprocessorOptions.includePaths.forEach((includePath) => includePaths.push(path.resolve(options.root, includePath)));
@@ -97,11 +99,15 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        api: 'modern-compiler',
+                        implementation: options.sassImplementation === 'sass'
+                            ? require.resolve('sass')
+                            : require.resolve('sass-embedded'),
                         sassOptions: {
                             fiber: false,
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -117,6 +123,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                     options: {
                         lessOptions: {
                             paths: includePaths,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },
@@ -152,13 +159,17 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        api: 'modern-compiler',
+                        implementation: options.sassImplementation === 'sass'
+                            ? require.resolve('sass')
+                            : require.resolve('sass-embedded'),
                         sourceMap: !!options.sourceMap,
                         sassOptions: {
                             fiber: false,
                             // bootstrap-sass requires a minimum precision of 8
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -176,6 +187,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                         lessOptions: {
                             javascriptEnabled: true,
                             ...lessPathOptions,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },
@@ -212,13 +224,17 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        api: 'modern-compiler',
+                        implementation: options.sassImplementation === 'sass'
+                            ? require.resolve('sass')
+                            : require.resolve('sass-embedded'),
                         sourceMap: !!options.sourceMap,
                         sassOptions: {
                             fiber: false,
                             // bootstrap-sass requires a minimum precision of 8
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -236,6 +252,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                         lessOptions: {
                             javascriptEnabled: true,
                             ...lessPathOptions,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },
@@ -342,6 +359,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                     },
                 },
             },
+            // TODO(v22): Remove this but provide a migration in `@nx/react` to add @svgr/webpack in userland webpack config
             // SVG: same as image but we need to separate it so it can be swapped for SVGR in the React plugin.
             {
                 test: /\.svg$/,

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

@@ -24,6 +24,8 @@ export declare function createLoaderFromCompiler(options: NormalizedNxAppWebpack
                 tsx: boolean;
             };
             transform: {
+                legacyDecorator: boolean;
+                decoratorMetadata: boolean;
                 react: {
                     runtime: string;
                 };

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

@@ -18,6 +18,8 @@ function createLoaderFromCompiler(options) {
                             tsx: true,
                         },
                         transform: {
+                            legacyDecorator: true,
+                            decoratorMetadata: true,
                             react: {
                                 runtime: 'automatic',
                             },

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

@@ -48,7 +48,10 @@ function normalizeOptions(options) {
         // executor options take precedence (especially for overriding with CLI args)
         originalTargetOptions);
     }
-    const sourceRoot = projectNode.data.sourceRoot ?? projectNode.data.root;
+    const sourceRoot = projectNode.data.sourceRoot ??
+        ((0, fs_1.existsSync)((0, path_1.join)(devkit_1.workspaceRoot, projectNode.data.root, 'src'))
+            ? (0, path_1.join)(projectNode.data.root, 'src')
+            : projectNode.data.root);
     if (!combinedPluginAndMaybeExecutorOptions.main) {
         throw new Error(`Missing "main" option for the entry file. Set this option in your Nx webpack plugin.`);
     }
@@ -85,6 +88,8 @@ function normalizeOptions(options) {
         target: combinedPluginAndMaybeExecutorOptions.target,
         targetName,
         vendorChunk: combinedPluginAndMaybeExecutorOptions.vendorChunk ?? !isProd,
+        sassImplementation: combinedPluginAndMaybeExecutorOptions.sassImplementation ??
+            'sass-embedded',
     };
 }
 function normalizeAssets(assets, root, sourceRoot, projectRoot, resolveRelativePathsToProjectRoot = true) {

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

@@ -98,7 +98,7 @@ function postcssOptionsCreator(options, { includePaths, forCssModules = false, }
                 ? []
                 : [
                     (0, postcss_cli_resources_1.PostcssCliResources)({
-                        baseHref: options.baseHref,
+                        baseHref: options.baseHref ? options.baseHref : undefined,
                         deployUrl: options.deployUrl,
                         loader,
                         filename: `[name]${hashFormat.file}.[ext]`,

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

@@ -0,0 +1,7 @@
+import { type ProjectGraphProjectNode } from '@nx/devkit';
+/**
+ * Check if the library is buildable.
+ * @param node from the project graph
+ * @returns boolean
+ */
+export declare function isBuildableLibrary(node: ProjectGraphProjectNode): boolean;

package/src/plugins/nx-webpack-plugin/lib/utils.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBuildableLibrary = isBuildableLibrary;
+function isSourceFile(path) {
+    return ['.ts', '.tsx', '.mts', '.cts'].some((ext) => path.endsWith(ext));
+}
+function isBuildableExportMap(packageExports) {
+    if (!packageExports || Object.keys(packageExports).length === 0) {
+        return false; // exports = {} → not buildable
+    }
+    const isCompiledExport = (value) => {
+        if (typeof value === 'string') {
+            return !isSourceFile(value);
+        }
+        if (typeof value === 'object' && value !== null) {
+            return Object.entries(value).some(([key, subValue]) => {
+                if (key === 'types' ||
+                    key === 'development' ||
+                    key === './package.json')
+                    return false;
+                return typeof subValue === 'string' && !isSourceFile(subValue);
+            });
+        }
+        return false;
+    };
+    if (packageExports['.']) {
+        return isCompiledExport(packageExports['.']);
+    }
+    return Object.entries(packageExports).some(([key, value]) => key !== '.' && isCompiledExport(value));
+}
+/**
+ * Check if the library is buildable.
+ * @param node from the project graph
+ * @returns boolean
+ */
+function isBuildableLibrary(node) {
+    if (!node.data.metadata?.js) {
+        return false;
+    }
+    const { packageExports, packageMain } = node.data.metadata.js;
+    // if we have exports only check this else fallback to packageMain
+    if (packageExports) {
+        return isBuildableExportMap(packageExports);
+    }
+    return (typeof packageMain === 'string' &&
+        packageMain !== '' &&
+        !isSourceFile(packageMain));
+}

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

@@ -57,7 +57,7 @@ export interface NxAppWebpackPluginOptions {
     /**
      * Set <base href> for the resulting index.html.
      */
-    baseHref?: string;
+    baseHref?: string | false;
     /**
      * Build the libraries from source. Default is `true`.
      */
@@ -73,6 +73,7 @@ export interface NxAppWebpackPluginOptions {
     crossOrigin?: 'none' | 'anonymous' | 'use-credentials';
     /**
      * Delete the output path before building.
+     * @deprecated Use the `output.clean` option in Webpack. https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder
      */
     deleteOutputPath?: boolean;
     /**
@@ -185,7 +186,11 @@ export interface NxAppWebpackPluginOptions {
     /**
      * Options for the style preprocessor. e.g. `{ "includePaths": [] }` for SASS.
      */
-    stylePreprocessorOptions?: any;
+    stylePreprocessorOptions?: {
+        includePaths?: string[];
+        sassOptions?: Record<string, any>;
+        lessOptions?: Record<string, any>;
+    };
     /**
      * External stylesheets that will be included with the application.
      */
@@ -206,6 +211,11 @@ export interface NxAppWebpackPluginOptions {
      * Use tsconfig-paths-webpack-plugin to resolve modules using paths in the tsconfig file.
      */
     useTsconfigPaths?: boolean;
+    /**
+     * The implementation of the SASS compiler to use. Can be either `sass` or `sass-embedded`. Defaults to `sass-embedded`.
+     * @deprecated Sass option will be removed in Nx 22. This option will also be removed in Nx 22 as it is no longer needed.
+     */
+    sassImplementation?: 'sass' | 'sass-embedded';
     /**
      * Generate a separate vendor chunk for 3rd party packages.
      */
@@ -226,6 +236,10 @@ export interface NxAppWebpackPluginOptions {
      * Whether to rebase absolute path for assets in postcss cli resources.
      */
     rebaseRootRelative?: boolean;
+    /**
+     * Watch buildable dependencies and rebuild when they change.
+     */
+    watchDependencies?: boolean;
 }
 export interface NormalizedNxAppWebpackPluginOptions extends NxAppWebpackPluginOptions {
     projectName: string;

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

@@ -29,6 +29,10 @@ class NxAppWebpackPlugin {
         if (typeof target === 'string') {
             this.options.target = target;
         }
+        // Prefer `clean` option from Webpack config over our own.
+        if (typeof compiler.options.output?.clean !== 'undefined') {
+            this.options.deleteOutputPath = false;
+        }
         (0, apply_base_config_1.applyBaseConfig)(this.options, compiler.options, {
             useNormalizedEntry: true,
         });

package/src/plugins/plugin.js

@@ -120,6 +120,7 @@ async function createWebpackTargets(configFilePath, projectRoot, options, contex
         },
     };
     targets[options.serveTargetName] = {
+        continuous: true,
         command: `webpack-cli serve`,
         options: {
             cwd: projectRoot,
@@ -139,6 +140,7 @@ async function createWebpackTargets(configFilePath, projectRoot, options, contex
         },
     };
     targets[options.previewTargetName] = {
+        continuous: true,
         command: `webpack-cli serve`,
         options: {
             cwd: projectRoot,
@@ -158,6 +160,7 @@ async function createWebpackTargets(configFilePath, projectRoot, options, contex
         },
     };
     targets[options.serveStaticTargetName] = {
+        continuous: true,
         dependsOn: [options.buildTargetName],
         executor: '@nx/web:file-server',
         options: {

package/src/plugins/webpack-nx-build-coordination-plugin.d.ts

@@ -1,11 +1,21 @@
 import type { Compiler } from 'webpack';
+type PluginOptions = {
+    skipInitialBuild?: boolean;
+    skipWatchingDeps?: boolean;
+};
 export declare class WebpackNxBuildCoordinationPlugin {
     private readonly buildCmd;
     private currentlyRunning;
     private buildCmdProcess;
+    constructor(buildCmd: string);
+    /**
+     * @deprecated Use the constructor with the `options` parameter instead.
+     */
     constructor(buildCmd: string, skipInitialBuild?: boolean);
+    constructor(buildCmd: string, options?: PluginOptions);
     apply(compiler: Compiler): void;
     startWatchingBuildableLibs(): Promise<void>;
     buildChangedProjects(): Promise<void>;
     private createFileWatcher;
 }
+export {};

package/src/plugins/webpack-nx-build-coordination-plugin.js

@@ -6,20 +6,25 @@ const client_1 = require("nx/src/daemon/client/client");
 const watch_1 = require("nx/src/command-line/watch/watch");
 const output_1 = require("nx/src/utils/output");
 class WebpackNxBuildCoordinationPlugin {
-    constructor(buildCmd, skipInitialBuild) {
+    constructor(buildCmd, skipInitialBuildOrOptions) {
         this.buildCmd = buildCmd;
         this.currentlyRunning = 'none';
         this.buildCmdProcess = null;
-        if (!skipInitialBuild) {
+        const options = typeof skipInitialBuildOrOptions === 'boolean'
+            ? { skipInitialBuild: skipInitialBuildOrOptions }
+            : skipInitialBuildOrOptions;
+        if (!options?.skipInitialBuild) {
             this.buildChangedProjects();
         }
-        if ((0, client_1.isDaemonEnabled)()) {
-            this.startWatchingBuildableLibs();
-        }
-        else {
-            output_1.output.warn({
-                title: 'Nx Daemon is not enabled. Buildable libs will not be rebuilt on file changes.',
-            });
+        if (!options?.skipWatchingDeps) {
+            if ((0, client_1.isDaemonEnabled)()) {
+                this.startWatchingBuildableLibs();
+            }
+            else {
+                output_1.output.warn({
+                    title: 'Nx Daemon is not enabled. Buildable libs will not be rebuilt on file changes.',
+                });
+            }
         }
     }
     apply(compiler) {

package/src/utils/with-web.d.ts

@@ -8,8 +8,13 @@ export interface WithWebOptions {
     generateIndexHtml?: boolean;
     index?: string;
     postcssConfig?: string;
+    sassImplementation?: 'sass' | 'sass-embedded';
     scripts?: Array<ExtraEntryPointClass | string>;
-    stylePreprocessorOptions?: any;
+    stylePreprocessorOptions?: {
+        includePaths?: string[];
+        sassOptions?: Record<string, any>;
+        lessOptions?: Record<string, any>;
+    };
     styles?: Array<ExtraEntryPointClass | string>;
     subresourceIntegrity?: boolean;
     ssr?: boolean;

package/src/migrations/update-17-2-1/webpack-config-setup.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
-const devkit_1 = require("@nx/devkit");
-const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
-async function default_1(tree) {
-    const update = (options, projectName, targetName, configurationName) => {
-        // Only handle webpack config for default configuration
-        if (configurationName)
-            return;
-        const projectConfiguration = (0, devkit_1.readProjectConfiguration)(tree, projectName);
-        if (!options.webpackConfig && options.isolatedConfig !== false) {
-            options.webpackConfig = `${projectConfiguration.root}/webpack.config.js`;
-            tree.write(options.webpackConfig, `
-        const { composePlugins, withNx } = require('@nx/webpack');
-
-        // Nx plugins for webpack.
-        module.exports = composePlugins(withNx(), (config) => {
-          // Note: This was added by an Nx migration. Webpack builds are required to have a corresponding Webpack config file.
-          // See: https://nx.dev/recipes/webpack/webpack-config-setup
-          return config;
-        });
-        `);
-            projectConfiguration.targets[targetName].options = options;
-            (0, devkit_1.updateProjectConfiguration)(tree, projectName, projectConfiguration);
-        }
-    };
-    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/webpack:webpack', update);
-    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nrwl/webpack:webpack', update);
-    await (0, devkit_1.formatFiles)(tree);
-}