docs(misc): webpack overview page and other fixes (#14715)

docs/generated/manifests/menus.json

@@ -6240,6 +6240,14 @@
             "path": "/packages/webpack/documents",
             "name": "documents",
             "children": [
+              {
+                "name": "Webpack Package Overview",
+                "path": "/packages/webpack/documents/overview",
+                "id": "overview",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              },
               {
                 "name": "Configure webpack on your Nx workspace",
                 "path": "/packages/webpack/documents/webpack-config-setup",

docs/generated/manifests/packages.json

@@ -2814,6 +2814,17 @@
     "packageName": "@nrwl/webpack",
     "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
     "documents": {
+      "/packages/webpack/documents/overview": {
+        "id": "overview",
+        "name": "Webpack Package Overview",
+        "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
+        "file": "generated/packages/webpack/documents/overview",
+        "itemList": [],
+        "isExternal": false,
+        "path": "/packages/webpack/documents/overview",
+        "tags": [],
+        "originalFilePath": "shared/packages/webpack/plugin-overview"
+      },
       "/packages/webpack/documents/webpack-config-setup": {
         "id": "webpack-config-setup",
         "name": "Configure webpack on your Nx workspace",

docs/generated/packages-metadata.json

@@ -2783,6 +2783,17 @@
   {
     "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
     "documents": [
+      {
+        "id": "overview",
+        "name": "Webpack Package Overview",
+        "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
+        "file": "generated/packages/webpack/documents/overview",
+        "itemList": [],
+        "isExternal": false,
+        "path": "webpack/documents/overview",
+        "tags": [],
+        "originalFilePath": "shared/packages/webpack/plugin-overview"
+      },
       {
         "id": "webpack-config-setup",
         "name": "Configure webpack on your Nx workspace",

docs/generated/packages/storybook/documents/custom-builder-configs.md

@@ -12,7 +12,7 @@ In your root `.storybook/main.js|ts` file, you can add the `webpackFinal` or `vi
 
 The `webpackFinal` field would look like this:
 
-```ts
+```ts {% fileName=".storybook/main.js" %}
 webpackFinal: async (config, { configType }) => {
   // Make whatever fine-grained changes you need that should apply to all storybook configs
 
@@ -25,7 +25,7 @@ webpackFinal: async (config, { configType }) => {
 
 The `viteFinal` field would look like this:
 
-```ts
+```ts {% fileName=".storybook/main.js" %}
 async viteFinal(config, { configType }) {
    if (configType === 'DEVELOPMENT') {
      // Your development configuration goes here
@@ -41,7 +41,7 @@ async viteFinal(config, { configType }) {
 
 In the `viteFinal` case, you would have to import the `mergeConfig` function from `vite`. So, on the top of your root `.storybook/main.js|ts` file, you would have to add:
 
-```ts
+```ts {% fileName=".storybook/main.js" %}
 const { mergeConfig } = require('vite');
 ```
 
@@ -51,9 +51,7 @@ const { mergeConfig } = require('vite');
 
 You can customize or extend the global `webpack` configuration for a specific project by adding a `webpackFinal` field in your project-specific `.storybok/main.js|ts` file, like this:
 
-```ts
+```ts {% fileName="apps/my-react-webpack-app/.storybook/main.js" %}
-// apps/my-react-webpack-app/.storybook/main.js
-
 const rootMain = require('../../../.storybook/main');
 
 module.exports = {
@@ -86,8 +84,7 @@ It's important to note here that for Vite.js to work on monorepos, and specifica
 
 So, a project-level `.storybook/main.js|ts` file for a Vite.js project would look like this:
 
-```ts
+```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
-// apps/my-react-vite-app/.storybook/main.js
 const { mergeConfig } = require('vite');
 const viteTsConfigPaths = require('vite-tsconfig-paths').default;
 const rootMain = require('../../../.storybook/main');
@@ -116,7 +113,7 @@ module.exports = {
 
 or just simplified (if you don't want to take into account any global Storybook Vite.js configuration):
 
-```ts
+```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
 const { mergeConfig } = require('vite');
 const viteTsConfigPaths = require('vite-tsconfig-paths').default;
 const rootMain = require('../../../.storybook/main');

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

@@ -24,7 +24,7 @@ npx create-nx-workspace@latest --preset=web-components
 - Generate a new standalone React app set up with Vite
 
 ```shell
-npx create-nx-workspace@latest --preset=react-standalone
+npx create-nx-workspace@latest --preset=react-standalone --bundler=vite
 ```
 
 ## Add Vite to an existing workspace

docs/generated/packages/vite/documents/set-up-vite-manually.md

@@ -82,8 +82,7 @@ If you are using React, you need to use the [`@vitejs/plugin-react` plugin](http
 
 Add a `vite.config.ts` file to the root of your project. If you are not using React, you can skip adding the `react` plugin, of course.
 
-```ts
+```ts {% fileName="apps/my-app/vite.config.ts" %}
-// e.g. apps/my-app/vite.config.ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';
@@ -100,7 +99,7 @@ export default defineConfig({
 
 If you are converting a library (rather than an application) to use vite, your `vite.config.ts` file should look like this:
 
-```ts
+```ts {% fileName="libs/my-lib/vite.config.ts" %}
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -154,7 +153,7 @@ First of all, move your `index.html` file to the root of your app (e.g. from `ap
 
 Then, add a module `script` tag pointing to the `main.tsx` (or `main.ts`) file of your app:
 
-```html
+```html {% fileName="apps/my-app/index.html" %}
 ...
   <body>
     <div id="root"></div>
@@ -195,7 +194,7 @@ Change your app's `tsconfig.json` (e.g. `apps/my-app/tsconfig.json`) `compilerOp
 
 ### For React apps
 
-```json
+```json {% fileName="apps/my-app/tsconfig.json" %}
 ...
   "compilerOptions": {
     "jsx": "react-jsx",
@@ -220,7 +219,7 @@ Change your app's `tsconfig.json` (e.g. `apps/my-app/tsconfig.json`) `compilerOp
 
 ### For Web apps
 
-```json
+```json {% fileName="apps/my-app/tsconfig.json" %}
 ...
   "compilerOptions": {
     "target": "ESNext",

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

@@ -0,0 +1,43 @@
+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.
+
+Nx now allows you to [customize your webpack configuration](/packages/webpack/documents/webpack-config-setup) for your projects. And we also offer [a number of plugins](/packages/webpack/documents/webpack-plugins) for supporting Nx and other frameworks.
+
+## Setting up a new Nx workspace with Webpack
+
+You can create a new workspace that uses Webpack with one of the following commands:
+
+- Generate a new standalone React app set up with Webpack
+
+```shell
+npx create-nx-workspace@latest --preset=react-standalone --bundler=webpack
+```
+
+- Generate a new React monorepo set up with Webpack
+
+```shell
+npx create-nx-workspace@latest --preset=react-monorepo --bundler=webpack
+```
+
+## Generate a new project using Webpack
+
+You can generate a [React](/packages/react) application or library or a [Web](/packages/web) application that uses Webpack in an existing Nx workspace. The [`@nrwl/react:app`](/packages/react/generators/application), [`@nrwl/react:lib`](/packages/react/generators/library) and [`@nrwl/web:app`](/packages/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nrwl/webpack` plugin.
+
+To generate a React application using Webpack, run the following:
+
+```bash
+nx g @nrwl/react:app my-app --bundler=webpack
+```
+
+To generate a React library using Webpack, run the following:
+
+```bash
+nx g @nrwl/react:lib my-lib --bundler=webpack
+```
+
+To generate a Web application using Webpack, run the following:
+
+```bash
+nx g @nrwl/web:app my-app --bundler=webpack
+```

docs/map.json

@@ -1607,6 +1607,12 @@
           "id": "webpack",
           "description": "Webpack package.",
           "itemList": [
+            {
+              "id": "overview",
+              "name": "Webpack Package Overview",
+              "path": "/packages/webpack",
+              "file": "shared/packages/webpack/plugin-overview"
+            },
             {
               "name": "Configure webpack on your Nx workspace",
               "id": "webpack-config-setup",

docs/shared/packages/storybook/custom-builder-configs.md

@@ -12,7 +12,7 @@ In your root `.storybook/main.js|ts` file, you can add the `webpackFinal` or `vi
 
 The `webpackFinal` field would look like this:
 
-```ts
+```ts {% fileName=".storybook/main.js" %}
 webpackFinal: async (config, { configType }) => {
   // Make whatever fine-grained changes you need that should apply to all storybook configs
 
@@ -25,7 +25,7 @@ webpackFinal: async (config, { configType }) => {
 
 The `viteFinal` field would look like this:
 
-```ts
+```ts {% fileName=".storybook/main.js" %}
 async viteFinal(config, { configType }) {
    if (configType === 'DEVELOPMENT') {
      // Your development configuration goes here
@@ -41,7 +41,7 @@ async viteFinal(config, { configType }) {
 
 In the `viteFinal` case, you would have to import the `mergeConfig` function from `vite`. So, on the top of your root `.storybook/main.js|ts` file, you would have to add:
 
-```ts
+```ts {% fileName=".storybook/main.js" %}
 const { mergeConfig } = require('vite');
 ```
 
@@ -51,9 +51,7 @@ const { mergeConfig } = require('vite');
 
 You can customize or extend the global `webpack` configuration for a specific project by adding a `webpackFinal` field in your project-specific `.storybok/main.js|ts` file, like this:
 
-```ts
+```ts {% fileName="apps/my-react-webpack-app/.storybook/main.js" %}
-// apps/my-react-webpack-app/.storybook/main.js
-
 const rootMain = require('../../../.storybook/main');
 
 module.exports = {
@@ -86,8 +84,7 @@ It's important to note here that for Vite.js to work on monorepos, and specifica
 
 So, a project-level `.storybook/main.js|ts` file for a Vite.js project would look like this:
 
-```ts
+```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
-// apps/my-react-vite-app/.storybook/main.js
 const { mergeConfig } = require('vite');
 const viteTsConfigPaths = require('vite-tsconfig-paths').default;
 const rootMain = require('../../../.storybook/main');
@@ -116,7 +113,7 @@ module.exports = {
 
 or just simplified (if you don't want to take into account any global Storybook Vite.js configuration):
 
-```ts
+```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
 const { mergeConfig } = require('vite');
 const viteTsConfigPaths = require('vite-tsconfig-paths').default;
 const rootMain = require('../../../.storybook/main');

docs/shared/packages/vite/set-up-vite-manually.md

@@ -82,8 +82,7 @@ If you are using React, you need to use the [`@vitejs/plugin-react` plugin](http
 
 Add a `vite.config.ts` file to the root of your project. If you are not using React, you can skip adding the `react` plugin, of course.
 
-```ts
+```ts {% fileName="apps/my-app/vite.config.ts" %}
-// e.g. apps/my-app/vite.config.ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';
@@ -100,7 +99,7 @@ export default defineConfig({
 
 If you are converting a library (rather than an application) to use vite, your `vite.config.ts` file should look like this:
 
-```ts
+```ts {% fileName="libs/my-lib/vite.config.ts" %}
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
@@ -154,7 +153,7 @@ First of all, move your `index.html` file to the root of your app (e.g. from `ap
 
 Then, add a module `script` tag pointing to the `main.tsx` (or `main.ts`) file of your app:
 
-```html
+```html {% fileName="apps/my-app/index.html" %}
 ...
   <body>
     <div id="root"></div>
@@ -195,7 +194,7 @@ Change your app's `tsconfig.json` (e.g. `apps/my-app/tsconfig.json`) `compilerOp
 
 ### For React apps
 
-```json
+```json {% fileName="apps/my-app/tsconfig.json" %}
 ...
   "compilerOptions": {
     "jsx": "react-jsx",
@@ -220,7 +219,7 @@ Change your app's `tsconfig.json` (e.g. `apps/my-app/tsconfig.json`) `compilerOp
 
 ### For Web apps
 
-```json
+```json {% fileName="apps/my-app/tsconfig.json" %}
 ...
   "compilerOptions": {
     "target": "ESNext",

docs/shared/packages/vite/vite-plugin.md

@@ -24,7 +24,7 @@ npx create-nx-workspace@latest --preset=web-components
 - Generate a new standalone React app set up with Vite
 
 ```shell
-npx create-nx-workspace@latest --preset=react-standalone
+npx create-nx-workspace@latest --preset=react-standalone --bundler=vite
 ```
 
 ## Add Vite to an existing workspace

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

@@ -0,0 +1,43 @@
+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.
+
+Nx now allows you to [customize your webpack configuration](/packages/webpack/documents/webpack-config-setup) for your projects. And we also offer [a number of plugins](/packages/webpack/documents/webpack-plugins) for supporting Nx and other frameworks.
+
+## Setting up a new Nx workspace with Webpack
+
+You can create a new workspace that uses Webpack with one of the following commands:
+
+- Generate a new standalone React app set up with Webpack
+
+```shell
+npx create-nx-workspace@latest --preset=react-standalone --bundler=webpack
+```
+
+- Generate a new React monorepo set up with Webpack
+
+```shell
+npx create-nx-workspace@latest --preset=react-monorepo --bundler=webpack
+```
+
+## Generate a new project using Webpack
+
+You can generate a [React](/packages/react) application or library or a [Web](/packages/web) application that uses Webpack in an existing Nx workspace. The [`@nrwl/react:app`](/packages/react/generators/application), [`@nrwl/react:lib`](/packages/react/generators/library) and [`@nrwl/web:app`](/packages/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nrwl/webpack` plugin.
+
+To generate a React application using Webpack, run the following:
+
+```bash
+nx g @nrwl/react:app my-app --bundler=webpack
+```
+
+To generate a React library using Webpack, run the following:
+
+```bash
+nx g @nrwl/react:lib my-lib --bundler=webpack
+```
+
+To generate a Web application using Webpack, run the following:
+
+```bash
+nx g @nrwl/web:app my-app --bundler=webpack
+```