Extend Webpack for React app

You can extend an applications webpackconfig with some simple steps:

1. create a webpack.config.js in your apps root folder
2. include the @nrwl/react/plugins/webpack
3. extend the config as needed

Example of adding node options and dotenv:

/* eslint-disable @typescript-eslint/no-var-requires */
const babelWebpackConfig = require('@nrwl/react/plugins/webpack');
const dotenv = require('dotenv-webpack');
const path = require('path');

module.exports = (config) => {
  babelWebpackConfig(config);
  return {
    ...config,
    node: { ...config.node, global: true, fs: 'empty' },
    plugins: [
      ...config.plugins,
      new dotenv({
        path: path.resolve(
          process.cwd(),
          'apps/pm-money-management/pending-payments/.env.development'
        ),
      }),
    ],
  };
};

4. For NX to read to config during build: navigate to your application in workspace.json and add the path to the webpack.config.json here:

"architect": {
    "build": {
        "executor": "@nrwl/web:build",
        "options": {
            ...
            "webpackConfig": "./apps/{team-space}/{application}/webpack.config.js"
        }
    }
}