Configure webpack on your Nx workspace

You can configure Webpack using a webpack.config.js file in your project. You can set the path to this file in your project.json file, in the build target options:

//...
"my-app": {
    "targets": {
        //...
        "build": {
            "executor": "@nrwl/webpack:webpack",
            //...
            "options": {
                //...
                "webpackConfig": "apps/my-app/webpack.config.js"
            },
            "configurations": {
                ...
            }
        },
    }
}

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

Basic configuration for Nx

You should start with a basic webpack configuration for Nx in your project, that looks like this:

// apps/my-app/webpack.config.js
const { composePlugins, withNx } = require('@nrwl/webpack');

module.exports = composePlugins(withNx(), (config) => {
  // customize webpack config here
  return config;
});

The withNx() plugin adds the necessary configuration for Nx to work with Webpack. The composePlugins function allows you to add other plugins to the configuration.

Add configurations for other functionalities

In addition to the basic configuration, you can add configurations for other frameworks or features. The @nrwl/webpack package provides plugins such as withWeb and withReact. This plugins provide features such as TS support, CSS support, JSX support, etc. You can read more about how these plugins work and how to use them in our Webpack Plugins guide.

You may still reconfigure everything manually, without using the Nx plugins. However, these plugins ensure that you have the necessary configuration for Nx to work with your project.

Here is an example of a configuration that uses the withReact plugin:

// apps/my-react-app/webpack.config.js
const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), withReact(), (config) => {
  // Update the webpack config as needed here.
  // e.g. config.plugins.push(new MyPlugin())
  return config;
});