@nx/webpack 17.1.0-beta.4 → 17.1.0-beta.5

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

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 combinedOptions = {};
+    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];
+    // 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(combinedOptions, buildTargetOptions);
+    }
+    else {
+        Object.assign(combinedOptions, originalTargetOptions, options);
+    }
+    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 {
+        ...options,
+        assets: options.assets
+            ? normalizeAssets(options.assets, devkit_1.workspaceRoot, sourceRoot)
+            : [],
+        baseHref: options.baseHref ?? '/',
+        commonChunk: options.commonChunk ?? true,
+        compiler: options.compiler ?? 'babel',
+        configurationName,
+        deleteOutputPath: options.deleteOutputPath ?? true,
+        extractCss: options.extractCss ?? true,
+        fileReplacements: normalizeFileReplacements(devkit_1.workspaceRoot, options.fileReplacements),
+        generateIndexHtml: options.generateIndexHtml ?? true,
+        main: options.main,
+        namedChunks: options.namedChunks ?? !isProd,
+        optimization: options.optimization ?? isProd,
+        outputFileName: options.outputFileName ?? 'main.js',
+        outputHashing: options.outputHashing ?? (isProd ? 'all' : 'none'),
+        outputPath: options.outputPath,
+        projectGraph,
+        projectName,
+        projectRoot: projectNode.data.root,
+        root: devkit_1.workspaceRoot,
+        runtimeChunk: options.runtimeChunk ?? true,
+        scripts: options.scripts ?? [],
+        sourceMap: options.sourceMap ?? !isProd,
+        sourceRoot,
+        styles: options.styles ?? [],
+        target: options.target ?? 'web',
+        targetName,
+        vendorChunk: options.vendorChunk ?? !isProd,
+    };
+}
+exports.normalizeOptions = normalizeOptions;
+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;
+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),
+        }))
+        : [];
+}

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,115 @@
+"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: MiniCssExtractPlugin.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,87 @@
+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 {
+    main: string;
+    outputPath: string;
+    tsConfig: string;
+    additionalEntryPoints?: AdditionalEntryPoint[];
+    assets?: Array<AssetGlob | string>;
+    babelConfig?: string;
+    babelUpwardRootMode?: boolean;
+    baseHref?: string;
+    commonChunk?: boolean;
+    compiler?: 'babel' | 'swc' | 'tsc';
+    crossOrigin?: 'none' | 'anonymous' | 'use-credentials';
+    deleteOutputPath?: boolean;
+    deployUrl?: string;
+    externalDependencies?: 'all' | 'none' | string[];
+    extractCss?: boolean;
+    extractLicenses?: boolean;
+    fileReplacements?: FileReplacement[];
+    generateIndexHtml?: boolean;
+    generatePackageJson?: boolean;
+    index?: string;
+    memoryLimit?: number;
+    namedChunks?: boolean;
+    optimization?: boolean | OptimizationOptions;
+    outputFileName?: string;
+    outputHashing?: any;
+    poll?: number;
+    polyfills?: string;
+    postcssConfig?: string;
+    progress?: boolean;
+    runtimeChunk?: boolean;
+    scripts?: Array<ExtraEntryPointClass | string>;
+    skipTypeChecking?: boolean;
+    sourceMap?: boolean | 'hidden';
+    ssr?: boolean;
+    statsJson?: boolean;
+    stylePreprocessorOptions?: any;
+    styles?: Array<ExtraEntryPointClass | string>;
+    subresourceIntegrity?: boolean;
+    target?: string | string[];
+    transformers?: TransformerEntry[];
+    vendorChunk?: boolean;
+    verbose?: boolean;
+    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,18 @@
+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;
+    private readExecutorOptions;
+}

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

@@ -0,0 +1,52 @@
+"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) {
+        this.options = (0, normalize_options_1.normalizeOptions)({
+            ...options,
+            ...this.readExecutorOptions(),
+        });
+    }
+    apply(compiler) {
+        const target = this.options.target ?? compiler.options.target;
+        this.options.outputPath ??= compiler.options.output?.path;
+        if (typeof target === 'string') {
+            this.options.target = target;
+        }
+        if (this.options.deleteOutputPath) {
+            (0, fs_1.deleteOutputDir)(this.options.root, this.options.outputPath);
+        }
+        (0, apply_base_config_1.applyBaseConfig)(this.options, compiler.options);
+        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);
+        }
+    }
+    readExecutorOptions() {
+        const fromExecutor = process.env['NX_WEBPACK_EXECUTOR_RAW_OPTIONS'] ?? '{}';
+        try {
+            return JSON.parse(fromExecutor);
+        }
+        catch {
+            return {};
+        }
+    }
+}
+exports.NxWebpackPlugin = NxWebpackPlugin;

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

@@ -1,4 +1,3 @@
-import { NormalizedWebpackExecutorOptions } from '../executors/webpack/schema';
 import { NxWebpackPlugin } from './config';
 export interface WithNxOptions {
     skipTypeChecking?: boolean;
@@ -8,55 +7,3 @@ export interface WithNxOptions {
  * @returns {NxWebpackPlugin}
  */
 export declare function withNx(pluginOptions?: WithNxOptions): NxWebpackPlugin;
-export declare function createLoaderFromCompiler(options: NormalizedWebpackExecutorOptions): {
-    test: RegExp;
-    loader: string;
-    exclude: RegExp;
-    options: {
-        cwd: string;
-        emitDecoratorMetadata: boolean;
-        isModern: boolean;
-        isTest: boolean;
-        envName: string;
-        cacheDirectory: boolean;
-        cacheCompression: boolean;
-    };
-} | {
-    test: RegExp;
-    loader: string;
-    exclude: RegExp;
-    options: {
-        jsc: {
-            parser: {
-                syntax: string;
-                decorators: boolean;
-                tsx: boolean;
-            };
-            transform: {
-                react: {
-                    runtime: string;
-                };
-            };
-            loose: boolean;
-        };
-        configFile?: undefined;
-        transpileOnly?: undefined;
-        experimentalWatchApi?: undefined;
-        getCustomTransformers?: undefined;
-    };
-} | {
-    test: RegExp;
-    loader: string;
-    exclude: RegExp;
-    options: {
-        configFile: string;
-        transpileOnly: boolean;
-        experimentalWatchApi: boolean;
-        getCustomTransformers: (program: any) => {
-            before: any;
-            after: any;
-            afterDeclarations: any;
-        };
-        jsc?: undefined;
-    };
-};