@nx/webpack 17.0.3 → 17.0.5

package/src/generators/init/schema.json

@@ -1,27 +1,32 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "$id": "NxWebpackInit",
   "cli": "nx",
   "title": "Init Webpack Plugin",
   "description": "Initialize the Webpack Plugin.",
   "type": "object",
   "properties": {
-    "uiFramework": {
-      "type": "string",
-      "description": "UI Framework to use for Webpack.",
-      "enum": ["react", "none"],
-      "x-prompt": "What UI framework plugin should Webpack use?"
-    },
-    "compiler": {
-      "type": "string",
-      "enum": ["babel", "swc", "tsc"],
-      "description": "The compiler to initialize for.",
-      "default": "babel"
-    },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",
       "default": false
+    },
+    "skipPackageJson": {
+      "description": "Do not add dependencies to `package.json`.",
+      "type": "boolean",
+      "default": false
+    },
+    "keepExistingVersions": {
+      "type": "boolean",
+      "x-priority": "internal",
+      "description": "Keep existing dependencies versions",
+      "default": false
+    },
+    "updatePackageScripts": {
+      "type": "boolean",
+      "x-priority": "internal",
+      "description": "Update `package.json` scripts with inferred targets",
+      "default": false
     }
   },
   "required": []

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

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<void>;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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);
+}
+exports.default = default_1;

package/src/plugins/generate-package-json-plugin.d.ts

@@ -1,12 +1,14 @@
 import { type Compiler, type WebpackPluginInstance } from 'webpack';
-import { ExecutorContext } from '@nx/devkit';
+import { type ProjectGraph } from '@nx/devkit';
 export declare class GeneratePackageJsonPlugin implements WebpackPluginInstance {
     private readonly options;
-    private readonly context;
-    private readonly projectGraph;
     constructor(options: {
         tsConfig: string;
         outputFileName: string;
-    }, context: ExecutorContext);
+        root: string;
+        projectName: string;
+        targetName: string;
+        projectGraph: ProjectGraph;
+    });
     apply(compiler: Compiler): void;
 }

package/src/plugins/generate-package-json-plugin.js

@@ -4,13 +4,10 @@ exports.GeneratePackageJsonPlugin = void 0;
 const webpack_1 = require("webpack");
 const js_1 = require("@nx/js");
 const devkit_1 = require("@nx/devkit");
-const js_2 = require("@nx/js");
 const pluginName = 'GeneratePackageJsonPlugin';
 class GeneratePackageJsonPlugin {
-    constructor(options, context) {
+    constructor(options) {
         this.options = options;
-        this.context = context;
-        this.projectGraph = context.projectGraph;
     }
     apply(compiler) {
         compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
@@ -18,28 +15,28 @@ class GeneratePackageJsonPlugin {
                 name: pluginName,
                 stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
             }, () => {
-                const helperDependencies = (0, js_2.getHelperDependenciesFromProjectGraph)(this.context.root, this.context.projectName, this.projectGraph);
-                const importHelpers = !!(0, js_2.readTsConfig)(this.options.tsConfig).options
+                const helperDependencies = (0, js_1.getHelperDependenciesFromProjectGraph)(this.options.root, this.options.projectName, this.options.projectGraph);
+                const importHelpers = !!(0, js_1.readTsConfig)(this.options.tsConfig).options
                     .importHelpers;
                 const shouldAddHelperDependency = importHelpers &&
-                    helperDependencies.every((dep) => dep.target !== js_2.HelperDependency.tsc);
+                    helperDependencies.every((dep) => dep.target !== js_1.HelperDependency.tsc);
                 if (shouldAddHelperDependency) {
                     helperDependencies.push({
                         type: 'static',
-                        source: this.context.projectName,
-                        target: js_2.HelperDependency.tsc,
+                        source: this.options.projectName,
+                        target: js_1.HelperDependency.tsc,
                     });
                 }
-                const packageJson = (0, js_1.createPackageJson)(this.context.projectName, this.projectGraph, {
-                    target: this.context.targetName,
-                    root: this.context.root,
+                const packageJson = (0, js_1.createPackageJson)(this.options.projectName, this.options.projectGraph, {
+                    target: this.options.targetName,
+                    root: this.options.root,
                     isProduction: true,
                     helperDependencies: helperDependencies.map((dep) => dep.target),
                 });
                 packageJson.main = packageJson.main ?? this.options.outputFileName;
                 compilation.emitAsset('package.json', new webpack_1.sources.RawSource((0, devkit_1.serializeJson)(packageJson)));
-                const packageManager = (0, devkit_1.detectPackageManager)(this.context.root);
-                compilation.emitAsset((0, js_2.getLockFileName)(packageManager), new webpack_1.sources.RawSource((0, js_1.createLockFile)(packageJson, this.projectGraph, packageManager)));
+                const packageManager = (0, devkit_1.detectPackageManager)(this.options.root);
+                compilation.emitAsset((0, js_1.getLockFileName)(packageManager), new webpack_1.sources.RawSource((0, js_1.createLockFile)(packageJson, this.options.projectGraph, packageManager)));
             });
         });
     }

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

@@ -0,0 +1,8 @@
+import { Compiler } from 'webpack';
+export declare class NxTsconfigPathsWebpackPlugin {
+    private options;
+    constructor(options: {
+        tsConfig: string;
+    });
+    apply(compiler: Compiler): void;
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+class NxTsconfigPathsWebpackPlugin {
+    constructor(options) {
+        this.options = options;
+        if (!this.options.tsConfig)
+            throw new Error(`Missing "tsConfig" option. Set this option in your Nx webpack plugin.`);
+    }
+    apply(compiler) {
+        const extensions = new Set([
+            ...['.ts', '.tsx', '.mjs', '.js', '.jsx'],
+            ...(compiler.options?.resolve?.extensions ?? []),
+        ]);
+        compiler.options.resolve = {
+            ...compiler.options.resolve,
+            plugins: compiler.options.resolve?.plugins ?? [],
+        };
+        compiler.options.resolve.plugins.push(new tsconfig_paths_webpack_plugin_1.TsconfigPathsPlugin({
+            configFile: !path.isAbsolute(this.options.tsConfig)
+                ? path.join(devkit_1.workspaceRoot, this.options.tsConfig)
+                : this.options.tsConfig,
+            extensions: Array.from(extensions),
+            mainFields: ['module', 'main'],
+        }));
+    }
+}
+exports.NxTsconfigPathsWebpackPlugin = NxTsconfigPathsWebpackPlugin;

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

@@ -0,0 +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, }?: {
+    useNormalizedEntry?: boolean;
+}): void;

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

@@ -0,0 +1,318 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyBaseConfig = void 0;
+const path = require("path");
+const license_webpack_plugin_1 = require("license-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const webpack_1 = require("webpack");
+const js_1 = require("@nx/js");
+const stats_json_plugin_1 = require("../../stats-json-plugin");
+const generate_package_json_plugin_1 = require("../../generate-package-json-plugin");
+const hash_format_1 = require("../../../utils/hash-format");
+const nx_tsconfig_paths_webpack_plugin_1 = require("../../nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin");
+const get_terser_ecma_version_1 = require("./get-terser-ecma-version");
+const compiler_loaders_1 = require("./compiler-loaders");
+const TerserPlugin = require("terser-webpack-plugin");
+const nodeExternals = require("webpack-node-externals");
+const IGNORED_WEBPACK_WARNINGS = [
+    /The comment file/i,
+    /could not find any license/i,
+];
+const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
+const mainFields = ['module', 'main'];
+function applyBaseConfig(options, config = {}, { useNormalizedEntry, } = {}) {
+    // Defaults that was applied from executor schema previously.
+    options.compiler ??= 'babel';
+    options.deleteOutputPath ??= true;
+    options.externalDependencies ??= 'all';
+    options.fileReplacements ??= [];
+    options.memoryLimit ??= 2048;
+    options.transformers ??= [];
+    applyNxIndependentConfig(options, config);
+    // Some of the options only work during actual tasks, not when reading the webpack config during CreateNodes.
+    if (!process.env['NX_TASK_TARGET_PROJECT'])
+        return;
+    applyNxDependentConfig(options, config, { useNormalizedEntry });
+}
+exports.applyBaseConfig = applyBaseConfig;
+function applyNxIndependentConfig(options, config) {
+    const hashFormat = (0, hash_format_1.getOutputHashFormat)(options.outputHashing);
+    config.context = path.join(options.root, options.projectRoot);
+    config.target ??= options.target;
+    config.node = false;
+    config.mode =
+        // When the target is Node avoid any optimizations, such as replacing `process.env.NODE_ENV` with build time value.
+        config.target === 'node'
+            ? 'none'
+            : // Otherwise, make sure it matches `process.env.NODE_ENV`.
+                // When mode is development or production, webpack will automatically
+                // configure DefinePlugin to replace `process.env.NODE_ENV` with the
+                // build-time value. Thus, we need to make sure it's the same value to
+                // avoid conflicts.
+                //
+                // When the NODE_ENV is something else (e.g. test), then set it to none
+                // to prevent extra behavior from webpack.
+                process.env.NODE_ENV === 'development' ||
+                    process.env.NODE_ENV === 'production'
+                    ? process.env.NODE_ENV
+                    : 'none';
+    // When target is Node, the Webpack mode will be set to 'none' which disables in memory caching and causes a full rebuild on every change.
+    // So to mitigate this we enable in memory caching when target is Node and in watch mode.
+    config.cache =
+        options.target === 'node' && options.watch ? { type: 'memory' } : undefined;
+    config.devtool =
+        options.sourceMap === 'hidden'
+            ? 'hidden-source-map'
+            : options.sourceMap
+                ? 'source-map'
+                : false;
+    config.output = {
+        ...config.output,
+        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',
+        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',
+    };
+    config.watch = options.watch;
+    config.watchOptions = {
+        poll: options.poll,
+    };
+    config.profile = options.statsJson;
+    config.performance = {
+        ...config.performance,
+        hints: false,
+    };
+    config.experiments = { ...config.experiments, cacheUnaffected: true };
+    config.ignoreWarnings = [
+        (x) => IGNORED_WEBPACK_WARNINGS.some((r) => typeof x === 'string' ? r.test(x) : r.test(x.message)),
+    ];
+    config.optimization = {
+        ...config.optimization,
+        sideEffects: true,
+        minimize: typeof options.optimization === 'object'
+            ? !!options.optimization.scripts
+            : !!options.optimization,
+        minimizer: [
+            options.compiler !== 'swc'
+                ? new TerserPlugin({
+                    parallel: true,
+                    terserOptions: {
+                        keep_classnames: true,
+                        ecma: (0, get_terser_ecma_version_1.getTerserEcmaVersion)(path.join(options.root, options.projectRoot)),
+                        safari10: true,
+                        format: {
+                            ascii_only: true,
+                            comments: false,
+                            webkit: true,
+                        },
+                    },
+                    extractComments: false,
+                })
+                : new TerserPlugin({
+                    minify: TerserPlugin.swcMinify,
+                    // `terserOptions` options will be passed to `swc`
+                    terserOptions: {
+                        module: true,
+                        mangle: false,
+                    },
+                }),
+        ],
+        runtimeChunk: false,
+        concatenateModules: true,
+    };
+    config.stats = {
+        hash: true,
+        timings: false,
+        cached: false,
+        cachedAssets: false,
+        modules: false,
+        warnings: true,
+        errors: true,
+        colors: !options.verbose && !options.statsJson,
+        chunks: !options.verbose,
+        assets: !!options.verbose,
+        chunkOrigins: !!options.verbose,
+        chunkModules: !!options.verbose,
+        children: !!options.verbose,
+        reasons: !!options.verbose,
+        version: !!options.verbose,
+        errorDetails: !!options.verbose,
+        moduleTrace: !!options.verbose,
+        usedExports: !!options.verbose,
+    };
+}
+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 executorContext = {
+        projectName: options.projectName,
+        targetName: options.targetName,
+        projectGraph: options.projectGraph,
+        configurationName: options.configurationName,
+        root: options.root,
+    };
+    if (!options?.skipTypeChecking) {
+        const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+        plugins.push(new ForkTsCheckerWebpackPlugin({
+            typescript: {
+                configFile: path.isAbsolute(tsConfig)
+                    ? tsConfig
+                    : path.join(options.root, tsConfig),
+                memoryLimit: options.memoryLimit || 2018,
+            },
+        }));
+    }
+    const entries = [];
+    if (options.main) {
+        const mainEntry = options.outputFileName
+            ? path.parse(options.outputFileName).name
+            : 'main';
+        entries.push({
+            name: mainEntry,
+            import: [path.resolve(options.root, options.main)],
+        });
+    }
+    if (options.additionalEntryPoints) {
+        for (const { entryName, entryPath } of options.additionalEntryPoints) {
+            entries.push({
+                name: entryName,
+                import: [path.resolve(options.root, entryPath)],
+            });
+        }
+    }
+    if (options.polyfills) {
+        entries.push({
+            name: 'polyfills',
+            import: [path.resolve(options.root, options.polyfills)],
+        });
+    }
+    config.entry ??= {};
+    entries.forEach((entry) => {
+        if (useNormalizedEntry) {
+            config.entry[entry.name] = { import: entry.import };
+        }
+        else {
+            config.entry[entry.name] = entry.import;
+        }
+    });
+    if (options.progress) {
+        plugins.push(new webpack_1.ProgressPlugin({ profile: options.verbose }));
+    }
+    if (options.extractLicenses) {
+        plugins.push(new license_webpack_plugin_1.LicenseWebpackPlugin({
+            stats: {
+                warnings: false,
+                errors: false,
+            },
+            perChunkOutput: false,
+            outputFilename: `3rdpartylicenses.txt`,
+        }));
+    }
+    if (Array.isArray(options.assets) && options.assets.length > 0) {
+        plugins.push(new CopyWebpackPlugin({
+            patterns: options.assets.map((asset) => {
+                return {
+                    context: asset.input,
+                    // Now we remove starting slash to make Webpack place it from the output root.
+                    to: asset.output,
+                    from: asset.glob,
+                    globOptions: {
+                        ignore: [
+                            '.gitkeep',
+                            '**/.DS_Store',
+                            '**/Thumbs.db',
+                            ...(asset.ignore ?? []),
+                        ],
+                        dot: true,
+                    },
+                };
+            }),
+        }));
+    }
+    if (options.generatePackageJson && executorContext) {
+        plugins.push(new generate_package_json_plugin_1.GeneratePackageJsonPlugin({ ...options, tsConfig }));
+    }
+    if (options.statsJson) {
+        plugins.push(new stats_json_plugin_1.StatsJsonPlugin());
+    }
+    const externals = [];
+    if (options.target === 'node' && options.externalDependencies === 'all') {
+        const modulesDir = `${options.root}/node_modules`;
+        externals.push(nodeExternals({ modulesDir }));
+    }
+    else if (Array.isArray(options.externalDependencies)) {
+        externals.push(function (ctx, callback) {
+            if (options.externalDependencies.includes(ctx.request)) {
+                // not bundled
+                return callback(null, `commonjs ${ctx.request}`);
+            }
+            // bundled
+            callback();
+        });
+    }
+    config.resolve = {
+        ...config.resolve,
+        extensions: [...(config?.resolve?.extensions ?? []), ...extensions],
+        alias: {
+            ...(config.resolve?.alias ?? {}),
+            ...(options.fileReplacements?.reduce((aliases, replacement) => ({
+                ...aliases,
+                [replacement.replace]: replacement.with,
+            }), {}) ?? {}),
+        },
+        mainFields: config.resolve?.mainFields ?? mainFields,
+    };
+    config.externals = externals;
+    config.module = {
+        ...config.module,
+        // Enabled for performance
+        unsafeCache: true,
+        rules: [
+            ...(config?.module?.rules ?? []),
+            options.sourceMap && {
+                test: /\.js$/,
+                enforce: 'pre',
+                loader: require.resolve('source-map-loader'),
+            },
+            {
+                // There's an issue resolving paths without fully specified extensions
+                // See: https://github.com/graphql/graphql-js/issues/2721
+                // TODO(jack): Add a flag to turn this option on like Next.js does via experimental flag.
+                // See: https://github.com/vercel/next.js/pull/29880
+                test: /\.m?jsx?$/,
+                resolve: {
+                    fullySpecified: false,
+                },
+            },
+            // There's an issue when using buildable libs and .js files (instead of .ts files),
+            // where the wrong type is used (commonjs vs esm) resulting in export-imports throwing errors.
+            // See: https://github.com/nrwl/nx/issues/10990
+            {
+                test: /\.js$/,
+                type: 'javascript/auto',
+            },
+            (0, compiler_loaders_1.createLoaderFromCompiler)(options),
+        ].filter((r) => !!r),
+    };
+    config.plugins ??= [];
+    config.plugins.push(...plugins);
+}

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

@@ -0,0 +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, }?: {
+    useNormalizedEntry?: boolean;
+}): void;