84796d011e
## Current Behavior - Documentation pages under "technologies" and "core-api" sections with "introduction"/"overview" IDs lack H1 titles after front matter - Some remote caching package links point to parent sections instead of overview pages ## Expected Behavior - All affected documentation pages should have H1 titles for consistency - Links should point directly to overview pages ## Related Issue(s) Fixes # ## Changes Made ### 1. Updated Remote Caching Links (commit fae9055f8c) Updated links in 3 files to point directly to overview pages: - `docs/blog/2025-01-06-nx-update-20-3.md` - `docs/shared/deprecated/custom-tasks-runner.md` - `docs/shared/recipes/running-tasks/self-hosted-caching.md` Changed links from: - `/reference/core-api/azure-cache` → `/reference/core-api/azure-cache/overview` - `/reference/core-api/gcs-cache` → `/reference/core-api/gcs-cache/overview` - `/reference/core-api/s3-cache` → `/reference/core-api/s3-cache/overview` - `/reference/core-api/shared-fs-cache` → `/reference/core-api/shared-fs-cache/overview` ### 2. Added H1 Titles to Documentation Pages Added H1 titles to 29 documentation files that were missing them: #### Core API Overview Pages (6 files) - `docs/shared/packages/azure-cache/azure-cache-plugin.md` → `# @nx/azure-cache` - `docs/shared/packages/conformance/conformance-plugin.md` → `# @nx/conformance` - `docs/shared/packages/gcs-cache/gcs-cache-plugin.md` → `# @nx/gcs-cache` - `docs/shared/packages/owners/owners-plugin.md` → `# @nx/owners` - `docs/shared/packages/s3-cache/s3-cache-plugin.md` → `# @nx/s3-cache` - `docs/shared/packages/shared-fs-cache/shared-fs-cache-plugin.md` → `# @nx/shared-fs-cache` #### Technology Introduction Pages (23 files) - `docs/shared/packages/angular/angular-plugin.md` → `# @nx/angular` - `docs/shared/packages/esbuild/esbuild-plugin.md` → `# @nx/esbuild` - `docs/shared/packages/rspack/rspack-plugin.md` → `# @nx/rspack` - `docs/shared/packages/vite/vite-plugin.md` → `# @nx/vite` - `docs/shared/packages/webpack/plugin-overview.md` → `# @nx/webpack` - `docs/shared/packages/eslint/eslint.md` → `# @nx/eslint` - `docs/shared/packages/gradle/gradle-plugin.md` → `# @nx/gradle` - `docs/shared/packages/express/express-plugin.md` → `# @nx/express` - `docs/shared/packages/node/node-plugin.md` → `# @nx/node` - `docs/shared/packages/nest/nest-plugin.md` → `# @nx/nest` - `docs/shared/packages/expo/expo-plugin.md` → `# @nx/expo` - `docs/shared/packages/react/react-plugin.md` → `# @nx/react` - `docs/shared/packages/next/plugin-overview.md` → `# @nx/next` - `docs/shared/packages/react-native/react-native-plugin.md` → `# @nx/react-native` - `docs/shared/packages/remix/remix-plugin.md` → `# @nx/remix` - `docs/shared/packages/cypress/cypress-plugin.md` → `# @nx/cypress` - `docs/shared/packages/detox/detox-plugin.md` → `# @nx/detox` - `docs/shared/packages/jest/jest-plugin.md` → `# @nx/jest` - `docs/shared/packages/playwright/playwright-plugin.md` → `# @nx/playwright` - `docs/shared/packages/storybook/plugin-overview.md` → `# @nx/storybook` - `docs/shared/packages/js/js-plugin.md` → `# @nx/js` - `docs/shared/packages/vue/vue-plugin.md` → `# @nx/vue` - `docs/shared/packages/nuxt/nuxt-plugin.md` → `# @nx/nuxt` Note: The Angular Rspack introduction page (`docs/shared/guides/angular-rspack/introduction.md`) already had an appropriate H1 title "# Introduction" and was left unchanged. All changes improve documentation consistency and navigation by ensuring proper titles and direct links to overview pages.
100 lines
3.8 KiB
Markdown
100 lines
3.8 KiB
Markdown
---
|
|
title: Overview of the Nx Webpack Plugin
|
|
description: The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.
|
|
---
|
|
|
|
# @nx/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 `@nx/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](/technologies/build-tools/webpack/recipes/webpack-config-setup) for your projects. And we also offer [a number of webpack plugins](/technologies/build-tools/webpack/recipes/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
|
|
```
|
|
|
|
### Installation
|
|
|
|
{% callout type="note" title="Keep Nx Package Versions In Sync" %}
|
|
Make sure to install the `@nx/webpack` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
|
|
{% /callout %}
|
|
|
|
In any Nx workspace, you can install `@nx/webpack` by running the following command:
|
|
|
|
```shell {% skipRescope=true %}
|
|
nx add @nx/webpack
|
|
```
|
|
|
|
This will install the correct version of `@nx/webpack`.
|
|
|
|
### How @nx/webpack Infers Tasks
|
|
|
|
The `@nx/webpack` plugin will create a task for any project that has a Webpack configuration file present. Any of the following files will be recognized as a Webpack configuration file:
|
|
|
|
- `webpack.config.js`
|
|
- `webpack.config.ts`
|
|
- `webpack.config.mjs`
|
|
- `webpack.config.cjs`
|
|
|
|
### View Inferred Tasks
|
|
|
|
To view inferred tasks for a project, open the [project details view](/concepts/inferred-tasks) in Nx Console or run `nx show project my-project --web` in the command line.
|
|
|
|
### @nx/webpack Configuration
|
|
|
|
The `@nx/webpack/plugin` is configured in the `plugins` array in `nx.json`.
|
|
|
|
```json {% fileName="nx.json" %}
|
|
{
|
|
"plugins": [
|
|
{
|
|
"plugin": "@nx/webpack/plugin",
|
|
"options": {
|
|
"buildTargetName": "build",
|
|
"previewTargetName": "preview",
|
|
"serveTargetName": "serve",
|
|
"serveStaticTargetName": "serve-static"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Webpack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
|
|
|
|
## Generate a new project using Webpack
|
|
|
|
You can generate a [React](/technologies/react/introduction) application or a [Web](/reference/core-api/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/technologies/react/api/generators/application), [`@nx/node:app`](/technologies/node/api/generators/application) and [`@nx/web:app`](/reference/core-api/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 `@nx/webpack` plugin.
|
|
|
|
To generate a React application using Webpack, run the following:
|
|
|
|
```bash
|
|
nx g @nx/react:app apps/my-app --bundler=webpack
|
|
```
|
|
|
|
To generate a Node application using Webpack, run the following:
|
|
|
|
```bash
|
|
nx g @nx/node:app apps/my-app --bundler=webpack
|
|
```
|
|
|
|
To generate a Web application using Webpack, run the following:
|
|
|
|
```bash
|
|
nx g @nx/web:app apps/my-app --bundler=webpack
|
|
```
|