docs(webpack): customize webpack and refactor docs (nrwl#14702)

docs/generated/manifests/menus.json

@@ -2621,14 +2621,6 @@
             "children": [],
             "disableCollapsible": false
           },
-          {
-            "name": "Customizing Webpack Config",
-            "path": "/recipes/other/customize-webpack",
-            "id": "customize-webpack",
-            "isExternal": false,
-            "children": [],
-            "disableCollapsible": false
-          },
           {
             "name": "Powering Up React Development With Nx",
             "path": "/recipes/other/react-nx",
@@ -2880,14 +2872,6 @@
         "children": [],
         "disableCollapsible": false
       },
-      {
-        "name": "Customizing Webpack Config",
-        "path": "/recipes/other/customize-webpack",
-        "id": "customize-webpack",
-        "isExternal": false,
-        "children": [],
-        "disableCollapsible": false
-      },
       {
         "name": "Powering Up React Development With Nx",
         "path": "/recipes/other/react-nx",

docs/generated/manifests/recipes.json

@@ -1205,16 +1205,6 @@
         "path": "/recipes/other/misc-data-persistence",
         "tags": []
       },
-      {
-        "id": "customize-webpack",
-        "name": "Customizing Webpack Config",
-        "description": "",
-        "file": "shared/guides/customize-webpack",
-        "itemList": [],
-        "isExternal": false,
-        "path": "/recipes/other/customize-webpack",
-        "tags": ["use-task-executors"]
-      },
       {
         "id": "react-nx",
         "name": "Powering Up React Development With Nx",
@@ -1530,16 +1520,6 @@
     "path": "/recipes/other/misc-data-persistence",
     "tags": []
   },
-  "/recipes/other/customize-webpack": {
-    "id": "customize-webpack",
-    "name": "Customizing Webpack Config",
-    "description": "",
-    "file": "shared/guides/customize-webpack",
-    "itemList": [],
-    "isExternal": false,
-    "path": "/recipes/other/customize-webpack",
-    "tags": ["use-task-executors"]
-  },
   "/recipes/other/react-nx": {
     "id": "react-nx",
     "name": "Powering Up React Development With Nx",

docs/generated/manifests/tags.json

@@ -506,13 +506,6 @@
       "name": "Profiling Build Performance",
       "path": "/recipes/other/performance-profiling"
     },
-    {
-      "description": "",
-      "file": "shared/guides/customize-webpack",
-      "id": "customize-webpack",
-      "name": "Customizing Webpack Config",
-      "path": "/recipes/other/customize-webpack"
-    },
     {
       "description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
       "file": "generated/packages/generated/packages/nx/documents/run",

docs/generated/packages/webpack/documents/customize-webpack.md

@@ -0,0 +1,113 @@
+# Customize your Webpack Config
+
+{% callout type="note" title="Webpack Config Setup" %}
+This guide helps you customize your webpack config - add extra functionality and support for other frameworks or features. To see how you can set up a basic webpack config for Nx, read the [Webpack Config Setup guide](/packages/webpack/documents/webpack-config-setup).
+{% /callout %}
+
+For most apps, the default configuration of webpack is sufficient, but sometimes you need to tweak a setting in your webpack config. This guide explains how to make a small change without taking on the maintenance burden of the entire webpack config.
+
+## React projects
+
+React projects use the `@nrwl/react` package to build their apps. This package provides a `withReact` plugin that adds the necessary configuration for React to work with webpack. You can use this plugin to add the necessary configuration to your webpack config.
+
+```js {% fileName="apps/my-app/webpack.config.js" %}
+const { composePlugins, withNx } = require('@nrwl/webpack');
+const { withReact } = require('@nrwl/react');
+
+// Nx plugins for webpack.
+module.exports = composePlugins(
+  withNx(),
+  withReact(),
+  (config, { options, context }) => {
+    // Update the webpack config as needed here.
+    // e.g. config.plugins.push(new MyPlugin())
+    return config;
+  }
+);
+```
+
+## Add a Loader
+
+To add the `css-loader` to your config, install it and add the rule.
+
+{% tabs %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D css-loader
+```
+
+{% /tab %}
+{% tab label="npm" %}
+
+```shell
+npm install -D css-loader
+```
+
+{% /tab %}
+{% /tabs %}
+
+```js {% fileName="apps/my-app/webpack.config.js" %}
+const { composePlugins, withNx } = require('@nrwl/webpack');
+const { merge } = require('webpack-merge');
+
+module.exports = composePlugins(withNx(), (config, { options, context }) => {
+  return merge(config, {
+    module: {
+      rules: [
+        {
+          test: /\.css$/i,
+          use: ['style-loader', 'css-loader'],
+        },
+      ],
+    },
+  });
+});
+```
+
+## Module Federation
+
+If you use the [Module Federation](/recipes/module-federation/faster-builds) support from `@nrwl/angular` or `@nrwl/react` then
+you can customize your webpack configuration as follows.
+
+```js {% fileName="apps/my-app/webpack.config.js" %}
+const { composePlugins, withNx } = require('@nrwl/webpack');
+const { merge } = require('webpack-merge');
+const withModuleFederation = require('@nrwl/react/module-federation');
+// or `const withModuleFederation = require('@nrwl/angular/module-federation');`
+
+module.exports = composePlugins(withNx(), (config, { options, context }) => {
+  const federatedModules = await withModuleFederation({
+    // your options here
+  });
+
+  return merge(federatedModules(config, context), {
+    // overwrite values here
+  });
+});
+```
+
+Reference the [webpack documentation](https://webpack.js.org/configuration/) for details on the structure of the webpack
+config object.
+
+## Next.js Applications
+
+Next.js supports webpack customization in the `next.config.js` file.
+
+```js {% fileName="next.config.js" %}
+const { withNx } = require('@nrwl/next/plugins/with-nx');
+
+const nextConfig = {
+  webpack: (
+    config,
+    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
+  ) => {
+    // Important: return the modified config
+    return config;
+  },
+};
+
+return withNx(nextConfig);
+```
+
+Read the [official documentation](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) for more details.

docs/generated/packages/webpack/documents/webpack-config-setup.md

@@ -59,8 +59,7 @@ Now, you need to manually add the Nx webpack plugins in your `webpack.config.js`
 
 You should start with a basic webpack configuration for Nx in your project, that looks like this:
 
-```ts
-// apps/my-app/webpack.config.js
+```js {% fileName="apps/my-app/webpack.config.js" %}
 const { composePlugins, withNx } = require('@nrwl/webpack');
 
 module.exports = composePlugins(withNx(), (config, { options, context }) => {
@@ -88,10 +87,15 @@ In addition to the basic configuration, you can add configurations for other fra
 
 You may still reconfigure everything manually, without using the Nx plugins. However, these plugins ensure that you have the necessary configuration for Nx to work with your project.
 
-Here is an example of a configuration that uses the `withReact` plugin:
+## Customize your Webpack config
 
-```ts
-// apps/my-react-app/webpack.config.js
+For most apps, the default configuration of webpack is sufficient, but sometimes you need to tweak a setting in your webpack config. This guide explains how to make a small change without taking on the maintenance burden of the entire webpack config.
+
+### React projects
+
+React projects use the `@nrwl/react` package to build their apps. This package provides a `withReact` plugin that adds the necessary configuration for React to work with webpack. You can use this plugin to add the necessary configuration to your webpack config.
+
+```js {% fileName="apps/my-app/webpack.config.js" %}
 const { composePlugins, withNx } = require('@nrwl/webpack');
 const { withReact } = require('@nrwl/react');
 
@@ -106,3 +110,89 @@ module.exports = composePlugins(
   }
 );
 ```
+
+### Add a Loader
+
+To add the `css-loader` to your config, install it and add the rule.
+
+{% tabs %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D css-loader
+```
+
+{% /tab %}
+{% tab label="npm" %}
+
+```shell
+npm install -D css-loader
+```
+
+{% /tab %}
+{% /tabs %}
+
+```js {% fileName="apps/my-app/webpack.config.js" %}
+const { composePlugins, withNx } = require('@nrwl/webpack');
+const { merge } = require('webpack-merge');
+
+module.exports = composePlugins(withNx(), (config, { options, context }) => {
+  return merge(config, {
+    module: {
+      rules: [
+        {
+          test: /\.css$/i,
+          use: ['style-loader', 'css-loader'],
+        },
+      ],
+    },
+  });
+});
+```
+
+### Module Federation
+
+If you use the [Module Federation](/recipes/module-federation/faster-builds) support from `@nrwl/angular` or `@nrwl/react` then
+you can customize your webpack configuration as follows.
+
+```js {% fileName="apps/my-app/webpack.config.js" %}
+const { composePlugins, withNx } = require('@nrwl/webpack');
+const { merge } = require('webpack-merge');
+const withModuleFederation = require('@nrwl/react/module-federation');
+// or `const withModuleFederation = require('@nrwl/angular/module-federation');`
+
+module.exports = composePlugins(withNx(), (config, { options, context }) => {
+  const federatedModules = await withModuleFederation({
+    // your options here
+  });
+
+  return merge(federatedModules(config, context), {
+    // overwrite values here
+  });
+});
+```
+
+Reference the [webpack documentation](https://webpack.js.org/configuration/) for details on the structure of the webpack
+config object.
+
+### Next.js Applications
+
+Next.js supports webpack customization in the `next.config.js` file.
+
+```js {% fileName="next.config.js" %}
+const { withNx } = require('@nrwl/next/plugins/with-nx');
+
+const nextConfig = {
+  webpack: (
+    config,
+    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
+  ) => {
+    // Important: return the modified config
+    return config;
+  },
+};
+
+return withNx(nextConfig);
+```
+
+Read the [official documentation](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) for more details.

docs/map.json

@@ -1103,13 +1103,6 @@
               "id": "misc-data-persistence",
               "file": "shared/guides/misc-data-persistence"
             },
-            {
-              "name": "Customizing Webpack Config",
-              "id": "customize-webpack",
-              "tags": ["use-task-executors"],
-              "file": "shared/guides/customize-webpack"
-            },
-
             {
               "name": "Powering Up React Development With Nx",
               "id": "react-nx",