Skip to main content

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.

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

nx add @nx/webpack
Or install manually: 
npm install --save-dev @nx/webpack

​
What the plugin provides

Executors

Build with webpack, serve with webpack-dev-server, and serve SSR applications.

Generators

Convert existing Webpack config files to use the NxAppWebpackPlugin pattern. Migrate executor-based configs to inferred tasks.

Inferred tasks

Detects webpack.config.js/ts files and infers build and serve targets automatically.

​
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. 
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). 
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. 
{
  "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
        }
      }
    }
  }
}

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. 
{
  "targets": {
    "serve": {
      "executor": "@nx/webpack:dev-server",
      "options": {
        "buildTarget": "myapp:build"
      },
      "configurations": {
        "production": {
          "buildTarget": "myapp:build:production"
        }
      }
    }
  }
}

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. 
{
  "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. 
{
  "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(): 
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: 
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;
  }
);
The withNx() helper automatically configures TypeScript path aliases, source maps, and other Nx-specific Webpack features. Use composePlugins to layer additional configuration on top.

​
Built-in loader support

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

Styles

CSS, SCSS/Sass, Less — with css-loader, sass-loader, less-loader, and mini-css-extract-plugin.

TypeScript

TypeScript compilation via ts-loader or Babel with fork-ts-checker-webpack-plugin for type checking.

Assets

Static asset handling with copy-webpack-plugin.

Optimization

Production minification with terser-webpack-plugin and CSS minification with css-minimizer-webpack-plugin.

Build docs developers (and LLMs) love

Get started for freeTalk to us