Configure Webpack in your Nx workspace

You can configure Webpack using a webpack.config.js file in your project. Nx infers the build and serve targets from your webpack configuration as long as you have @nx/webpack/plugin added to your nx.json.

nx.json

"plugins": [
  {
    "plugin": "@nx/webpack/plugin",
    "options": {
      "buildTargetName": "build",
      "serveTargetName": "serve"
    }
  }
]

In the webpack config file, you can add the necessary configuration for Webpack. Read more on how to configure Webpack in the Webpack documentation.

Basic and Nx-enhanced configuration files

Nx supported two flavors of Webpack configuration file:

1. Basic (or standard) Webpack configuration. The file exports a Webpack config object, or one of the standard configuration types.
2. Nx-enhanced Webpack configuration. The file exports a function built with composePlugins that takes in a Webpack configuration object plus the Nx build options and task context.

Nx v24 removed the composable plugins behind the second flavor, so write a basic configuration. It works with the Webpack CLI and with the inferred @nx/webpack/plugin.

Basic configuration for Nx

A basic Webpack configuration looks like this:

apps/demo/webpack.config.js

const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path');

module.exports = {
  output: {
    path: join(__dirname, '../../dist/apps/demo'),
  },
  devServer: {
    port: 4200,
  },
  plugins: [
    new NxAppWebpackPlugin({
      main: './src/main.ts',
      tsConfig: './tsconfig.app.json',
      index: './src/index.html',
      styles: ['./src/styles.css'],
      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
      optimization: process.env['NODE_ENV'] === 'production',
    }),
  ],
};

The NxAppWebpackPlugin plugin takes a main entry file and produces a bundle in the output directory as defined in output.path. You can also pass the index option if it is a webapp, which will handle outputting scripts and stylesheets in the output file. NxWebpackPlugin is optional, and you can bring your own Webpack configuration without using it or any plugins from @nx/webpack.

For more information, see the Webpack plugins guide.

Nx-enhanced configuration with composable plugins

Nx v24 removed composePlugins, withNx, withWeb, and withReact. Their exports remain as inert stubs so an unmigrated config still loads, but they no longer configure the build. A configuration written against them looked like this:

apps/demo/webpack.config.js

const { composePlugins, withNx } = require('@nx/webpack');

module.exports = composePlugins(
  // Default Nx composable plugin
  withNx(),
  // Custom composable plugin
  (config, { options, context }) => {
    // `config` is the Webpack configuration object
    // `options` holds Nx build options, such as `projectRoot`
    // `context` holds the Nx task context, such as `projectName`
    // customize configuration here
    return config;
  }
);

Move each composable plugin to its standard equivalent: withNx and withWeb become NxAppWebpackPlugin, and withReact becomes NxReactWebpackPlugin. A custom callback that took options and context becomes a local webpack plugin, or plain configuration with the values supplied directly. Running nx migrate generates step-by-step instructions for the projects in your workspace.

Customize your Webpack configuration

For most apps, the default configuration of Webpack is sufficient, but sometimes you need to tweak a setting in your Webpack config. The following sections show how to make a small change without taking on the maintenance burden of the entire webpack config.

Configure Webpack for React projects

React projects use the @nx/react package to build their apps. This package provides NxReactWebpackPlugin, which adds the necessary configuration for React to work with Webpack.

apps/demo/app/webpack.config.js

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/apps/demo'),
  },
  devServer: {
    port: 4200,
  },
  plugins: [
    new NxAppWebpackPlugin({
      tsConfig: './tsconfig.app.json',
      compiler: 'swc',
      main: './src/main.tsx',
      index: '.src/index.html',
      styles: ['./src/styles.css'],
      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
      optimization: process.env['NODE_ENV'] === 'production',
    }),
    new NxReactWebpackPlugin({
      // Uncomment this line if you don't want to use SVGR
      // See: https://react-svgr.com/
      // svgr: false
    }),
  ],
};

Configure Webpack for Module Federation

Nx v24 removed withModuleFederation and the rest of Nx Module Federation. Add ModuleFederationPlugin from @module-federation/enhanced/webpack to a standard webpack config instead. To move an existing config, follow migrate from Nx Module Federation for React or migrate Angular Module Federation for Angular.

Reference the Webpack documentation for details on the structure of the Webpack configuration object.

Configure Webpack for Next.js Applications

Next.js supports Webpack customization in the next.config.js file.

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Important: return the modified config
    return config;
  },
};

module.exports = nextConfig;

Read the official documentation for more details.