docs(webpack): Add docs for webpack ci deployment

docs/shared/recipes/ci-deployment.md

@@ -6,6 +6,74 @@ Nx supports the generation of the project's `package.json` by identifying all th
 
 Additionally, we should generate pruned lock file according to the generated `package.json`. This makes the installation in the container significantly faster as we only need to install a subset of the packages.
 
+Nx offers two varieties of Webpack plugin which can be used to generate `package.json`.
+
+{% tabs %}
+
+{% tab label="Nx 18+" %}
+
+## Basic Plugin Configuration
+
+`@nx/webpack/plugin` plugin is compatible with a conventional webpack configuration setup which offers a smooth integration with the Webpack CLI.
+It is configured in the `plugins` array in `nx.json`.
+
+```json {% fileName="nx.json" %}
+{
+  "plugins": [
+    {
+      "plugin": "@nx/webpack/plugin",
+      "options": {
+        "buildTargetName": "build",
+        "serveTargetName": "serve",
+        "serveStaticTargetName": "serve-static",
+        "previewStaticTargetName": "preview"
+      }
+    }
+  ]
+}
+```
+
+Where `build`, `serve`, `serve-static` and `preview` in conjunction with your `webpack.config.js` are the names of the targets that are used to _build_, _serve_, and _preview_ the application respectively.
+
+### NxWebpackPlugin
+
+The [`NxWebpackPlugin`](/recipes/webpack/webpack-plugins#nxwebpackplugin) plugin takes a `main` entry file and produces a bundle in the output directory as defined in `output.path`. You can also pass the `index` option if it is a web app, which will handle outputting scripts and stylesheets in the output file.
+
+To generate a `package.json` we would declare it in the plugin options.
+
+```js {% fileName="apps/acme/app/webpack.config.js" %}
+const { NxWebpackPlugin } = require('@nx/webpack');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '../../dist/apps/acme'),
+  },
+  devServer: {
+    port: 4200,
+  },
+  plugins: [
+    new NxWebpackPlugin({
+      tsConfig: './tsconfig.app.json',
+      compiler: 'swc',
+      main: './src/main.tsx',
+      index: '.src/index.html',
+      styles: ['./src/styles.css'],
+      generatePackageJson: true,
+    }),
+  ],
+};
+```
+
+{% callout type="note" title="Can I use my own config?" %}
+
+The `NxWebpackPlugin` is optional, and you can bring your own Webpack configuration without using it or any plugins from `@nx/webpack`. However, you will need to generate `package.json` and the lock file manually. This can be done using the `createPackageJson` and `createLockFile` functions from `@nx/devkit` but it is recommended to use the `NxWebpackPlugin` for a smoother experience.
+
+{% /callout %}
+{% /tab %}
+
+{% tab label="Nx < 18" %}
+
 ## Supported executors
 
 The `@nx/webpack:webpack` executor supports the `generatePackageJson` flag which generates both `package.json` as well as the lock file.
@@ -16,9 +84,24 @@ Some executors automatically generate output `package.json` and the lock file ge
 - `@nx/js:tsc`
 - `@nx/next:build`
 
-## Using a custom executor
+{% /tab %}
+{% /tabs %}
+
+## Programmtic usage
+
+If you using a custom setup that does not support `generatePackgeJson` or `generateLockfile` flags, you can still use Nx to generate `package.json` and the lock file. The `createPackageJson` and `createLockFile` functions are exported from `@nx/devkit`:
+
+{% tabs %}
 
-If you are using a custom executor or an executor that does not support `generatePackgeJson` or `generateLockfile` flags, you can still use Nx to generate `package.json` and the lock file. The `createPackageJson` and `createLockFile` functions are exported from `@nx/devkit`:
+{% tab label="Custom script" %}
+
+```typescript
+// TODO: add example
+```
+
+{% /tab %}
+
+{% tab label="Custom executor" %}
 
 ```typescript
 import { createPackageJson, createLockFile } from '@nx/devkit';
@@ -50,3 +133,10 @@ export default async function buildExecutor(
   // any subsequent executor code
 }
 ```
+
+{% /tab %}
+{% /tabs %}
+
+{% callout type="note" title="What about vite?" %}
+Vite is a build tool is great for development, and we want to make sure that it is also great for production. We are working on a plugin for Vite that will has parity with the Webpack plugin. Stay tuned for updates.
+{% /callout %}