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.
withNx
The withNx plugin provides common configuration for the build, including TypeScript support and linking workspace libraries (via tsconfig paths).
Options
skipTypeChecking
Type: boolean
Disable type checks (useful to speed up builds).
Example
1const { composePlugins, withNx } = require('@nx/webpack');
2
3module.exports = composePlugins(withNx(), (config) => {
4 // Further customize webpack config
5 return config;
6});
7withWeb
The withWeb plugin adds support for CSS/SASS/Less stylesheets, assets (such as images and fonts), and index.html processing.
Options
baseHref
Type: string
Base URL for the application being built.
crossOrigin
Type: 'none' | 'anonymous' | 'use-credentials'
"The crossorigin attribute to use for generated javascript script tags. One of 'none' | 'anonymous' | 'use-credentials'."
deployUrl
Type: string
URL where the application will be deployed.
extractCss
Type: boolean
Extract CSS into a .css file.
generateIndexHtml
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.
index
Type: string
HTML File which will be contain the application.
postcssConfig
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.
scripts
Type: string[]
Paths to scripts (relative to workspace root) which will be included before the main application entry.
stylePreprocessorOptions
Type: { includePaths: string[] }
Options to pass to style preprocessors. includePaths is a list of paths that are included (e.g. workspace libs with stylesheets).
styles
Type: string[]
Paths to stylesheets (relative to workspace root) which will be included with the application.
subresourceIntegrity
Type: boolean
Enables the use of subresource integrity validation.
Example
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);
15withReact
The withReact plugin adds support for React JSX, SVGR, and Fast Refresh
Options
The options are the same as withWeb plus the following.
svgr
Type: undefined|false
SVGR allows SVG files to be imported as React components. Set this to false to disable this behavior.
Example
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: false,
9 postcssConfig: 'my-app/postcss',
10 }),
11 (config) => {
12 // Further customize webpack config
13 return config;
14 }
15);
16withModuleFederation 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.
Options
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).
name
Type: string
The name of the host/remote application.
remotes
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.
library
Type: { type: string; name: string }
exposes
Type: Record<string, string>
Entry points that are exposed from a remote application.
e.g.
1exposes: {
2 './Module': '<app-root>/src/remote-entry.ts',
3},
4shared
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.
additionalShared
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