@nx/webpack 16.4.0 → 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",
+  "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,9 +30,9 @@
   },
   "dependencies": {
     "@babel/core": "^7.15.0",
-    "@nrwl/webpack": "16.4.0",
-    "@nx/devkit": "16.4.0",
-    "@nx/js": "16.4.0",
+    "@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",
@@ -42,7 +42,6 @@
     "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",
@@ -76,5 +75,5 @@
     "access": "public"
   },
   "types": "./index.d.ts",
-  "gitHead": "ae698a72748d9f33aa5395aeeaa7b7af436a1dc5"
+  "gitHead": "376d656cfc7f6390ff1cd6d9de348baf7bccbf33"
 }

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,