feat(webpack-cli): add --env-file flag support

Add support for import.meta.env and introduce --env-file flag to load
environment variables from .env files into the bundled files.

- Support for import.meta.env in webpack builds
- New --env-file CLI flag for specifying whether to load .env files for configuration
- Renamed dotenv plugin for clarity

Author: Sakib25800

packages/webpack-cli/src/bootstrap.ts

@@ -1,16 +1,8 @@
 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();
 

…webpack-cli/src/plugins/dotenv-plugin.ts …cli/src/plugins/dotenv-webpack-plugin.tspackages/webpack-cli/src/plugins/dotenv-plugin.ts renamed to packages/webpack-cli/src/plugins/dotenv-webpack-plugin.ts packages/webpack-cli/src/plugins/dotenv-plugin.ts renamed to packages/webpack-cli/src/plugins/dotenv-webpack-plugin.ts

@@ -6,24 +6,41 @@ export class DotenvPlugin {
   logger!: ReturnType<Compiler["getInfrastructureLogger"]>;
   options: DotenvPluginOptions;
 
-  constructor(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,
+        prefix: this.options.prefix,
+        dir: this.options.dir,
       });
+      const envObj = JSON.stringify(env);
+
+      const runtimeEnvObject = `(() => {
+          const env = ${envObj};
+          // Make it read-only
+          return Object.freeze(env);
+        })()`;
 
-      new DefinePlugin(
-        Object.fromEntries(
+      const definitions = {
+        "process.env": envObj,
+        ...Object.fromEntries(
           Object.entries(env).map(([key, value]) => [`process.env.${key}`, JSON.stringify(value)]),
         ),
-      ).apply(compiler);
+        "import.meta.env": runtimeEnvObject,
+        ...Object.fromEntries(
+          Object.entries(env).map(([key, value]) => [
+            `import.meta.env.${key}`,
+            JSON.stringify(value),
+          ]),
+        ),
+      };
+
+      new DefinePlugin(definitions).apply(compiler);
     } catch (error) {
       this.logger.error(error);
     }

packages/webpack-cli/src/types.ts

@@ -177,6 +177,7 @@ type WebpackDevServerOptions = DevServerConfig &
     disableInterpret?: boolean;
     extends?: string[];
     argv: Argv;
+    envFile?: boolean;
   };
 
 type Callback<T extends unknown[]> = (...args: T) => void;
@@ -245,7 +246,8 @@ interface CLIPluginOptions {
 }
 
 interface DotenvPluginOptions {
-  prefixes?: string | string[];
+  prefix?: string | string[];
+  dir?: string;
 }
 
 type BasicPrimitive = string | boolean | number;

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

@@ -5,8 +5,8 @@ import { loadEnvFile } from "process";
 
 export interface EnvLoaderOptions {
   mode?: string;
-  envDir?: string;
-  prefixes?: string | string[];
+  dir?: string;
+  prefix?: string | string[];
 }
 
 export class EnvLoader {
@@ -20,25 +20,17 @@ export class EnvLoader {
   }
 
   static loadEnvFiles(options: EnvLoaderOptions = {}): Record<string, string> {
-    const {
-      mode = process.env.NODE_ENV || "development",
-      envDir = process.cwd(),
-      prefixes,
-    } = options;
+    const { mode = process.env.NODE_ENV, dir = process.cwd(), prefix } = options;
 
-    const normalizedPrefixes = prefixes
-      ? Array.isArray(prefixes)
-        ? prefixes
-        : [prefixes]
-      : undefined;
+    const normalizedPrefixes = prefix ? (Array.isArray(prefix) ? prefix : [prefix]) : ["WEBPACK_"];
 
     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 envFiles = this.getEnvFilePaths(mode, dir);
     const env: Record<string, string> = {};
 
     // Load all env files
@@ -50,17 +42,13 @@ export class EnvLoader {
       }
     });
 
-    // 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;
-        }
+    // Filter env vars based on prefix
+    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>;
+    return env;
   }
 }

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

@@ -56,7 +56,8 @@ 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";
+import { type DotenvPlugin as DotenvPluginClass } from "./plugins/dotenv-webpack-plugin";
+import { EnvLoader } from "./utils/env-loader";
 
 const fs = require("fs");
 const { Readable } = require("stream");
@@ -1021,6 +1022,18 @@ class WebpackCLI implements IWebpackCLI {
         description: "Print compilation progress during build.",
         helpLevel: "minimum",
       },
+      {
+        name: "env-file",
+        configs: [
+          {
+            type: "enum",
+            values: [true],
+          },
+        ],
+        description:
+          "Load environment variables from .env files for access within the configuration.",
+        helpLevel: "minimum",
+      },
 
       // Output options
       {
@@ -1793,6 +1806,10 @@ class WebpackCLI implements IWebpackCLI {
   }
 
   async loadConfig(options: Partial<WebpackDevServerOptions>) {
+    if (options.envFile) {
+      EnvLoader.loadEnvFiles();
+    }
+
     const disableInterpret =
       typeof options.disableInterpret !== "undefined" && options.disableInterpret;
 
@@ -2172,10 +2189,9 @@ class WebpackCLI implements IWebpackCLI {
         "./plugins/cli-plugin",
       );
 
-    const DotenvPlugin =
-      await this.tryRequireThenImport<Instantiable<DotenvPluginClass, [DotenvPluginOptions]>>(
-        "./plugins/dotenv-plugin",
-      );
+    const DotenvPlugin = await this.tryRequireThenImport<
+      Instantiable<DotenvPluginClass, [DotenvPluginOptions?]>
+    >("./plugins/dotenv-webpack-plugin");
 
     const internalBuildConfig = (item: WebpackConfiguration) => {
       const originalWatchValue = item.watch;