> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nrwl/nx/llms.txt
> Use this file to discover all available pages before exploring further.

# @nx/webpack

> The Webpack plugin for Nx provides executors and generators for building and serving applications using Webpack.

The `@nx/webpack` plugin integrates Webpack into your Nx workspace. It provides the `webpack` build executor, the `dev-server` executor for development serving, and the `withNx()` config helper that wires Nx features (like TypeScript path aliases and distributed caching) into your Webpack configuration.

## Installation

```bash theme={null}
nx add @nx/webpack
```

Or install manually:

<CodeGroup>
  ```bash npm theme={null}
  npm install --save-dev @nx/webpack
  ```

  ```bash pnpm theme={null}
  pnpm add --save-dev @nx/webpack
  ```

  ```bash yarn theme={null}
  yarn add --dev @nx/webpack
  ```
</CodeGroup>

## What the plugin provides

<CardGroup cols={3}>
  <Card title="Executors" icon="play">
    Build with webpack, serve with webpack-dev-server, and serve SSR applications.
  </Card>

  <Card title="Generators" icon="wand-sparkles">
    Convert existing Webpack config files to use the `NxAppWebpackPlugin` pattern. Migrate executor-based configs to inferred tasks.
  </Card>

  <Card title="Inferred tasks" icon="bolt">
    Detects `webpack.config.js/ts` files and infers build and serve targets automatically.
  </Card>
</CardGroup>

## Generators

### convert-config-to-webpack-plugin

Convert an existing Webpack configuration file to use the `NxAppWebpackPlugin` and `NxReactWebpackPlugin` pattern. This is the recommended approach for new projects.

```bash theme={null}
nx generate @nx/webpack:convert-config-to-webpack-plugin --project=myapp
```

### convert-to-inferred

Migrate existing projects that use the `@nx/webpack:webpack` executor to use the inferred task plugin (`@nx/webpack/plugin`).

```bash theme={null}
nx generate @nx/webpack:convert-to-inferred

# Migrate a single project
nx generate @nx/webpack:convert-to-inferred --project=myapp
```

## Executors

### webpack

Build a web application using Webpack.

```json theme={null}
{
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/myapp",
        "index": "myapp/src/index.html",
        "main": "myapp/src/main.tsx",
        "tsConfig": "myapp/tsconfig.app.json",
        "webpackConfig": "myapp/webpack.config.js"
      },
      "configurations": {
        "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false
        }
      }
    }
  }
}
```

```bash theme={null}
nx build myapp
nx build myapp --configuration=production
```

### dev-server

Serve a web application in development mode using webpack-dev-server with hot module replacement.

```json theme={null}
{
  "targets": {
    "serve": {
      "executor": "@nx/webpack:dev-server",
      "options": {
        "buildTarget": "myapp:build"
      },
      "configurations": {
        "production": {
          "buildTarget": "myapp:build:production"
        }
      }
    }
  }
}
```

```bash theme={null}
nx serve myapp
```

### ssr-dev-server

Serve a server-side rendered (SSR) application using two Webpack processes: one for the browser bundle and one for the server bundle.

```json theme={null}
{
  "targets": {
    "serve-ssr": {
      "executor": "@nx/webpack:ssr-dev-server",
      "options": {
        "browserTarget": "myapp:build",
        "serverTarget": "myapp:server",
        "port": 4200
      }
    }
  }
}
```

## Inferred tasks

When `@nx/webpack/plugin` is registered in `nx.json`, Nx detects `webpack.config.js` or `webpack.config.ts` files and automatically infers `build` and `serve` targets.

```json theme={null}
{
  "plugins": [
    {
      "plugin": "@nx/webpack/plugin",
      "options": {
        "buildTargetName": "build",
        "serveTargetName": "serve",
        "serveStaticTargetName": "serve-static"
      }
    }
  ]
}
```

## Configuration examples

### webpack.config.js with NxAppWebpackPlugin

The recommended approach uses `NxAppWebpackPlugin` instead of manually calling `withNx()`:

```javascript theme={null}
const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
const { join } = require('path');

module.exports = {
  output: {
    path: join(__dirname, '../../dist/myapp'),
  },
  devServer: {
    port: 4200,
  },
  plugins: [
    new NxAppWebpackPlugin({
      tsConfig: './tsconfig.app.json',
      compiler: 'babel',
      main: './src/main.tsx',
      index: './src/index.html',
      baseHref: '/',
      assets: ['./src/favicon.ico', './src/assets'],
      styles: ['./src/styles.css'],
      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
      optimization: process.env['NODE_ENV'] === 'production',
    }),
    new NxReactWebpackPlugin({
      svgr: false,
    }),
  ],
};
```

### Legacy webpack.config.js with withNx

For projects that have not yet migrated to `NxAppWebpackPlugin`:

```javascript theme={null}
const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');

module.exports = composePlugins(
  withNx(),
  withReact({
    svgr: false,
  }),
  (config) => {
    // Extend or override the Webpack config here
    return config;
  }
);
```

<Note>
  The `withNx()` helper automatically configures TypeScript path aliases, source maps, and other Nx-specific Webpack features. Use `composePlugins` to layer additional configuration on top.
</Note>

## Built-in loader support

`@nx/webpack` ships with loaders and plugins pre-configured for common use cases:

<CardGroup cols={2}>
  <Card title="Styles" icon="palette">
    CSS, SCSS/Sass, Less — with `css-loader`, `sass-loader`, `less-loader`, and `mini-css-extract-plugin`.
  </Card>

  <Card title="TypeScript" icon="code">
    TypeScript compilation via `ts-loader` or Babel with `fork-ts-checker-webpack-plugin` for type checking.
  </Card>

  <Card title="Assets" icon="image">
    Static asset handling with `copy-webpack-plugin`.
  </Card>

  <Card title="Optimization" icon="bolt">
    Production minification with `terser-webpack-plugin` and CSS minification with `css-minimizer-webpack-plugin`.
  </Card>
</CardGroup>