docs(webpack): add frontmatter to guides (#14724)

docs/generated/manifests/menus.json

@@ -6241,7 +6241,7 @@
             "name": "documents",
             "children": [
               {
-                "name": "Webpack Package Overview",
+                "name": "Overview of the Nx Webpack Plugin",
                 "path": "/packages/webpack/documents/overview",
                 "id": "overview",
                 "isExternal": false,
@@ -6249,7 +6249,7 @@
                 "disableCollapsible": false
               },
               {
-                "name": "Configure webpack on your Nx workspace",
+                "name": "How to configure webpack on your Nx workspace",
                 "path": "/packages/webpack/documents/webpack-config-setup",
                 "id": "webpack-config-setup",
                 "isExternal": false,

docs/generated/manifests/packages.json

@@ -2816,7 +2816,7 @@
     "documents": {
       "/packages/webpack/documents/overview": {
         "id": "overview",
-        "name": "Webpack Package Overview",
+        "name": "Overview of the Nx Webpack Plugin",
         "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
         "file": "generated/packages/webpack/documents/overview",
         "itemList": [],
@@ -2827,8 +2827,8 @@
       },
       "/packages/webpack/documents/webpack-config-setup": {
         "id": "webpack-config-setup",
-        "name": "Configure webpack on your Nx workspace",
+        "name": "How to configure webpack on your Nx workspace",
-        "description": "Configure webpack on your Nx workspace",
+        "description": "A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration",
         "file": "generated/packages/webpack/documents/webpack-config-setup",
         "itemList": [],
         "isExternal": false,

docs/generated/packages-metadata.json

@@ -2785,7 +2785,7 @@
     "documents": [
       {
         "id": "overview",
-        "name": "Webpack Package Overview",
+        "name": "Overview of the Nx Webpack Plugin",
         "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
         "file": "generated/packages/webpack/documents/overview",
         "itemList": [],
@@ -2796,8 +2796,8 @@
       },
       {
         "id": "webpack-config-setup",
-        "name": "Configure webpack on your Nx workspace",
+        "name": "How to configure webpack on your Nx workspace",
-        "description": "Configure webpack on your Nx workspace",
+        "description": "A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration",
         "file": "generated/packages/webpack/documents/webpack-config-setup",
         "itemList": [],
         "isExternal": false,

docs/generated/packages/webpack/documents/overview.md

@@ -1,3 +1,8 @@
+---
+title: Overview of the Nx Webpack Plugin
+description: The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.
+---
+
 The Nx plugin for [webpack](https://webpack.js.org/).
 
 [Webpack](https://webpack.js.org/) is a static module bundler for modern JavaScript applications. The `@nrwl/webpack` plugin provides executors that allow you to build and serve your projects using webpack, plus an executor for SSR.

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

@@ -1,3 +1,8 @@
+---
+title: How to configure webpack on your Nx workspace
+description: A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration
+---
+
 # Configure webpack on your Nx workspace
 
 You can configure Webpack using a `webpack.config.js` file in your project. You can set the path to this file in your `project.json` file, in the `build` target options:

docs/generated/packages/webpack/executors/dev-server.json

@@ -4,8 +4,8 @@
   "schema": {
     "version": 2,
     "outputCapture": "direct-nodejs",
-    "title": "Web Dev Server",
+    "title": "Webpack dev server",
-    "description": "Serve a web application.",
+    "description": "Serve an application using webpack.",
     "cli": "nx",
     "type": "object",
     "properties": {

docs/generated/packages/webpack/executors/ssr-dev-server.json

@@ -4,8 +4,8 @@
   "schema": {
     "version": 2,
     "outputCapture": "direct-nodejs",
-    "title": "Web SSR Dev Server",
+    "title": "Webpack SSR Dev Server",
-    "description": "Serve a SSR application.",
+    "description": "Serve a SSR application using webpack.",
     "cli": "nx",
     "type": "object",
     "properties": {

docs/generated/packages/webpack/executors/webpack.json

@@ -4,8 +4,8 @@
   "schema": {
     "version": 2,
     "outputCapture": "direct-nodejs",
-    "title": "Webpack Executor",
+    "title": "Webpack builder",
-    "description": "Builds web applications using webpack.",
+    "description": "Build a project using webpack.",
     "cli": "nx",
     "type": "object",
     "properties": {
@@ -468,7 +468,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 configuration guide](/packages/webpack/documents/webpack-config-setup).\n\n{% /tab %}\n\n{% tab label=\"Run webpack with `isolatedConfig`\" %}\n\nSetting `isolatedConfig` to `true` in your `project.json` file means that Nx will not apply the Nx webpack plugins automatically. In that case, the Nx plugins need to be applied in the project's `webpack.config.js` file (e.g. `withNx`, `withReact`, etc.). So don't forget to also specify the path to your webpack config file (using the `webpackConfig` option).\n\nRead more on how to configure Webpack in our [Nx Webpack configuration guide](/packages/webpack/documents/webpack-config-setup) an in our [Webpack Plugins guide](/packages/webpack/documents/webpack-plugins).\n\nNote that this is the new default setup for webpack in the latest version of Nx.\n\nSet `isolatedConfig` to `true` in your `project.json` file in the `build` target options like this:\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                \"isolatedConfig\": true\n            },\n            \"configurations\": {\n                ...\n            }\n        },\n    }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
+    "examplesFile": "---\ntitle: Examples for the @nrwl/webpack:webpack build executor\ndescription: Examples and a short guide on how to use the @nrwl/webpack:webpack build executor\n---\n\n`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 configuration guide](/packages/webpack/documents/webpack-config-setup).\n\n{% /tab %}\n\n{% tab label=\"Run webpack with `isolatedConfig`\" %}\n\nSetting `isolatedConfig` to `true` in your `project.json` file means that Nx will not apply the Nx webpack plugins automatically. In that case, the Nx plugins need to be applied in the project's `webpack.config.js` file (e.g. `withNx`, `withReact`, etc.). So don't forget to also specify the path to your webpack config file (using the `webpackConfig` option).\n\nRead more on how to configure Webpack in our [Nx Webpack configuration guide](/packages/webpack/documents/webpack-config-setup) an in our [Webpack Plugins guide](/packages/webpack/documents/webpack-plugins).\n\nNote that this is the new default setup for webpack in the latest version of Nx.\n\nSet `isolatedConfig` to `true` in your `project.json` file in the `build` target options like this:\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                \"isolatedConfig\": true\n            },\n            \"configurations\": {\n                ...\n            }\n        },\n    }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
     "presets": []
   },
   "description": "Run webpack build.",

docs/generated/packages/webpack/generators/init.json

@@ -6,7 +6,7 @@
     "$id": "NxWebpackInit",
     "cli": "nx",
     "title": "Init Webpack Plugin",
-    "description": "Init Webpack Plugin.",
+    "description": "Initialize the Webpack Plugin.",
     "type": "object",
     "properties": {
       "uiFramework": {

docs/map.json

@@ -1609,19 +1609,20 @@
           "itemList": [
             {
               "id": "overview",
-              "name": "Webpack Package Overview",
               "path": "/packages/webpack",
+              "name": "Overview of the Nx Webpack Plugin",
+              "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
               "file": "shared/packages/webpack/plugin-overview"
             },
             {
-              "name": "Configure webpack on your Nx workspace",
               "id": "webpack-config-setup",
-              "description": "Configure webpack on your Nx workspace",
+              "name": "How to configure webpack on your Nx workspace",
+              "description": "A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration",
               "file": "shared/packages/webpack/webpack-config-setup"
             },
             {
-              "name": "Webpack plugins",
               "id": "webpack-plugins",
+              "name": "Webpack plugins",
               "description": "Webpack plugins",
               "file": "shared/packages/webpack/webpack-plugins"
             }

docs/shared/packages/webpack/plugin-overview.md

@@ -1,3 +1,8 @@
+---
+title: Overview of the Nx Webpack Plugin
+description: The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.
+---
+
 The Nx plugin for [webpack](https://webpack.js.org/).
 
 [Webpack](https://webpack.js.org/) is a static module bundler for modern JavaScript applications. The `@nrwl/webpack` plugin provides executors that allow you to build and serve your projects using webpack, plus an executor for SSR.

docs/shared/packages/webpack/webpack-config-setup.md

@@ -1,3 +1,8 @@
+---
+title: How to configure webpack on your Nx workspace
+description: A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration
+---
+
 # Configure webpack on your Nx workspace
 
 You can configure Webpack using a `webpack.config.js` file in your project. You can set the path to this file in your `project.json` file, in the `build` target options:

packages/webpack/docs/webpack-build-executor-examples.md

@@ -1,3 +1,8 @@
+---
+title: Examples for the @nrwl/webpack:webpack build executor
+description: Examples and a short guide on how to use the @nrwl/webpack:webpack build executor
+---
+
 `project.json`:
 
 ```json

packages/webpack/src/executors/dev-server/schema.json

@@ -1,8 +1,8 @@
 {
   "version": 2,
   "outputCapture": "direct-nodejs",
-  "title": "Web Dev Server",
+  "title": "Webpack dev server",
-  "description": "Serve a web application.",
+  "description": "Serve an application using webpack.",
   "cli": "nx",
   "type": "object",
   "properties": {

packages/webpack/src/executors/ssr-dev-server/schema.json

@@ -1,8 +1,8 @@
 {
   "version": 2,
   "outputCapture": "direct-nodejs",
-  "title": "Web SSR Dev Server",
+  "title": "Webpack SSR Dev Server",
-  "description": "Serve a SSR application.",
+  "description": "Serve a SSR application using webpack.",
   "cli": "nx",
   "type": "object",
   "properties": {

packages/webpack/src/executors/webpack/schema.json

@@ -1,8 +1,8 @@
 {
   "version": 2,
   "outputCapture": "direct-nodejs",
-  "title": "Webpack Executor",
+  "title": "Webpack builder",
-  "description": "Builds web applications using webpack.",
+  "description": "Build a project using webpack.",
   "cli": "nx",
   "type": "object",
   "properties": {

packages/webpack/src/generators/init/schema.json

@@ -3,7 +3,7 @@
   "$id": "NxWebpackInit",
   "cli": "nx",
   "title": "Init Webpack Plugin",
-  "description": "Init Webpack Plugin.",
+  "description": "Initialize the Webpack Plugin.",
   "type": "object",
   "properties": {
     "uiFramework": {