@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

nx add @nx/webpack

Or install manually:

npm

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.