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:
- Basic (or standard) Webpack configuration. The file exports a Webpack config object, or one of the standard configuration types.
- 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:
- You can chain multiple plugins together using the
composePlugins
function. Each plugin can update the webpack configuration as needed. - 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.