@nx/webpack 17.0.2 → 17.0.4

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

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeFileReplacements = exports.normalizeAssets = exports.normalizeOptions = void 0;
+const path_1 = require("path");
+const fs_1 = require("fs");
+const devkit_1 = require("@nx/devkit");
+function normalizeOptions(options) {
+    const combinedPluginAndMaybeExecutorOptions = {};
+    const isProd = process.env.NODE_ENV === 'production';
+    const projectName = process.env.NX_TASK_TARGET_PROJECT;
+    const targetName = process.env.NX_TASK_TARGET_TARGET;
+    const configurationName = process.env.NX_TASK_TARGET_CONFIGURATION;
+    // Since this is invoked by the executor, the graph has already been created and cached.
+    const projectGraph = (0, devkit_1.readCachedProjectGraph)();
+    const projectNode = projectGraph.nodes[projectName];
+    const targetConfig = projectNode.data.targets[targetName];
+    normalizeRelativePaths(projectNode.data.root, options);
+    // Merge options from `@nx/webpack:webpack` into plugin options.
+    // Options from `@nx/webpack:webpack` take precedence.
+    const originalTargetOptions = targetConfig.options;
+    if (configurationName) {
+        Object.assign(originalTargetOptions, targetConfig.configurations?.[configurationName]);
+    }
+    // This could be called from dev-server which means we need to read `buildTarget` to get actual build options.
+    // Otherwise, the options are passed from the `@nx/webpack:webpack` executor.
+    if (originalTargetOptions.buildTarget) {
+        const buildTargetOptions = targetConfig.options;
+        if (configurationName) {
+            Object.assign(buildTargetOptions, targetConfig.configurations?.[configurationName]);
+        }
+        Object.assign(combinedPluginAndMaybeExecutorOptions, options, 
+        // executor options take precedence (especially for overriding with CLI args)
+        buildTargetOptions);
+    }
+    else {
+        Object.assign(combinedPluginAndMaybeExecutorOptions, options, 
+        // executor options take precedence (especially for overriding with CLI args)
+        originalTargetOptions);
+    }
+    const sourceRoot = projectNode.data.sourceRoot ?? projectNode.data.root;
+    if (!options.main) {
+        throw new Error(`Missing "main" option for the entry file. Set this option in your Nx webpack plugin.`);
+    }
+    return {
+        ...combinedPluginAndMaybeExecutorOptions,
+        assets: combinedPluginAndMaybeExecutorOptions.assets
+            ? normalizeAssets(combinedPluginAndMaybeExecutorOptions.assets, devkit_1.workspaceRoot, sourceRoot, projectNode.data.root)
+            : [],
+        baseHref: combinedPluginAndMaybeExecutorOptions.baseHref ?? '/',
+        commonChunk: combinedPluginAndMaybeExecutorOptions.commonChunk ?? true,
+        compiler: combinedPluginAndMaybeExecutorOptions.compiler ?? 'babel',
+        configurationName,
+        deleteOutputPath: combinedPluginAndMaybeExecutorOptions.deleteOutputPath ?? true,
+        extractCss: combinedPluginAndMaybeExecutorOptions.extractCss ?? true,
+        fileReplacements: normalizeFileReplacements(devkit_1.workspaceRoot, combinedPluginAndMaybeExecutorOptions.fileReplacements),
+        generateIndexHtml: combinedPluginAndMaybeExecutorOptions.generateIndexHtml ?? true,
+        main: combinedPluginAndMaybeExecutorOptions.main,
+        namedChunks: combinedPluginAndMaybeExecutorOptions.namedChunks ?? !isProd,
+        optimization: combinedPluginAndMaybeExecutorOptions.optimization ?? isProd,
+        outputFileName: combinedPluginAndMaybeExecutorOptions.outputFileName ?? 'main.js',
+        outputHashing: combinedPluginAndMaybeExecutorOptions.outputHashing ??
+            (isProd ? 'all' : 'none'),
+        outputPath: combinedPluginAndMaybeExecutorOptions.outputPath,
+        projectGraph,
+        projectName,
+        projectRoot: projectNode.data.root,
+        root: devkit_1.workspaceRoot,
+        runtimeChunk: combinedPluginAndMaybeExecutorOptions.runtimeChunk ?? true,
+        scripts: combinedPluginAndMaybeExecutorOptions.scripts ?? [],
+        sourceMap: combinedPluginAndMaybeExecutorOptions.sourceMap ?? !isProd,
+        sourceRoot,
+        styles: combinedPluginAndMaybeExecutorOptions.styles ?? [],
+        target: combinedPluginAndMaybeExecutorOptions.target,
+        targetName,
+        vendorChunk: combinedPluginAndMaybeExecutorOptions.vendorChunk ?? !isProd,
+    };
+}
+exports.normalizeOptions = normalizeOptions;
+function normalizeAssets(assets, root, sourceRoot, projectRoot, resolveRelativePathsToProjectRoot = true) {
+    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);
+            let resolvedAssetPath = (0, path_1.resolve)(root, assetPath);
+            if (resolveRelativePathsToProjectRoot && asset.input.startsWith('.')) {
+                const resolvedProjectRoot = (0, path_1.resolve)(root, projectRoot);
+                resolvedAssetPath = (0, path_1.resolve)(resolvedProjectRoot, 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;
+function normalizeFileReplacements(root, fileReplacements) {
+    return fileReplacements
+        ? fileReplacements.map((fileReplacement) => ({
+            replace: (0, path_1.resolve)(root, fileReplacement.replace),
+            with: (0, path_1.resolve)(root, fileReplacement.with),
+        }))
+        : [];
+}
+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('.\\')));
+}

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

@@ -0,0 +1,73 @@
+import { getCSSModuleLocalIdent } from '../../../utils/get-css-module-local-ident';
+import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
+interface PostcssOptions {
+    (loader: any): any;
+    config?: string;
+}
+export declare function getCommonLoadersForCssModules(options: NormalizedNxWebpackPluginOptions, includePaths: string[]): ({
+    loader: any;
+    options?: undefined;
+} | {
+    loader: string;
+    options: {
+        modules: {
+            mode: string;
+            getLocalIdent: typeof getCSSModuleLocalIdent;
+        };
+        importLoaders: number;
+        implementation?: undefined;
+        postcssOptions?: undefined;
+    };
+} | {
+    loader: string;
+    options: {
+        implementation: any;
+        postcssOptions: PostcssOptions;
+        modules?: undefined;
+        importLoaders?: undefined;
+    };
+})[];
+export declare function getCommonLoadersForGlobalCss(options: NormalizedNxWebpackPluginOptions, includePaths: string[]): ({
+    loader: any;
+    options?: undefined;
+} | {
+    loader: string;
+    options: {
+        url: boolean;
+        implementation?: undefined;
+        postcssOptions?: undefined;
+    };
+} | {
+    loader: string;
+    options: {
+        implementation: any;
+        postcssOptions: PostcssOptions;
+        url?: undefined;
+    };
+})[];
+export declare function getCommonLoadersForGlobalStyle(options: NormalizedNxWebpackPluginOptions, includePaths: string[]): ({
+    loader: any;
+    options: {
+        esModule: boolean;
+        url?: undefined;
+        implementation?: undefined;
+        postcssOptions?: undefined;
+    };
+} | {
+    loader: string;
+    options: {
+        url: boolean;
+        esModule?: undefined;
+        implementation?: undefined;
+        postcssOptions?: undefined;
+    };
+} | {
+    loader: string;
+    options: {
+        implementation: any;
+        postcssOptions: PostcssOptions;
+        esModule?: undefined;
+        url?: undefined;
+    };
+})[];
+export {};

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

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCommonLoadersForGlobalStyle = exports.getCommonLoadersForGlobalCss = exports.getCommonLoadersForCssModules = void 0;
+const path = require("path");
+const autoprefixer = require("autoprefixer");
+const postcssImports = require("postcss-import");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const get_css_module_local_ident_1 = require("../../../utils/get-css-module-local-ident");
+const hash_format_1 = require("../../../utils/hash-format");
+const postcss_cli_resources_1 = require("../../../utils/webpack/plugins/postcss-cli-resources");
+function getCommonLoadersForCssModules(options, includePaths) {
+    // load component css as raw strings
+    return [
+        {
+            loader: options.extractCss
+                ? MiniCssExtractPlugin.loader
+                : require.resolve('style-loader'),
+        },
+        {
+            loader: require.resolve('css-loader'),
+            options: {
+                modules: {
+                    mode: 'local',
+                    getLocalIdent: get_css_module_local_ident_1.getCSSModuleLocalIdent,
+                },
+                importLoaders: 1,
+            },
+        },
+        {
+            loader: require.resolve('postcss-loader'),
+            options: {
+                implementation: require('postcss'),
+                postcssOptions: postcssOptionsCreator(options, {
+                    includePaths,
+                    forCssModules: true,
+                }),
+            },
+        },
+    ];
+}
+exports.getCommonLoadersForCssModules = getCommonLoadersForCssModules;
+function getCommonLoadersForGlobalCss(options, includePaths) {
+    return [
+        {
+            loader: options.extractCss
+                ? MiniCssExtractPlugin.loader
+                : require.resolve('style-loader'),
+        },
+        { loader: require.resolve('css-loader'), options: { url: false } },
+        {
+            loader: require.resolve('postcss-loader'),
+            options: {
+                implementation: require('postcss'),
+                postcssOptions: postcssOptionsCreator(options, {
+                    includePaths,
+                }),
+            },
+        },
+    ];
+}
+exports.getCommonLoadersForGlobalCss = getCommonLoadersForGlobalCss;
+function getCommonLoadersForGlobalStyle(options, includePaths) {
+    return [
+        {
+            loader: options.extractCss
+                ? MiniCssExtractPlugin.loader
+                : require.resolve('style-loader'),
+            options: { esModule: true },
+        },
+        { loader: require.resolve('css-loader'), options: { url: false } },
+        {
+            loader: require.resolve('postcss-loader'),
+            options: {
+                implementation: require('postcss'),
+                postcssOptions: postcssOptionsCreator(options, {
+                    includePaths,
+                }),
+            },
+        },
+    ];
+}
+exports.getCommonLoadersForGlobalStyle = getCommonLoadersForGlobalStyle;
+function postcssOptionsCreator(options, { includePaths, forCssModules = false, }) {
+    const hashFormat = (0, hash_format_1.getOutputHashFormat)(options.outputHashing);
+    // PostCSS options depend on the webpack loader, but we need to set the `config` path as a string due to this check:
+    // https://github.com/webpack-contrib/postcss-loader/blob/0d342b1/src/utils.js#L36
+    const postcssOptions = (loader) => ({
+        map: options.sourceMap &&
+            options.sourceMap !== 'hidden' && {
+            inline: true,
+            annotation: false,
+        },
+        plugins: [
+            postcssImports({
+                addModulesDirectories: includePaths,
+                resolve: (url) => (url.startsWith('~') ? url.slice(1) : url),
+            }),
+            ...(forCssModules
+                ? []
+                : [
+                    (0, postcss_cli_resources_1.PostcssCliResources)({
+                        baseHref: options.baseHref,
+                        deployUrl: options.deployUrl,
+                        loader,
+                        filename: `[name]${hashFormat.file}.[ext]`,
+                    }),
+                    autoprefixer(),
+                ]),
+        ],
+    });
+    // If a path to postcssConfig is passed in, set it for app and all libs, otherwise
+    // use automatic detection.
+    if (typeof options.postcssConfig === 'string') {
+        postcssOptions.config = path.join(options.root, options.postcssConfig);
+    }
+    return postcssOptions;
+}

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

@@ -0,0 +1,216 @@
+import { ProjectGraph } from '@nx/devkit';
+import { AssetGlob } from '@nx/js/src/utils/assets/assets';
+export interface AssetGlobPattern {
+    glob: string;
+    input: string;
+    output: string;
+    ignore?: string[];
+}
+export interface ExtraEntryPointClass {
+    bundleName?: string;
+    inject?: boolean;
+    input: string;
+    lazy?: boolean;
+}
+export interface FileReplacement {
+    replace: string;
+    with: string;
+}
+export interface AdditionalEntryPoint {
+    entryName: string;
+    entryPath: string;
+}
+export interface TransformerPlugin {
+    name: string;
+    options: Record<string, unknown>;
+}
+export type TransformerEntry = string | TransformerPlugin;
+export interface OptimizationOptions {
+    scripts: boolean;
+    styles: boolean;
+}
+export interface NxWebpackPluginOptions {
+    /**
+     * The tsconfig file for the project. e.g. `tsconfig.json`
+     */
+    tsConfig?: string;
+    /**
+     * The entry point for the bundle. e.g. `src/main.ts`
+     */
+    main?: string;
+    /**
+     * Secondary entry points for the bundle.
+     */
+    additionalEntryPoints?: AdditionalEntryPoint[];
+    /**
+     * Assets to be copied over to the output path.
+     */
+    assets?: Array<AssetGlob | string>;
+    /**
+     * Babel configuration file if compiler is babel.
+     */
+    babelConfig?: string;
+    /**
+     * If true, Babel will look for a babel.config.json up the directory tree.
+     */
+    babelUpwardRootMode?: boolean;
+    /**
+     * Set <base href> for the resulting index.html.
+     */
+    baseHref?: string;
+    commonChunk?: boolean;
+    /**
+     * The compiler to use. Default is `babel` and requires a `.babelrc` file.
+     */
+    compiler?: 'babel' | 'swc' | 'tsc';
+    /**
+     * Set `crossorigin` attribute on the `script` and `link` tags.
+     */
+    crossOrigin?: 'none' | 'anonymous' | 'use-credentials';
+    /**
+     * Delete the output path before building.
+     */
+    deleteOutputPath?: boolean;
+    /**
+     * The deploy path for the application. e.g. `/my-app/`
+     */
+    deployUrl?: string;
+    /**
+     * Define external packages that will not be bundled.
+     * Use `all` to exclude all 3rd party packages, and `none` to bundle all packages.
+     * Use an array to exclude specific packages from the bundle.
+     * Default is `none`.
+     */
+    externalDependencies?: 'all' | 'none' | string[];
+    /**
+     * Extract CSS as an external file. Default is `true`.
+     */
+    extractCss?: boolean;
+    /**
+     * Extract licenses from 3rd party modules and add them to the output.
+     */
+    extractLicenses?: boolean;
+    /**
+     * Replace files at build time. e.g. `[{ "replace": "src/a.dev.ts", "with": "src/a.prod.ts" }]`
+     */
+    fileReplacements?: FileReplacement[];
+    /**
+     * Generate an `index.html` file if `index.html` is passed. Default is `true`
+     */
+    generateIndexHtml?: boolean;
+    /**
+     * Generate a `package.json` file for the bundle. Useful for Node applications.
+     */
+    generatePackageJson?: boolean;
+    /**
+     * Path to the `index.html`.
+     */
+    index?: string;
+    /**
+     * Set the memory limit for the type-checking process. Default is `2048`.
+     */
+    memoryLimit?: number;
+    /**
+     * Use the source file name in output chunks. Useful for development or for Node.
+     */
+    namedChunks?: boolean;
+    /**
+     * Optimize the bundle using Terser.
+     */
+    optimization?: boolean | OptimizationOptions;
+    /**
+     * Specify the output filename for the bundle. Useful for Node applications that use `@nx/js:node` to serve.
+     */
+    outputFileName?: string;
+    /**
+     * Use file hashes in the output filenames. Recommended for production web applications.
+     */
+    outputHashing?: any;
+    /**
+     * Override `output.path` in webpack configuration. This setting is not recommended and exists for backwards compatibility.
+     */
+    outputPath?: string;
+    /**
+     * Override `watchOptions.poll` in webpack configuration. This setting is not recommended and exists for backwards compatibility.
+     */
+    poll?: number;
+    /**
+     * The polyfill file to use. Useful for supporting legacy browsers. e.g. `src/polyfills.ts`
+     */
+    polyfills?: string;
+    /**
+     * Manually set the PostCSS configuration file. By default, PostCSS will look for `postcss.config.js` in the directory.
+     */
+    postcssConfig?: string;
+    /**
+     * Display build progress in the terminal.
+     */
+    progress?: boolean;
+    /**
+     * Add an additional chunk for the Webpack runtime. Defaults to `true` when `target === 'web'`.
+     */
+    runtimeChunk?: boolean;
+    /**
+     * External scripts that will be included before the main application entry.
+     */
+    scripts?: Array<ExtraEntryPointClass | string>;
+    /**
+     * Skip type checking. Default is `false`.
+     */
+    skipTypeChecking?: boolean;
+    /**
+     * Generate source maps.
+     */
+    sourceMap?: boolean | 'hidden';
+    /**
+     * When `true`, `process.env.NODE_ENV` will be excluded from the bundle. Useful for building a web application to run in a Node environment.
+     */
+    ssr?: boolean;
+    /**
+     * Generate a `stats.json` file which can be analyzed using tools such as `webpack-bundle-analyzer`.
+     */
+    statsJson?: boolean;
+    /**
+     * Options for the style preprocessor. e.g. `{ "includePaths": [] }` for SASS.
+     */
+    stylePreprocessorOptions?: any;
+    /**
+     * External stylesheets that will be included with the application.
+     */
+    styles?: Array<ExtraEntryPointClass | string>;
+    /**
+     * Enables the use of subresource integrity validation.
+     */
+    subresourceIntegrity?: boolean;
+    /**
+     * Override the `target` option in webpack configuration. This setting is not recommended and exists for backwards compatibility.
+     */
+    target?: string | string[];
+    /**
+     * List of TypeScript Compiler Transformers Plugins.
+     */
+    transformers?: TransformerEntry[];
+    /**
+     * Generate a separate vendor chunk for 3rd party packages.
+     */
+    vendorChunk?: boolean;
+    /**
+     * Log additional information for debugging purposes.
+     */
+    verbose?: boolean;
+    /**
+     * Watch for file changes.
+     */
+    watch?: boolean;
+}
+export interface NormalizedNxWebpackPluginOptions extends NxWebpackPluginOptions {
+    projectName: string;
+    root: string;
+    projectRoot: string;
+    sourceRoot: string;
+    configurationName: string;
+    targetName: string;
+    projectGraph: ProjectGraph;
+    outputFileName: string;
+    assets: AssetGlobPattern[];
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,17 @@
+import { Compiler } from 'webpack';
+import { NxWebpackPluginOptions } from './nx-webpack-plugin-options';
+/**
+ * This plugin provides features to build Node and Web applications.
+ * - TS support (including tsconfig paths)
+ * - Different compiler options
+ * - Assets handling
+ * - Stylesheets handling
+ * - index.html and package.json generation
+ *
+ * Web-only features, such as stylesheets and images, are only supported when `target` is 'web' or 'webworker'.
+ */
+export declare class NxWebpackPlugin {
+    private readonly options;
+    constructor(options?: NxWebpackPluginOptions);
+    apply(compiler: Compiler): void;
+}

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NxWebpackPlugin = void 0;
+const normalize_options_1 = require("./lib/normalize-options");
+const fs_1 = require("../../utils/fs");
+const apply_base_config_1 = require("./lib/apply-base-config");
+const apply_web_config_1 = require("./lib/apply-web-config");
+/**
+ * This plugin provides features to build Node and Web applications.
+ * - TS support (including tsconfig paths)
+ * - Different compiler options
+ * - Assets handling
+ * - Stylesheets handling
+ * - index.html and package.json generation
+ *
+ * Web-only features, such as stylesheets and images, are only supported when `target` is 'web' or 'webworker'.
+ */
+class NxWebpackPlugin {
+    constructor(options = {}) {
+        // If we're building inferred targets, skip normalizing build options.
+        if (!global.NX_GRAPH_CREATION) {
+            this.options = (0, normalize_options_1.normalizeOptions)(options);
+        }
+    }
+    apply(compiler) {
+        // Defaults to 'web' if not specified to match Webpack's default.
+        const target = this.options.target ?? compiler.options.target ?? 'web';
+        this.options.outputPath ??= compiler.options.output?.path;
+        if (typeof target === 'string') {
+            this.options.target = target;
+        }
+        (0, apply_base_config_1.applyBaseConfig)(this.options, compiler.options, {
+            useNormalizedEntry: true,
+        });
+        if (compiler.options.target) {
+            this.options.target = compiler.options.target;
+        }
+        if (this.options.target === 'web' || this.options.target === 'webworker') {
+            (0, apply_web_config_1.applyWebConfig)(this.options, compiler.options, {
+                useNormalizedEntry: true,
+            });
+        }
+        if (this.options.deleteOutputPath) {
+            (0, fs_1.deleteOutputDir)(this.options.root, this.options.outputPath);
+        }
+    }
+}
+exports.NxWebpackPlugin = NxWebpackPlugin;

package/src/plugins/plugin.d.ts

@@ -0,0 +1,9 @@
+import { CreateDependencies, CreateNodes } from '@nx/devkit';
+export interface WebpackPluginOptions {
+    buildTargetName?: string;
+    serveTargetName?: string;
+    serveStaticTargetName?: string;
+    previewTargetName?: string;
+}
+export declare const createDependencies: CreateDependencies;
+export declare const createNodes: CreateNodes<WebpackPluginOptions>;