@nx/webpack 16.4.0-beta.9 → 16.5.0-beta.0

package/migrations.json

@@ -40,6 +40,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "16.4.1": {
+      "version": "16.4.1-beta.0",
+      "packages": {
+        "webpack": {
+          "version": "^5.80.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/webpack",
-  "version": "16.4.0-beta.9",
+  "version": "16.5.0-beta.0",
   "private": false,
   "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
   "repository": {
@@ -30,18 +30,18 @@
   },
   "dependencies": {
     "@babel/core": "^7.15.0",
-    "@nrwl/webpack": "16.4.0-beta.9",
-    "@nx/devkit": "16.4.0-beta.9",
-    "@nx/js": "16.4.0-beta.9",
+    "@nrwl/webpack": "16.5.0-beta.0",
+    "@nx/devkit": "16.5.0-beta.0",
+    "@nx/js": "16.5.0-beta.0",
     "autoprefixer": "^10.4.9",
     "babel-loader": "^9.1.2",
+    "browserslist": "^4.21.4",
     "chalk": "^4.1.0",
     "chokidar": "^3.5.1",
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.4.0",
     "css-minimizer-webpack-plugin": "^5.0.0",
     "dotenv": "~10.0.0",
-    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "7.2.13",
     "ignore": "^5.0.4",
     "less": "4.1.3",
@@ -75,5 +75,5 @@
     "access": "public"
   },
   "types": "./index.d.ts",
-  "gitHead": "b7fbc25d5be1789d42805e2254cf4a6070889157"
+  "gitHead": "376d656cfc7f6390ff1cd6d9de348baf7bccbf33"
 }

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

@@ -21,27 +21,22 @@ function ssrDevServerExecutor(options, context) {
         const combined = (0, async_iterable_1.combineAsyncIterables)(runBrowser, runServer);
         process.env['port'] = `${options.port}`;
         try {
-            for (var _f = true, combined_1 = tslib_1.__asyncValues(combined), combined_1_1; combined_1_1 = yield tslib_1.__await(combined_1.next()), _c = combined_1_1.done, !_c;) {
+            for (var _f = true, combined_1 = tslib_1.__asyncValues(combined), combined_1_1; combined_1_1 = yield tslib_1.__await(combined_1.next()), _c = combined_1_1.done, !_c; _f = true) {
                 _e = combined_1_1.value;
                 _f = false;
-                try {
-                    const output = _e;
-                    if (!output.success)
-                        throw new Error('Could not build application');
-                    if (((_a = output.options) === null || _a === void 0 ? void 0 : _a.target) === 'node') {
-                        nodeStarted = true;
-                    }
-                    else if (((_b = output.options) === null || _b === void 0 ? void 0 : _b.target) === 'web') {
-                        browserBuilt = true;
-                    }
-                    if (nodeStarted && browserBuilt) {
-                        yield tslib_1.__await((0, wait_until_server_is_listening_1.waitUntilServerIsListening)(options.port));
-                        console.log(`[ ${chalk.green('ready')} ] on http://localhost:${options.port}`);
-                        yield yield tslib_1.__await(Object.assign(Object.assign({}, output), { baseUrl: `http://localhost:${options.port}` }));
-                    }
+                const output = _e;
+                if (!output.success)
+                    throw new Error('Could not build application');
+                if (((_a = output.options) === null || _a === void 0 ? void 0 : _a.target) === 'node') {
+                    nodeStarted = true;
                 }
-                finally {
-                    _f = true;
+                else if (((_b = output.options) === null || _b === void 0 ? void 0 : _b.target) === 'web') {
+                    browserBuilt = true;
+                }
+                if (nodeStarted && browserBuilt) {
+                    yield tslib_1.__await((0, wait_until_server_is_listening_1.waitUntilServerIsListening)(options.port));
+                    console.log(`[ ${chalk.green('ready')} ] on http://localhost:${options.port}`);
+                    yield yield tslib_1.__await(Object.assign(Object.assign({}, output), { baseUrl: `http://localhost:${options.port}` }));
                 }
             }
         }

package/src/utils/web-babel-loader.js

@@ -12,15 +12,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 module.exports = require('babel-loader').custom(() => {
     return {
         customOptions(_a) {
-            var { isModern, emitDecoratorMetadata } = _a, loader = __rest(_a, ["isModern", "emitDecoratorMetadata"]);
+            var { isTest, isModern, emitDecoratorMetadata } = _a, loader = __rest(_a, ["isTest", "isModern", "emitDecoratorMetadata"]);
             return {
-                custom: { isModern, emitDecoratorMetadata },
+                custom: { isTest, isModern, emitDecoratorMetadata },
                 loader,
             };
         },
-        config(cfg, { customOptions: { isModern, emitDecoratorMetadata } }) {
+        config(cfg, { customOptions: { isTest, isModern, emitDecoratorMetadata } }) {
             // Add hint to our babel preset so it can handle modern vs legacy bundles.
             cfg.options.caller.isModern = isModern;
+            cfg.options.caller.isTest = isTest;
             cfg.options.caller.emitDecoratorMetadata = emitDecoratorMetadata;
             return cfg.options;
         },

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

@@ -16,6 +16,7 @@ export declare function createLoaderFromCompiler(options: NormalizedWebpackExecu
         cwd: string;
         emitDecoratorMetadata: boolean;
         isModern: boolean;
+        isTest: boolean;
         envName: string;
         cacheDirectory: boolean;
         cacheCompression: boolean;

package/src/utils/with-nx.js

@@ -2,23 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createLoaderFromCompiler = exports.withNx = void 0;
 const path = require("path");
+const path_1 = require("path");
 const webpack_1 = require("webpack");
 const tsconfig_paths_webpack_plugin_1 = require("tsconfig-paths-webpack-plugin");
 const js_1 = require("@nx/js");
 const license_webpack_plugin_1 = require("license-webpack-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
-const nodeExternals = require("webpack-node-externals");
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 const stats_json_plugin_1 = require("../plugins/stats-json-plugin");
 const create_copy_plugin_1 = require("./create-copy-plugin");
 const generate_package_json_plugin_1 = require("../plugins/generate-package-json-plugin");
 const hash_format_1 = require("./hash-format");
+const fs_1 = require("fs");
+const TerserPlugin = require("terser-webpack-plugin");
+const nodeExternals = require("webpack-node-externals");
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+const browserslist = require("browserslist");
+const VALID_BROWSERSLIST_FILES = ['.browserslistrc', 'browserslist'];
+function getTerserEcmaVersion(projectRoot) {
+    let pathToBrowserslistFile = '';
+    for (const browserslistFile of VALID_BROWSERSLIST_FILES) {
+        const fullPathToFile = (0, path_1.join)(projectRoot, browserslistFile);
+        if ((0, fs_1.existsSync)(fullPathToFile)) {
+            pathToBrowserslistFile = fullPathToFile;
+            break;
+        }
+    }
+    if (!pathToBrowserslistFile) {
+        return 2020;
+    }
+    const env = browserslist.loadConfig({ path: pathToBrowserslistFile });
+    const browsers = browserslist(env);
+    return browsers.includes('ie 11') ? 5 : 2020;
+}
 const IGNORED_WEBPACK_WARNINGS = [
     /The comment file/i,
     /could not find any license/i,
 ];
 const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
-const mainFields = ['main', 'module'];
+const mainFields = ['module', 'main'];
 const processed = new Set();
 /**
  * @param {WithNxOptions} pluginOptions
@@ -143,7 +163,7 @@ function withNx(pluginOptions) {
                             parallel: true,
                             terserOptions: {
                                 keep_classnames: true,
-                                ecma: 2020,
+                                ecma: getTerserEcmaVersion((0, path_1.join)(options.root, options.projectRoot)),
                                 safari10: true,
                                 format: {
                                     ascii_only: true,
@@ -267,6 +287,7 @@ function createLoaderFromCompiler(options) {
                     cwd: path.join(options.root, options.sourceRoot),
                     emitDecoratorMetadata: tsConfig.options.emitDecoratorMetadata,
                     isModern: true,
+                    isTest: process.env.NX_CYPRESS_COMPONENT_TEST === 'true',
                     envName: (_a = process.env.BABEL_ENV) !== null && _a !== void 0 ? _a : process.env.NODE_ENV,
                     cacheDirectory: true,
                     cacheCompression: false,

package/src/utils/with-web.js

@@ -309,20 +309,38 @@ function withWeb(pluginOptions = {}) {
         config.resolve.mainFields = ['browser', 'module', 'main'];
         config.module = Object.assign(Object.assign({}, config.module), { rules: [
                 ...((_c = config.module.rules) !== null && _c !== void 0 ? _c : []),
+                // Images: Inline small images, and emit a separate file otherwise.
                 {
-                    test: /\.(bmp|png|jpe?g|gif|webp|avif)$/,
+                    test: /\.(avif|bmp|gif|ico|jpe?g|png|webp)$/,
                     type: 'asset',
                     parser: {
                         dataUrlCondition: {
                             maxSize: 10000, // 10 kB
                         },
                     },
+                    generator: {
+                        filename: `[name]${hashFormat.file}[ext]`,
+                    },
+                },
+                // SVG: same as image but we need to separate it so it can be swapped for SVGR in the React plugin.
+                {
+                    test: /\.svg$/,
+                    type: 'asset',
+                    parser: {
+                        dataUrlCondition: {
+                            maxSize: 10000, // 10 kB
+                        },
+                    },
+                    generator: {
+                        filename: `[name]${hashFormat.file}[ext]`,
+                    },
                 },
+                // Fonts: Emit separate file and export the URL.
                 {
-                    test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
-                    loader: require.resolve('file-loader'),
-                    options: {
-                        name: `[name]${hashFormat.file}.[ext]`,
+                    test: /\.(eot|otf|ttf|woff|woff2)$/,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: `[name]${hashFormat.file}[ext]`,
                     },
                 },
                 ...rules,