@nx/webpack 17.0.3 → 17.0.4

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

@@ -1,4 +1,9 @@
-<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx.png" width="600" alt="Nx - Smart, Fast and Extensible Build System"></p>
+<p style="text-align: center;">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-dark.svg">
+    <img alt="Nx - Smart Monorepos · Fast CI" src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-light.svg" width="100%">
+  </picture>
+</p>
 
 <div style="text-align: center;">
 
@@ -15,9 +20,9 @@
 
 <hr>
 
-# Nx: Smart, Fast and Extensible Build System
+# Nx: Smart Monorepos · Fast CI
 
-Nx is a next generation build system with first class monorepo support and powerful integrations.
+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).
 
@@ -59,5 +64,5 @@ npx nx@latest init
 - [Blog Posts About Nx](https://blog.nrwl.io/nx/home)
 
 <p style="text-align: center;"><a href="https://nx.dev/#learning-materials" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-courses-and-videos.svg" 
-width="100%" alt="Nx - Smart, Fast and Extensible Build System"></a></p>
+width="100%" alt="Nx - Smart Monorepos · Fast CI"></a></p>
 

package/generators.json

@@ -3,7 +3,7 @@
   "version": "0.1",
   "generators": {
     "init": {
-      "factory": "./src/generators/init/init#webpackInitGenerator",
+      "factory": "./src/generators/init/init#webpackInitGeneratorInternal",
       "schema": "./src/generators/init/schema.json",
       "description": "Initialize the `@nrwl/webpack` plugin.",
       "aliases": ["ng-add"],
@@ -11,7 +11,7 @@
     },
     "configuration": {
       "aliases": ["webpack-project"],
-      "factory": "./src/generators/configuration/configuration",
+      "factory": "./src/generators/configuration/configuration#configurationGeneratorInternal",
       "schema": "./src/generators/configuration/schema.json",
       "description": "Add webpack configuration to a project.",
       "hidden": true

package/index.d.ts

@@ -4,7 +4,7 @@ export { configurationGenerator };
 export declare const webpackProjectGenerator: typeof configurationGenerator;
 export * from './src/utils/create-copy-plugin';
 export * from './src/utils/config';
-export * from './src/generators/init/init';
+export { webpackInitGenerator } from './src/generators/init/init';
 export type { WebDevServerOptions } from './src/executors/dev-server/schema';
 export * from './src/executors/dev-server/dev-server.impl';
 export * from './src/executors/webpack/lib/normalize-options';
@@ -14,3 +14,5 @@ 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,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.webpackProjectGenerator = exports.configurationGenerator = void 0;
+exports.NxTsconfigPathsWebpackPlugin = exports.NxWebpackPlugin = exports.webpackInitGenerator = 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; } });
@@ -9,7 +9,8 @@ Object.defineProperty(exports, "configurationGenerator", { enumerable: true, get
 exports.webpackProjectGenerator = configuration_1.configurationGenerator;
 tslib_1.__exportStar(require("./src/utils/create-copy-plugin"), exports);
 tslib_1.__exportStar(require("./src/utils/config"), exports);
-tslib_1.__exportStar(require("./src/generators/init/init"), exports);
+var init_1 = require("./src/generators/init/init");
+Object.defineProperty(exports, "webpackInitGenerator", { enumerable: true, get: function () { return init_1.webpackInitGenerator; } });
 tslib_1.__exportStar(require("./src/executors/dev-server/dev-server.impl"), exports);
 tslib_1.__exportStar(require("./src/executors/webpack/lib/normalize-options"), exports);
 tslib_1.__exportStar(require("./src/executors/webpack/webpack.impl"), exports);
@@ -17,3 +18,7 @@ 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

@@ -29,6 +29,12 @@
       "version": "16.0.0-beta.1",
       "description": "Replace @nrwl/webpack with @nx/webpack",
       "implementation": "./src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages"
+    },
+    "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"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/webpack",
-  "version": "17.0.3",
+  "version": "17.0.4",
   "private": false,
   "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
   "repository": {
@@ -29,7 +29,8 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@babel/core": "^7.22.9",
+    "@babel/core": "^7.23.2",
+    "ajv": "^8.12.0",
     "autoprefixer": "^10.4.9",
     "babel-loader": "^9.1.2",
     "browserslist": "^4.21.4",
@@ -62,9 +63,9 @@
     "webpack-dev-server": "^4.9.3",
     "webpack-node-externals": "^3.0.0",
     "webpack-subresource-integrity": "^5.1.0",
-    "@nx/devkit": "17.0.3",
-    "@nx/js": "17.0.3",
-    "@nrwl/webpack": "17.0.3"
+    "@nx/devkit": "17.0.4",
+    "@nx/js": "17.0.4",
+    "@nrwl/webpack": "17.0.4"
   },
   "publishConfig": {
     "access": "public"

package/plugin.d.ts

@@ -0,0 +1 @@
+export { createNodes } from './src/plugins/plugin';

package/plugin.js

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

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

@@ -9,36 +9,50 @@ const WebpackDevServer = require("webpack-dev-server");
 const get_dev_server_config_1 = require("./lib/get-dev-server-config");
 const buildable_libs_utils_1 = require("@nx/js/src/utils/buildable-libs-utils");
 const run_webpack_1 = require("../../utils/run-webpack");
-const custom_webpack_1 = require("../../utils/webpack/custom-webpack");
+const resolve_user_defined_webpack_config_1 = require("../../utils/webpack/resolve-user-defined-webpack-config");
 const normalize_options_1 = require("../webpack/lib/normalize-options");
-const path_1 = require("path");
+const config_1 = require("../../utils/config");
+const js_1 = require("@nx/js");
 async function* devServerExecutor(serveOptions, context) {
     // Default to dev mode so builds are faster and HMR mode works better.
     process.env.NODE_ENV ??= 'development';
     const { root: projectRoot, sourceRoot } = context.projectsConfigurations.projects[context.projectName];
     const buildOptions = (0, normalize_options_1.normalizeOptions)(getBuildOptions(serveOptions, context), context.root, projectRoot, sourceRoot);
-    if (!buildOptions.index) {
-        throw new Error(`Cannot run dev-server without "index" option. Check the build options for ${context.projectName}.`);
-    }
+    process.env.NX_BUILD_LIBS_FROM_SOURCE = `${buildOptions.buildLibsFromSource}`;
+    process.env.NX_BUILD_TARGET = serveOptions.buildTarget;
+    // TODO(jack): Figure out a way to port this into NxWebpackPlugin
     if (!buildOptions.buildLibsFromSource) {
+        if (!buildOptions.tsConfig) {
+            throw new Error(`Cannot find "tsConfig" to remap paths for. Set this option in project.json.`);
+        }
         const { target, dependencies } = (0, buildable_libs_utils_1.calculateProjectBuildableDependencies)(context.taskGraph, context.projectGraph, context.root, context.projectName, 'build', // should be generalized
         context.configurationName);
         buildOptions.tsConfig = (0, buildable_libs_utils_1.createTmpTsConfig)(buildOptions.tsConfig, context.root, target.data.root, dependencies);
+        process.env.NX_TSCONFIG_PATH = buildOptions.tsConfig;
     }
-    let config = (0, get_dev_server_config_1.getDevServerConfig)(context, buildOptions, serveOptions);
+    let config;
+    const devServer = (0, get_dev_server_config_1.getDevServerOptions)(context.root, serveOptions, buildOptions);
     if (buildOptions.webpackConfig) {
-        let tsconfigPath = buildOptions.tsConfig.startsWith(context.root)
-            ? buildOptions.tsConfig
-            : (0, path_1.join)(context.root, buildOptions.tsConfig);
-        let customWebpack = (0, custom_webpack_1.resolveCustomWebpackConfig)(buildOptions.webpackConfig, tsconfigPath);
-        if (typeof customWebpack.then === 'function') {
-            customWebpack = await customWebpack;
+        let userDefinedWebpackConfig = (0, resolve_user_defined_webpack_config_1.resolveUserDefinedWebpackConfig)(buildOptions.webpackConfig, (0, js_1.getRootTsConfigPath)());
+        if (typeof userDefinedWebpackConfig.then === 'function') {
+            userDefinedWebpackConfig = await userDefinedWebpackConfig;
+        }
+        // Only add the dev server option if user is composable plugin.
+        // Otherwise, user should define `devServer` option directly in their webpack config.
+        if (typeof userDefinedWebpackConfig === 'function' &&
+            ((0, config_1.isNxWebpackComposablePlugin)(userDefinedWebpackConfig) ||
+                !buildOptions.standardWebpackConfigFunction)) {
+            config = await userDefinedWebpackConfig({ devServer }, {
+                options: buildOptions,
+                context,
+                configuration: serveOptions.buildTarget.split(':')[2],
+            });
+        }
+        else if (userDefinedWebpackConfig) {
+            // New behavior, we want the webpack config to export object
+            config = userDefinedWebpackConfig;
+            config.devServer ??= devServer;
         }
-        config = await customWebpack(config, {
-            options: buildOptions,
-            context,
-            configuration: serveOptions.buildTarget.split(':')[2],
-        });
     }
     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/dev-server/lib/get-dev-server-config.d.ts

@@ -1,5 +1,4 @@
-import { ExecutorContext } from '@nx/devkit';
-import type { Configuration as WebpackConfiguration } from 'webpack';
+import type { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import { WebDevServerOptions } from '../schema';
 import { NormalizedWebpackExecutorOptions } from '../../webpack/schema';
-export declare function getDevServerConfig(context: ExecutorContext, buildOptions: NormalizedWebpackExecutorOptions, serveOptions: WebDevServerOptions): Partial<WebpackConfiguration>;
+export declare function getDevServerOptions(root: string, serveOptions: WebDevServerOptions, buildOptions: NormalizedWebpackExecutorOptions): WebpackDevServerConfiguration;

package/src/executors/dev-server/lib/get-dev-server-config.js

@@ -1,21 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDevServerConfig = void 0;
+exports.getDevServerOptions = void 0;
 const devkit_1 = require("@nx/devkit");
 const path = require("path");
 const fs_1 = require("fs");
-const get_webpack_config_1 = require("../../webpack/lib/get-webpack-config");
 const serve_path_1 = require("./serve-path");
-function getDevServerConfig(context, buildOptions, serveOptions) {
-    const workspaceRoot = context.root;
-    const webpackConfig = buildOptions.isolatedConfig
-        ? {}
-        : (0, get_webpack_config_1.getWebpackConfig)(context, buildOptions);
-    webpackConfig.devServer = getDevServerPartial(workspaceRoot, serveOptions, buildOptions);
-    return webpackConfig;
-}
-exports.getDevServerConfig = getDevServerConfig;
-function getDevServerPartial(root, options, buildOptions) {
+function getDevServerOptions(root, serveOptions, buildOptions) {
     const servePath = (0, serve_path_1.buildServePath)(buildOptions);
     let scriptsOptimization;
     let stylesOptimization;
@@ -30,11 +20,12 @@ function getDevServerPartial(root, options, buildOptions) {
         scriptsOptimization = stylesOptimization = false;
     }
     const config = {
-        host: options.host,
-        port: options.port,
+        host: serveOptions.host,
+        port: serveOptions.port,
         headers: { 'Access-Control-Allow-Origin': '*' },
         historyApiFallback: {
-            index: `${servePath}${path.basename(buildOptions.index)}`,
+            index: buildOptions.index &&
+                `${servePath}${path.basename(buildOptions.index)}`,
             disableDotRule: true,
             htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
         },
@@ -42,7 +33,7 @@ function getDevServerPartial(root, options, buildOptions) {
             const isHttps = server.options.https || server.options.server?.type === 'https';
             devkit_1.logger.info(`NX Web Development Server is listening at ${isHttps ? 'https' : 'http'}://${server.options.host}:${server.options.port}${(0, serve_path_1.buildServePath)(buildOptions)}`);
         },
-        open: options.open,
+        open: serveOptions.open,
         static: false,
         compress: scriptsOptimization || stylesOptimization,
         devMiddleware: {
@@ -50,31 +41,32 @@ function getDevServerPartial(root, options, buildOptions) {
             stats: false,
         },
         client: {
-            webSocketURL: options.publicHost,
+            webSocketURL: serveOptions.publicHost,
             overlay: {
                 errors: !(scriptsOptimization || stylesOptimization),
                 warnings: false,
             },
         },
-        liveReload: options.hmr ? false : options.liveReload,
-        hot: options.hmr,
+        liveReload: serveOptions.hmr ? false : serveOptions.liveReload, // disable liveReload if hmr is enabled
+        hot: serveOptions.hmr,
     };
-    if (options.ssl) {
+    if (serveOptions.ssl) {
         config.server = {
             type: 'https',
         };
-        if (options.sslKey && options.sslCert) {
-            config.server.options = getSslConfig(root, options);
+        if (serveOptions.sslKey && serveOptions.sslCert) {
+            config.server.options = getSslConfig(root, serveOptions);
         }
     }
-    if (options.proxyConfig) {
-        config.proxy = getProxyConfig(root, options);
+    if (serveOptions.proxyConfig) {
+        config.proxy = getProxyConfig(root, serveOptions);
     }
-    if (options.allowedHosts) {
-        config.allowedHosts = options.allowedHosts.split(',');
+    if (serveOptions.allowedHosts) {
+        config.allowedHosts = serveOptions.allowedHosts.split(',');
     }
     return config;
 }
+exports.getDevServerOptions = getDevServerOptions;
 function getSslConfig(root, options) {
     return {
         key: (0, fs_1.readFileSync)(path.resolve(root, options.sslKey), 'utf-8'),

package/src/executors/dev-server/schema.d.ts

@@ -1,17 +1,17 @@
 export interface WebDevServerOptions {
-  host: string;
-  port: number;
+  host?: string;
+  port?: number;
   publicHost?: string;
-  ssl: boolean;
+  ssl?: boolean;
   sslKey?: string;
   sslCert?: string;
   proxyConfig?: string;
   buildTarget: string;
-  open: boolean;
-  liveReload: boolean;
-  hmr: boolean;
-  watch: boolean;
-  allowedHosts: string;
+  open?: boolean;
+  liveReload?: boolean;
+  hmr?: boolean;
+  watch?: boolean;
+  allowedHosts?: string;
   memoryLimit?: number;
   baseHref?: string;
 }

package/src/executors/webpack/lib/normalize-options.d.ts

@@ -1,4 +1,3 @@
-import type { AssetGlobPattern, NormalizedWebpackExecutorOptions, WebpackExecutorOptions } from '../schema';
+import type { NormalizedWebpackExecutorOptions, WebpackExecutorOptions } from '../schema';
 export declare function normalizeOptions(options: WebpackExecutorOptions, root: string, projectRoot: string, sourceRoot: string): NormalizedWebpackExecutorOptions;
 export declare function normalizePluginPath(pluginPath: void | string, root: string): string;
-export declare function normalizeAssets(assets: any[], root: string, sourceRoot: string): AssetGlobPattern[];

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

@@ -1,39 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeAssets = exports.normalizePluginPath = exports.normalizeOptions = void 0;
+exports.normalizePluginPath = exports.normalizeOptions = void 0;
 const path_1 = require("path");
-const fs_1 = require("fs");
-const devkit_1 = require("@nx/devkit");
+const normalize_options_1 = require("../../../plugins/nx-webpack-plugin/lib/normalize-options");
 function normalizeOptions(options, root, projectRoot, sourceRoot) {
-    return {
+    const normalizedOptions = {
         ...options,
         root,
         projectRoot,
         sourceRoot,
         target: options.target ?? 'web',
-        main: (0, path_1.resolve)(root, options.main),
-        outputPath: (0, path_1.resolve)(root, options.outputPath),
         outputFileName: options.outputFileName ?? 'main.js',
-        tsConfig: (0, path_1.resolve)(root, options.tsConfig),
-        fileReplacements: normalizeFileReplacements(root, options.fileReplacements),
-        assets: normalizeAssets(options.assets, root, sourceRoot),
         webpackConfig: normalizePluginPath(options.webpackConfig, root),
+        fileReplacements: (0, normalize_options_1.normalizeFileReplacements)(root, options.fileReplacements),
         optimization: typeof options.optimization !== 'object'
             ? {
                 scripts: options.optimization,
                 styles: options.optimization,
             }
             : options.optimization,
-        polyfills: options.polyfills ? (0, path_1.resolve)(root, options.polyfills) : undefined,
     };
+    if (options.assets) {
+        normalizedOptions.assets = (0, normalize_options_1.normalizeAssets)(options.assets, root, sourceRoot, projectRoot, false // executor assets are relative to workspace root for consistency
+        );
+    }
+    return normalizedOptions;
 }
 exports.normalizeOptions = normalizeOptions;
-function normalizeFileReplacements(root, fileReplacements) {
-    return fileReplacements.map((fileReplacement) => ({
-        replace: (0, path_1.resolve)(root, fileReplacement.replace),
-        with: (0, path_1.resolve)(root, fileReplacement.with),
-    }));
-}
 function normalizePluginPath(pluginPath, root) {
     if (!pluginPath) {
         return '';
@@ -46,40 +39,3 @@ function normalizePluginPath(pluginPath, root) {
     }
 }
 exports.normalizePluginPath = normalizePluginPath;
-function normalizeAssets(assets, root, sourceRoot) {
-    return assets.map((asset) => {
-        if (typeof asset === 'string') {
-            const assetPath = (0, devkit_1.normalizePath)(asset);
-            const resolvedAssetPath = (0, path_1.resolve)(root, assetPath);
-            const resolvedSourceRoot = (0, path_1.resolve)(root, sourceRoot);
-            if (!resolvedAssetPath.startsWith(resolvedSourceRoot)) {
-                throw new Error(`The ${resolvedAssetPath} asset path must start with the project source root: ${sourceRoot}`);
-            }
-            const isDirectory = (0, fs_1.statSync)(resolvedAssetPath).isDirectory();
-            const input = isDirectory
-                ? resolvedAssetPath
-                : (0, path_1.dirname)(resolvedAssetPath);
-            const output = (0, path_1.relative)(resolvedSourceRoot, (0, path_1.resolve)(root, input));
-            const glob = isDirectory ? '**/*' : (0, path_1.basename)(resolvedAssetPath);
-            return {
-                input,
-                output,
-                glob,
-            };
-        }
-        else {
-            if (asset.output.startsWith('..')) {
-                throw new Error('An asset cannot be written to a location outside of the output path.');
-            }
-            const assetPath = (0, devkit_1.normalizePath)(asset.input);
-            const resolvedAssetPath = (0, path_1.resolve)(root, assetPath);
-            return {
-                ...asset,
-                input: resolvedAssetPath,
-                // Now we remove starting slash to make Webpack place it from the output root.
-                output: asset.output.replace(/^\//, ''),
-            };
-        }
-    });
-}
-exports.normalizeAssets = normalizeAssets;

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

@@ -47,8 +47,11 @@ export interface WebpackExecutorOptions {
   extractLicenses?: boolean;
   fileReplacements?: FileReplacement[];
   generatePackageJson?: boolean;
+  // TODO(v19): 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;
-  main: string;
+  standardWebpackConfigFunction?: boolean;
+  main?: string;
   memoryLimit?: number;
   namedChunks?: boolean;
   optimization?: boolean | OptimizationOptions;
@@ -61,9 +64,9 @@ export interface WebpackExecutorOptions {
   runtimeChunk?: boolean;
   sourceMap?: boolean | 'hidden';
   statsJson?: boolean;
-  target?: 'node' | 'web' | 'webworker';
+  target?: string;
   transformers?: TransformerEntry[];
-  tsConfig: string;
+  tsConfig?: string;
   vendorChunk?: boolean;
   verbose?: boolean;
   watch?: boolean;
@@ -86,8 +89,8 @@ export interface WebpackExecutorOptions {
 export interface NormalizedWebpackExecutorOptions
   extends WebpackExecutorOptions {
   outputFileName: string;
-  assets?: AssetGlobPattern[];
-  root?: string;
-  projectRoot?: string;
-  sourceRoot?: string;
+  assets: AssetGlobPattern[];
+  root: string;
+  projectRoot: string;
+  sourceRoot: string;
 }