Webpack plugins

Nx uses enhanced webpack configuration files (e.g. webpack.config.js). These configuration files export a plugin that takes in a webpack configuration object and returns an updated configuration object. Plugins are used by Nx to add functionality to the webpack build.

This guide contains information on the plugins provided by Nx. For more information on customizing webpack configuration, refer to the Nx Webpack configuration guide.


The withNx plugin provides common configuration for the build, including TypeScript support and linking workspace libraries (via tsconfig paths).



Type: boolean

Disable type checks (useful to speed up builds).


1const { composePlugins, withNx } = require('@nx/webpack'); 2 3module.exports = composePlugins(withNx(), (config) => { 4 // Further customize webpack config 5 return config; 6}); 7
Nx 15 and lower use @nrwl/ instead of @nx/


The withWeb plugin adds support for CSS/SASS/Less stylesheets, assets (such as images and fonts), and index.html processing.



Type: string

Base URL for the application being built.


Type: 'none' | 'anonymous' | 'use-credentials'

"The crossorigin attribute to use for generated javascript script tags. One of 'none' | 'anonymous' | 'use-credentials'."


Type: string

URL where the application will be deployed.


Type: boolean

Extract CSS into a .css file.


Type: boolean

Generates index.html file to the output path. This can be turned off if using a webpack plugin to generate HTML such as html-webpack-plugin.


Type: string

HTML File which will be contain the application.


Type: string

Set a path (relative to workspace root) to a PostCSS config that applies to the app and all libs. Defaults to undefined, which auto-detects postcss.config.js files in each app.


Type: string[]

Paths to scripts (relative to workspace root) which will be included before the main application entry.


Type: { includePaths: string[] }

Options to pass to style preprocessors. includePaths is a list of paths that are included (e.g. workspace libs with stylesheets).


Type: string[]

Paths to stylesheets (relative to workspace root) which will be included with the application.


Type: boolean

Enables the use of subresource integrity validation.


1const { composePlugins, withNx, withWeb } = require('@nx/webpack'); 2 3module.exports = composePlugins( 4 // always pass withNx() first 5 withNx(), 6 // add web functionality 7 withWeb({ 8 styles: ['my-app/src/styles.css'], 9 }), 10 (config) => { 11 // Further customize webpack config 12 return config; 13 } 14); 15
Nx 15 and lower use @nrwl/ instead of @nx/


The withReact plugin adds support for React JSX, SVGR, and Fast Refresh


The options are the same as withWeb plus the following.


Type: undefined|false

SVGR allows SVG files to be imported as React components. Set this to false to disable this behavior.


1const { composePlugins, withNx } = require('@nx/webpack'); 2const { withReact } = require('@nx/react'); 3 4module.exports = composePlugins( 5 withNx(), // always pass withNx() first 6 withReact({ 7 styles: ['my-app/src/styles.css'], 8 svgr: true, 9 postcssConfig: 'my-app/postcss', 10 }), 11 (config) => { 12 // Further customize webpack config 13 return config; 14 } 15); 16
Nx 15 and lower use @nrwl/ instead of @nx/

withModuleFederation and withModuleFederationForSSR

The withModuleFederation and withModuleFederationForSSR plugins add module federation support to the webpack build. These plugins use ModuleFederationPlugin and provide a simpler API through Nx.

For more information, refer to the Module Federation recipe.


Both withModuleFederation and withModuleFederationForSSR share the same options. The withModuleFederation plugin is for the browser, and the withModuleFederationForSSR plugin is used on the server-side (Node).


Type: string

The name of the host/remote application.


Type: Aray<string[] | [remoteName: string, remoteUrl: string]>

For host to specify all remote applications. If a string is used, Nx will match it with a matching remote in the workspace.

Use [<name>, <url>] to specify the exact URL of the remote, rather than what's in the remote's project.json file.


Type: { type: string; name: string }


Type: Record<string, string>

Entry points that are exposed from a remote application.


1exposes: { 2 './Module': '<app-root>/src/remote-entry.ts', 3}, 4


Type: Function

Takes a library name and the current share configuration, and returns one of

  • false - Exclude this library from shared.
  • undefined - Keep Nx sharing defaults.
  • SharedLibraryConfig - Override Nx sharing defaults with custom configuration.


Type: Array<string |{ libraryName: string; sharedConfig: SharedLibraryConfig }>

Shared libraries in addition to the ones that Nx detects automatically. Items match ModuleFederationPlugin's sharing configuration.

1const { composePlugins, withNx } = require('@nx/webpack'); 2const { withReact, withModuleFederation } = require('@nx/react'); 3 4// Host config 5// e.g. { remotes: ['about', 'dashboard'] } 6const moduleFederationConfig = require('./module-federation.config'); 7 8module.exports = composePlugins( 9 withNx(), 10 withReact(), 11 withModuleFederation(moduleFederationConfig), 12 (config) => { 13 // Further customize webpack config 14 return config; 15 } 16); 17
Nx 15 and lower use @nrwl/ instead of @nx/