@nx/webpack 17.2.0-beta.8 → 17.2.0-beta.9

package/src/generators/configuration/configuration.js

@@ -3,16 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.configurationGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
 const init_1 = require("../init/init");
+const has_plugin_1 = require("../../utils/has-plugin");
 async function configurationGenerator(tree, options) {
     const task = await (0, init_1.webpackInitGenerator)(tree, {
         ...options,
         skipFormat: true,
     });
     checkForTargetConflicts(tree, options);
-    addBuildTarget(tree, options);
-    if (options.devServer) {
-        addServeTarget(tree, options);
+    if (!(0, has_plugin_1.hasPlugin)(tree)) {
+        addBuildTarget(tree, options);
+        if (options.devServer) {
+            addServeTarget(tree, options);
+        }
     }
+    createWebpackConfig(tree, options);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
@@ -30,7 +34,7 @@ function checkForTargetConflicts(tree, options) {
         throw new Error(`Project "${project.name}" already has a serve target. Pass --skipValidation to ignore this error.`);
     }
 }
-function addBuildTarget(tree, options) {
+function createWebpackConfig(tree, options) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const buildOptions = {
         target: options.target,
@@ -40,20 +44,26 @@ function addBuildTarget(tree, options) {
         tsConfig: options.tsConfig ?? (0, devkit_1.joinPathFragments)(project.root, 'tsconfig.app.json'),
         webpackConfig: (0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'),
     };
-    if (options.webpackConfig) {
-        buildOptions.webpackConfig = options.webpackConfig;
-    }
-    if (options.babelConfig) {
-        buildOptions.babelConfig = options.babelConfig;
-    }
-    else if (options.compiler === 'babel') {
-        // If no babel config file is provided then write a default one, otherwise build will fail.
-        (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(project.root, '.babelrc'), {
-            presets: ['@nx/js/babel'],
-        });
-    }
     if (options.target === 'web') {
-        tree.write((0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'), `
+        tree.write((0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'), (0, has_plugin_1.hasPlugin)(tree)
+            ? `
+const { NxWebpackPlugin } = require('@nx/webpack');
+
+module.exports = {
+  output: {
+    path: '${buildOptions.outputPath}',
+  },
+  plugins: [
+    new NxWebpackPlugin({
+      target: '${buildOptions.target}',
+      tsConfig: '${buildOptions.tsConfig}',
+      compiler: '${buildOptions.compiler}',
+      main: '${buildOptions.main}',
+    })
+  ],
+}
+`
+            : `
 const { composePlugins, withNx, withWeb } = require('@nx/webpack');
 
 // Nx plugins for webpack.
@@ -65,7 +75,25 @@ module.exports = composePlugins(withNx(), withWeb(), (config) => {
 `);
     }
     else {
-        tree.write((0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'), `
+        tree.write((0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'), (0, has_plugin_1.hasPlugin)(tree)
+            ? `
+const { NxWebpackPlugin } = require('@nx/webpack');
+
+module.exports = {
+  output: {
+    path: '${buildOptions.outputPath}',
+  },
+  plugins: [
+    new NxWebpackPlugin({
+      target: '${buildOptions.target}',
+      tsConfig: '${buildOptions.tsConfig}',
+      compiler: '${buildOptions.compiler}',
+      main: '${buildOptions.main}',
+    })
+  ],
+}
+`
+            : `
 const { composePlugins, withNx } = require('@nx/webpack');
 
 // Nx plugins for webpack.
@@ -76,6 +104,29 @@ module.exports = composePlugins(withNx(), (config) => {
 });
 `);
     }
+}
+function addBuildTarget(tree, options) {
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    const buildOptions = {
+        target: options.target,
+        outputPath: (0, devkit_1.joinPathFragments)('dist', project.root),
+        compiler: options.compiler ?? 'swc',
+        main: options.main ?? (0, devkit_1.joinPathFragments)(project.root, 'src/main.ts'),
+        tsConfig: options.tsConfig ?? (0, devkit_1.joinPathFragments)(project.root, 'tsconfig.app.json'),
+        webpackConfig: (0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'),
+    };
+    if (options.webpackConfig) {
+        buildOptions.webpackConfig = options.webpackConfig;
+    }
+    if (options.babelConfig) {
+        buildOptions.babelConfig = options.babelConfig;
+    }
+    else if (options.compiler === 'babel') {
+        // If no babel config file is provided then write a default one, otherwise build will fail.
+        (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(project.root, '.babelrc'), {
+            presets: ['@nx/js/babel'],
+        });
+    }
     (0, devkit_1.updateProjectConfiguration)(tree, options.project, {
         ...project,
         targets: {

package/src/generators/init/init.js

@@ -5,10 +5,14 @@ const devkit_1 = require("@nx/devkit");
 const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencies");
 const versions_1 = require("../../utils/versions");
 async function webpackInitGenerator(tree, schema) {
+    const shouldAddPlugin = process.env.NX_PCV3 === 'true';
     const tasks = [];
     const devDependencies = {
         '@nx/webpack': versions_1.nxVersion,
     };
+    if (shouldAddPlugin) {
+        devDependencies['webpack-cli'] = versions_1.webpackCliVersion;
+    }
     if (schema.compiler === 'swc') {
         devDependencies['swc-loader'] = versions_1.swcLoaderVersion;
         const addSwcTask = (0, add_swc_dependencies_1.addSwcDependencies)(tree);
@@ -27,9 +31,31 @@ async function webpackInitGenerator(tree, schema) {
     if (!schema.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
-    const baseInstalTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDependencies);
-    tasks.push(baseInstalTask);
+    const baseInstallTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDependencies);
+    tasks.push(baseInstallTask);
+    if (shouldAddPlugin)
+        addPlugin(tree);
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.webpackInitGenerator = webpackInitGenerator;
+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-webpack-plugin/lib/apply-base-config.js

@@ -5,6 +5,7 @@ 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");
@@ -21,8 +22,143 @@ const IGNORED_WEBPACK_WARNINGS = [
 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,
+        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(options),
+        new nx_tsconfig_paths_webpack_plugin_1.NxTsconfigPathsWebpackPlugin({ tsConfig }),
     ];
     const executorContext = {
         projectName: options.projectName,
@@ -34,9 +170,9 @@ function applyBaseConfig(options, config = {}, { useNormalizedEntry, } = {}) {
     if (!options?.skipTypeChecking) {
         plugins.push(new ForkTsCheckerWebpackPlugin({
             typescript: {
-                configFile: path.isAbsolute(options.tsConfig)
-                    ? options.tsConfig
-                    : path.join(options.root, options.tsConfig),
+                configFile: path.isAbsolute(tsConfig)
+                    ? tsConfig
+                    : path.join(options.root, tsConfig),
                 memoryLimit: options.memoryLimit || 2018,
             },
         }));
@@ -109,7 +245,7 @@ function applyBaseConfig(options, config = {}, { useNormalizedEntry, } = {}) {
         }));
     }
     if (options.generatePackageJson && executorContext) {
-        plugins.push(new generate_package_json_plugin_1.GeneratePackageJsonPlugin(options));
+        plugins.push(new generate_package_json_plugin_1.GeneratePackageJsonPlugin({ ...options, tsConfig }));
     }
     if (options.statsJson) {
         plugins.push(new stats_json_plugin_1.StatsJsonPlugin());
@@ -129,113 +265,17 @@ function applyBaseConfig(options, config = {}, { useNormalizedEntry, } = {}) {
             callback();
         });
     }
-    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,
-        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.resolve = {
         ...config.resolve,
         extensions: [...extensions, ...(config?.resolve?.extensions ?? [])],
-        alias: options.fileReplacements.reduce((aliases, replacement) => ({
-            ...aliases,
-            [replacement.replace]: replacement.with,
-        }), {}),
+        alias: options.fileReplacements &&
+            options.fileReplacements.reduce((aliases, replacement) => ({
+                ...aliases,
+                [replacement.replace]: replacement.with,
+            }), {}),
         mainFields,
     };
     config.externals = externals;
-    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.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.module = {
         ...config.module,
         // Enabled for performance
@@ -267,27 +307,6 @@ function applyBaseConfig(options, config = {}, { useNormalizedEntry, } = {}) {
             (0, compiler_loaders_1.createLoaderFromCompiler)(options),
         ].filter((r) => !!r),
     };
-    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,
-    };
     config.plugins ??= [];
     config.plugins.push(...plugins);
 }
-exports.applyBaseConfig = applyBaseConfig;

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

@@ -13,6 +13,14 @@ const instantiate_script_plugins_1 = require("./instantiate-script-plugins");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
+    if (!process.env['NX_TASK_TARGET_PROJECT'])
+        return;
+    // Defaults that was applied from executor schema previously.
+    options.runtimeChunk ??= true; // need this for HMR and other things to work
+    options.extractCss ??= true;
+    options.generateIndexHtml ??= true;
+    options.styles ??= [];
+    options.scripts ??= [];
     const plugins = [];
     const stylesOptimization = typeof options.optimization === 'object'
         ? options.optimization.styles

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

@@ -32,9 +32,11 @@ function normalizeOptions(options) {
     else {
         Object.assign(combinedOptions, originalTargetOptions, options);
     }
+    normalizeRelativePaths(projectNode.data.root, options);
     const sourceRoot = projectNode.data.sourceRoot ?? projectNode.data.root;
-    if (!options.main)
+    if (!options.main) {
         throw new Error(`Missing "main" option for the entry file. Set this option in your Nx webpack plugin.`);
+    }
     return {
         ...options,
         assets: options.assets
@@ -115,3 +117,23 @@ function normalizeFileReplacements(root, fileReplacements) {
         : [];
 }
 exports.normalizeFileReplacements = normalizeFileReplacements;
+function normalizeRelativePaths(projectRoot, options) {
+    for (const [fieldName, fieldValue] of Object.entries(options)) {
+        if (isRelativePath(fieldValue)) {
+            options[fieldName] = (0, path_1.join)(projectRoot, fieldValue);
+        }
+        else if (Array.isArray(fieldValue)) {
+            for (let i = 0; i < fieldValue.length; i++) {
+                if (isRelativePath(fieldValue[i])) {
+                    fieldValue[i] = (0, path_1.join)(projectRoot, fieldValue[i]);
+                }
+            }
+        }
+    }
+}
+function isRelativePath(val) {
+    return (typeof val === 'string' &&
+        (val.startsWith('./') ||
+            // Windows
+            val.startsWith('.\\')));
+}