feat: initial implementation of .env support

- Load env vars at build time and run time

Author: Sakib25800

packages/webpack-cli/src/bootstrap.ts

@@ -1,8 +1,16 @@
 import { type IWebpackCLI } from "./types";
+import { EnvLoader } from "./utils/env-loader";
 
 const WebpackCLI = require("./webpack-cli");
 
 const runCLI = async (args: Parameters<IWebpackCLI["run"]>[0]) => {
+  // Load environment variables from .env files
+  try {
+    EnvLoader.loadEnvFiles();
+  } catch (error) {
+    console.warn("Warning: Error loading environment variables:", error);
+  }
+
   // Create a new instance of the CLI object
   const cli: IWebpackCLI = new WebpackCLI();
 

packages/webpack-cli/src/plugins/dotenv-plugin.ts

@@ -0,0 +1,33 @@
+import { Compiler, DefinePlugin } from "webpack";
+import type { DotenvPluginOptions } from "../types";
+import { EnvLoader } from "../utils/env-loader";
+
+export class DotenvPlugin {
+  logger!: ReturnType<Compiler["getInfrastructureLogger"]>;
+  options: DotenvPluginOptions;
+
+  constructor(options: DotenvPluginOptions) {
+    this.options = options;
+  }
+
+  apply(compiler: Compiler) {
+    this.logger = compiler.getInfrastructureLogger("DotenvPlugin");
+
+    try {
+      const env = EnvLoader.loadEnvFiles({
+        mode: process.env.NODE_ENV,
+        prefixes: this.options.prefixes,
+      });
+
+      new DefinePlugin(
+        Object.fromEntries(
+          Object.entries(env).map(([key, value]) => [`process.env.${key}`, JSON.stringify(value)]),
+        ),
+      ).apply(compiler);
+    } catch (error) {
+      this.logger.error(error);
+    }
+  }
+}
+
+module.exports = DotenvPlugin;

packages/webpack-cli/src/types.ts

@@ -239,6 +239,10 @@ interface CLIPluginOptions {
   analyze?: boolean;
 }
 
+interface DotenvPluginOptions {
+  prefixes?: string | string[];
+}
+
 type BasicPrimitive = string | boolean | number;
 type Instantiable<InstanceType = unknown, ConstructorParameters extends unknown[] = unknown[]> = {
   new (...args: ConstructorParameters): InstanceType;
@@ -318,6 +322,7 @@ export {
   CallableWebpackConfiguration,
   Callback,
   CLIPluginOptions,
+  DotenvPluginOptions,
   CommandAction,
   CommanderOption,
   CommandOptions,

packages/webpack-cli/src/utils/env-loader.ts

@@ -0,0 +1,66 @@
+import path from "path";
+import { normalize } from "path";
+// eslint-disable-next-line
+import { loadEnvFile } from "process";
+
+export interface EnvLoaderOptions {
+  mode?: string;
+  envDir?: string;
+  prefixes?: string | string[];
+}
+
+export class EnvLoader {
+  static getEnvFilePaths(mode = "development", envDir = process.cwd()): string[] {
+    return [
+      `.env`, // default file
+      `.env.local`, // local file
+      `.env.${mode}`, // mode file
+      `.env.${mode}.local`, // mode local file
+    ].map((file) => normalize(path.join(envDir, file)));
+  }
+
+  static loadEnvFiles(options: EnvLoaderOptions = {}): Record<string, string> {
+    const {
+      mode = process.env.NODE_ENV || "development",
+      envDir = process.cwd(),
+      prefixes,
+    } = options;
+
+    const normalizedPrefixes = prefixes
+      ? Array.isArray(prefixes)
+        ? prefixes
+        : [prefixes]
+      : undefined;
+
+    if (mode === "local") {
+      throw new Error(
+        '"local" cannot be used as a mode name because it conflicts with the .local postfix for .env files.',
+      );
+    }
+
+    const envFiles = this.getEnvFilePaths(mode, envDir);
+    const env: Record<string, string> = {};
+
+    // Load all env files
+    envFiles.forEach((filePath) => {
+      try {
+        loadEnvFile(filePath);
+      } catch {
+        // Skip if file doesn't exist
+      }
+    });
+
+    // If prefixes are specified, filter environment variables
+    if (normalizedPrefixes?.length) {
+      for (const [key, value] of Object.entries(process.env)) {
+        if (normalizedPrefixes.some((prefix) => key.startsWith(prefix))) {
+          env[key] = value as string;
+        }
+      }
+      return env;
+    }
+
+    // Return all environment variables if no prefixes specified
+    return { ...process.env } as Record<string, string>;
+  }
+}

packages/webpack-cli/src/webpack-cli.ts

@@ -39,6 +39,7 @@ import type {
   RechoirError,
   Argument,
   Problem,
+  DotenvPluginOptions,
 } from "./types";
 
 import type webpackMerge from "webpack-merge";
@@ -55,6 +56,7 @@ import { type stringifyChunked } from "@discoveryjs/json-ext";
 import { type Help, type ParseOptions } from "commander";
 
 import { type CLIPlugin as CLIPluginClass } from "./plugins/cli-plugin";
+import { type DotenvPlugin as DotenvPluginClass } from "./plugins/dotenv-plugin";
 
 const fs = require("fs");
 const { Readable } = require("stream");
@@ -2170,6 +2172,11 @@ class WebpackCLI implements IWebpackCLI {
         "./plugins/cli-plugin",
       );
 
+    const DotenvPlugin =
+      await this.tryRequireThenImport<Instantiable<DotenvPluginClass, [DotenvPluginOptions]>>(
+        "./plugins/dotenv-plugin",
+      );
+
     const internalBuildConfig = (item: WebpackConfiguration) => {
       const originalWatchValue = item.watch;
 
@@ -2343,6 +2350,9 @@ class WebpackCLI implements IWebpackCLI {
             analyze: options.analyze,
             isMultiCompiler: Array.isArray(config.options),
           }),
+          new DotenvPlugin({
+            prefixes: ["WEBPACK_"],
+          }),
         );
       }
     };