Configure Webpack in your Nx workspace (2024)

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

1"plugins": [2 {3 "plugin": "@nx/webpack/plugin",4 "options": {5 "buildTargetName": "build",6 "serveTargetName": "serve"7 }8 }9]10

If you are using the @nx/webpack:webpack executor, the path to your webpack config is set in the webpackConfig option in your project.json file.

project.json

1"my-app": {2 "targets": {3 //...4 "build": {5 "executor": "@nx/webpack:webpack",6 "options": {7 "webpackConfig": "apps/my-app/webpack.config.js",8 //...9 },10 // ...11 },12 }13}14

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

Nx supports two flavors of Webpack configuration files:

  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 that takes in a Webpack configuration object, plus the @nx/webpack:webpack options and context, and returns an updated Webpack configuration object.

The basic configuration works with Webpack CLI, whereas the Nx-enhanced configuration requires the use of the @nx/webpack:webpack executor.

Basic configuration for Nx

Module federation support

Currently, Nx module federation requires an enhanced Webpack configuration file an the use of the withModuleFederation plugin. See the next section for more details.

A basic Webpack configuration was introduced in Nx 18, and it looks like this:

apps/demo/webpack.config.js

1const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');2const { join } = require('path');34module.exports = {5 output: {6 path: join(__dirname, '../../dist/apps/demo'),7 },8 devServer: {9 port: 4200,10 },11 plugins: [12 new NxAppWebpackPlugin({13 main: './src/main.ts',14 tsConfig: './tsconfig.app.json',15 index: './src/index.html',16 styles: ['./src/styles.css'],17 outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',18 optimization: process.env['NODE_ENV'] === 'production',19 }),20 ],21};22

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. Note that 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

Non-standard webpack config

Nx-enhanced configuration, via composePlugins and withNx functions, requires the usage of @nx/webpack:webpack executor in your project.json file. This flavor of configuration do not work with the Webpack CLI.

Nx supports a function to be returned from the Webpack configuration file. This function is a composable plugin that is understood by the @nx/webpack:webpack executor. The enhanced configuration looks something like this:

apps/demo/webpack.config.js

1const { composePlugins, withNx } = require('@nx/webpack');23module.exports = composePlugins(4 // Default Nx composable plugin5 withNx(),6 // Custom composable plugin7 (config, { options, context }) => {8 // `config` is the Webpack configuration object9 // `options` is the options passed to the `@nx/webpack:webpack` executor10 // `context` is the context passed to the `@nx/webpack:webpack` executor11 // customize configuration here12 return config;13 }14);15

There are two advantages of this approach:

  1. You can chain multiple plugins together using the composePlugins function. Each plugin can update the webpack configuration as needed.
  2. You gain access to the target options and executor context within the webpack configuration file.

This gives you the ability to customize the Webpack configuration as needed, and make use of the options and context passed to the executor, as well.

Additional composable plugins for Nx

In addition to the withNx composable plugin, Nx provides other composable plugins such as withWeb, withReact, and withModuleFederation. You can read more about how these plugins work and how to use them in our Webpack plugins guide.

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. This guide explains 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 and a withReact composable plugin that adds the necessary configuration for React to work with Webpack. The NxReactWebpackPlugin is used in a basic Webpack configuration file, whereas withReact is requires a Nx-enhanced Webpack configuration file.

apps/demo/app/webpack.config.js

1const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');2const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');3const { join } = require('path');45module.exports = {6 output: {7 path: join(__dirname, '../../dist/apps/demo'),8 },9 devServer: {10 port: 4200,11 },12 plugins: [13 new NxAppWebpackPlugin({14 tsConfig: './tsconfig.app.json',15 compiler: 'swc',16 main: './src/main.tsx',17 index: '.src/index.html',18 styles: ['./src/styles.css'],19 outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',20 optimization: process.env['NODE_ENV'] === 'production',21 }),22 new NxReactWebpackPlugin({23 // Uncomment this line if you don't want to use SVGR24 // See: https://react-svgr.com/25 // svgr: false26 }),27 ],28};29

Configure Webpack for Module Federation

Non-standard webpack config

composePlugins, withNx, and withModuleFederation do not work with the Webpack CLI and requires the use of the @nx/webpack:webpack executor.

If you use the Module Federation support from @nx/angular or @nx/react then you can customize your Webpack configuration as follows.

apps/my-app/webpack.config.js

1const { composePlugins, withNx } = require('@nx/webpack');2const { merge } = require('webpack-merge');3const withModuleFederation = require('@nx/react/module-federation');4// or `const withModuleFederation = require('@nx/angular/module-federation');`56module.exports = composePlugins(7 withNx(),8 async (config, { options, context }) => {9 const federatedModules = await withModuleFederation({10 // your options here11 });1213 return merge(federatedModules(config, { options, context }), {14 // overwrite values here15 });16 }17);18

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

1const { withNx } = require('@nx/next/plugins/with-nx');23const nextConfig = {4 webpack: (5 config,6 { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }7 ) => {8 // Important: return the modified config9 return config;10 },11};1213return withNx(nextConfig);14

Read the official documentation for more details.

Configure Webpack in your Nx workspace (2024)
Top Articles
Latest Posts
Recommended Articles
Article information

Author: Wyatt Volkman LLD

Last Updated:

Views: 5917

Rating: 4.6 / 5 (66 voted)

Reviews: 89% of readers found this page helpful

Author information

Name: Wyatt Volkman LLD

Birthday: 1992-02-16

Address: Suite 851 78549 Lubowitz Well, Wardside, TX 98080-8615

Phone: +67618977178100

Job: Manufacturing Director

Hobby: Running, Mountaineering, Inline skating, Writing, Baton twirling, Computer programming, Stone skipping

Introduction: My name is Wyatt Volkman LLD, I am a handsome, rich, comfortable, lively, zealous, graceful, gifted person who loves writing and wants to share my knowledge and understanding with you.