feat(webpack): documentation for configuring webpack

nrwl · Jan 25, 2023 · 9937351 · 9937351
1 parent 45de428
commit 9937351
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 5 deletions.
diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json
@@ -6211,6 +6211,23 @@
         "path": "/packages/webpack",
         "name": "webpack",
         "children": [
+          {
+            "id": "documents",
+            "path": "/packages/webpack/documents",
+            "name": "documents",
+            "children": [
+              {
+                "name": "Set up webpack config",
+                "path": "/packages/webpack/documents/webpack-config-setup",
+                "id": "webpack-config-setup",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              }
+            ],
+            "isExternal": false,
+            "disableCollapsible": false
+          },
           {
             "id": "executors",
             "path": "/packages/webpack/executors",

diff --git a/docs/generated/manifests/packages.json b/docs/generated/manifests/packages.json
@@ -2802,7 +2802,19 @@
     "name": "webpack",
     "packageName": "@nrwl/webpack",
     "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
-    "documents": {},
+    "documents": {
+      "/packages/webpack/documents/webpack-config-setup": {
+        "id": "webpack-config-setup",
+        "name": "Set up webpack config",
+        "description": "Configure webpack on your Nx workspace",
+        "file": "generated/packages/webpack/documents/webpack-config-setup",
+        "itemList": [],
+        "isExternal": false,
+        "path": "/packages/webpack/documents/webpack-config-setup",
+        "tags": [],
+        "originalFilePath": "shared/packages/webpack/webpack-config-setup"
+      }
+    },
     "root": "/packages/webpack",
     "source": "/packages/webpack/src",
     "executors": {

diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json
@@ -2771,7 +2771,19 @@
   },
   {
     "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
-    "documents": [],
+    "documents": [
+      {
+        "id": "webpack-config-setup",
+        "name": "Set up webpack config",
+        "description": "Configure webpack on your Nx workspace",
+        "file": "generated/packages/webpack/documents/webpack-config-setup",
+        "itemList": [],
+        "isExternal": false,
+        "path": "webpack/documents/webpack-config-setup",
+        "tags": [],
+        "originalFilePath": "shared/packages/webpack/webpack-config-setup"
+      }
+    ],
     "executors": [
       {
         "description": "Run webpack build.",

diff --git a/docs/generated/packages/webpack/documents/webpack-config-setup.md b/docs/generated/packages/webpack/documents/webpack-config-setup.md
@@ -0,0 +1,25 @@
+# Configure webpack on your Nx workspace
+
+You can configure Webpack using a `webpack.config.js` file. If you do so, you can set the path to this file in your `project.json` file, in the `build` target options:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "build": {
+            "executor": "@nrwl/webpack:webpack",
+            //...
+            "options": {
+                //...
+                "webpackConfig": "apps/my-app/webpack.config.js"
+            },
+            "configurations": {
+                ...
+            }
+        },
+    }
+}
+```
+
+In that file, you can add the necessary configuration for Webpack. You can read more on how to configure webpack in the [Webpack documentation](https://webpack.js.org/concepts/configuration/).
diff --git a/docs/generated/packages/webpack/executors/webpack.json b/docs/generated/packages/webpack/executors/webpack.json
@@ -463,6 +463,7 @@
         ]
       }
     },
+    "examplesFile": "`project.json`:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n            \"executor\": \"@nrwl/webpack:webpack\",\n            //...\n            //...\n            \"options\": {\n                ...\n            },\n                //...\n            }\n        },\n    }\n}\n```\n\n```bash\nnx build my-app\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Add a path to your webpack.config.js file\" %}\n\nYou can configure Webpack using a `webpack.config.js` file. If you do so, you can set the path to this file in your `project.json` file, in the `build` target options:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n            \"executor\": \"@nrwl/webpack:webpack\",\n            //...\n            \"options\": {\n                //...\n                \"webpackConfig\": \"apps/my-app/webpack.config.js\"\n            },\n            \"configurations\": {\n                ...\n            }\n        },\n    }\n}\n```\n\nRead more on how to configure Webpack in the [Nx Webpack documentation](/packages/webpack/documents/webpack-config-setup).\n\n{% /tab %}\n\n{% /tabs %}\n",
     "presets": []
   },
   "description": "Run webpack build.",

diff --git a/docs/map.json b/docs/map.json
@@ -1593,6 +1593,19 @@
             }
           ]
         },
+        {
+          "name": "webpack",
+          "id": "webpack",
+          "description": "Webpack package.",
+          "itemList": [
+            {
+              "name": "Set up webpack config",
+              "id": "webpack-config-setup",
+              "description": "Configure webpack on your Nx workspace",
+              "file": "shared/packages/webpack/webpack-config-setup"
+            }
+          ]
+        },
         {
           "name": "angular",
           "id": "angular",

diff --git a/docs/shared/packages/webpack/webpack-config-setup.md b/docs/shared/packages/webpack/webpack-config-setup.md
@@ -1 +1,25 @@
-# Set up your webpack config
+# Configure webpack on your Nx workspace
+
+You can configure Webpack using a `webpack.config.js` file. If you do so, you can set the path to this file in your `project.json` file, in the `build` target options:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "build": {
+            "executor": "@nrwl/webpack:webpack",
+            //...
+            "options": {
+                //...
+                "webpackConfig": "apps/my-app/webpack.config.js"
+            },
+            "configurations": {
+                ...
+            }
+        },
+    }
+}
+```
+
+In that file, you can add the necessary configuration for Webpack. You can read more on how to configure webpack in the [Webpack documentation](https://webpack.js.org/concepts/configuration/).
diff --git a/packages/webpack/docs/webpack-build-executor-examples.md b/packages/webpack/docs/webpack-build-executor-examples.md
@@ -0,0 +1,57 @@
+`project.json`:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "build": {
+            "executor": "@nrwl/webpack:webpack",
+            //...
+            //...
+            "options": {
+                ...
+            },
+                //...
+            }
+        },
+    }
+}
+```
+
+```bash
+nx build my-app
+```
+
+## Examples
+
+{% tabs %}
+{% tab label="Add a path to your webpack.config.js file" %}
+
+You can configure Webpack using a `webpack.config.js` file. If you do so, you can set the path to this file in your `project.json` file, in the `build` target options:
+
+```json
+//...
+"my-app": {
+    "targets": {
+        //...
+        "build": {
+            "executor": "@nrwl/webpack:webpack",
+            //...
+            "options": {
+                //...
+                "webpackConfig": "apps/my-app/webpack.config.js"
+            },
+            "configurations": {
+                ...
+            }
+        },
+    }
+}
+```
+
+Read more on how to configure Webpack in the [Nx Webpack documentation](/packages/webpack/documents/webpack-config-setup).
+
+{% /tab %}
+
+{% /tabs %}
diff --git a/packages/webpack/src/executors/webpack/schema.json b/packages/webpack/src/executors/webpack/schema.json
@@ -394,5 +394,6 @@
         }
       ]
     }
-  }
+  },
+  "examplesFile": "../../../docs/webpack-build-executor-examples.md"
 }
diff --git a/packages/webpack/src/migrations/update-15-6-3/webpack-config-setup.ts b/packages/webpack/src/migrations/update-15-6-3/webpack-config-setup.ts
@@ -63,7 +63,7 @@ export default async function (tree: Tree) {
           You should consider inlining the logic from ${oldName} into ${options.webpackConfig}.
           You can read our guide on how to do this here: 
           
-          https://nx.dev/packages/storybook/documents/webpack-config-setup
+          https://nx.dev/packages/webpack/documents/webpack-config-setup
           `
         );
       } else {