Webpack load env-file using Dotenv Plugin using Nx pattern (webpack.config.js)

webpack.config.js

const { composePlugins, withNx } = require('@nx/webpack');
const Dotenv = require('dotenv-webpack');

const fs = require('fs');
const path = require('path');

// check for available env file using Nx conventions and return the path
function resolveEnvFile(basePath = __dirname) {
  const envFiles = [
    `.env.${process.env.NX_TASK_TARGET_CONFIGURATION}.${process.env.NX_TASK_TARGET_TARGET}`,
    `.${process.env.NX_TASK_TARGET_CONFIGURATION}.${process.env.NX_TASK_TARGET_TARGET}.env`,
    `.env.${process.env.NX_TASK_TARGET_TARGET}`,
    `.${process.env.NX_TASK_TARGET_TARGET}.env`,
    `.env.${process.env.NX_TASK_TARGET_CONFIGURATION}`,
    `.${process.env.NX_TASK_TARGET_CONFIGURATION}.env`,
    `.local.env`,
    `.env.local`,
    `.env`,
  ];
  for (const file of envFiles) {
    const envPath = path.resolve(basePath, file);
    if (fs.existsSync(envPath)) {
      return envPath;
    }
  }
  return null;
}

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

  return config;
});