feat: built in env files support

packages/dotenv-webpack-plugin/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "dotenv-webpack-plugin",
+  "version": "1.0.0",
+  "description": "A webpack plugin to support env files",
+  "main": "index.js",
+  "repository": "https://github.com/webpack/webpack-cli",
+  "author": "Burhanuddin Udaipurwala (burhanuday)",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "dotenv": "^16.0.3",
+    "dotenv-expand": "^10.0.0"
+  },
+  "peerDependencies": {
+    "webpack": "5.x.x"
+  }
+}

packages/dotenv-webpack-plugin/src/index.js

@@ -0,0 +1,68 @@
+const fs = require("fs");
+const path = require("path");
+const dotenv = require("dotenv");
+const dotenvExpand = require("dotenv-expand");
+const { DefinePlugin } = require("webpack");
+
+class DotenvWebpackPlugin {
+  constructor(config = {}) {
+    this.config = Object.assign(
+      {},
+      {
+        envFiles: [],
+        prefixes: ["process.env.", "import.meta.env."],
+      },
+      config,
+    );
+    this.cache = new Map();
+  }
+
+  apply(compiler) {
+    const currentDirectory = path.resolve(process.cwd(), "environment");
+
+    const mode = compiler.options.mode || "development";
+    // .local file variables will get precedence
+    const environmentFiles =
+      this.config.envFiles.length > 0
+        ? this.config.envFiles
+        : [
+            `${currentDirectory}/.env`, // loaded in all cases
+            `${currentDirectory}/.env.local`, // loaded in all cases, ignored by git
+            `${currentDirectory}/.env.${mode}`, // only loaded in specified mode
+            `${currentDirectory}/.env.${mode}.local`, // only loaded in specified mode, ignored by git
+          ];
+
+    let envVariables = {};
+    // parse environment vars from .env files
+    environmentFiles.forEach((environmentFile) => {
+      if (fs.existsSync(environmentFile)) {
+        try {
+          const environmentFileContents = fs.readFileSync(environmentFile);
+          const parsedEnvVariables = dotenv.parse(environmentFileContents);
+          for (const [key, value] of Object.entries(parsedEnvVariables)) {
+            // only add variables starting with WEBPACK_
+            if (key.startsWith("WEBPACK_")) {
+              for (let index = 0; index < this.config.prefixes.length; index++) {
+                const prefix = this.config.prefixes[index];
+                envVariables[`${prefix}${key}`] = value;
+              }
+            }
+          }
+        } catch (err) {
+          this.logger.error(`Could not read ${environmentFile}`);
+        }
+      }
+    });
+
+    // expand environment vars
+    envVariables = dotenvExpand({
+      parsed: envVariables,
+      // don't write to process.env
+      ignoreProcessEnv: true,
+    }).parsed;
+
+    new DefinePlugin(envVariables).apply(compiler);
+  }
+}
+
+module.exports = DotenvWebpackPlugin;

packages/webpack-cli/package.json

@@ -41,8 +41,6 @@
     "colorette": "^2.0.14",
     "commander": "^10.0.1",
     "cross-spawn": "^7.0.3",
-    "dotenv": "^16.0.3",
-    "dotenv-expand": "^10.0.0",
     "envinfo": "^7.7.3",
     "fastest-levenshtein": "^1.0.12",
     "import-local": "^3.0.2",

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

@@ -56,8 +56,6 @@ const path = require("path");
 const { pathToFileURL } = require("url");
 const util = require("util");
 const { program, Option } = require("commander");
-const dotenv = require("dotenv");
-const dotenvExpand = require("dotenv-expand");
 
 const WEBPACK_PACKAGE = process.env.WEBPACK_PACKAGE || "webpack";
 const WEBPACK_DEV_SERVER_PACKAGE = process.env.WEBPACK_DEV_SERVER_PACKAGE || "webpack-dev-server";
@@ -1954,65 +1952,6 @@ class WebpackCLI implements IWebpackCLI {
       }, {});
       config.path.set(config.options, mergedConfigPaths as unknown as string);
     }
-
-    const runFunctionOnEachConfiguration = (
-      options: Configuration | Configuration[],
-      fn: CallableFunction,
-    ) => {
-      if (Array.isArray(options)) {
-        for (let item of options) {
-          item = fn(item);
-        }
-      } else {
-        options = fn(options);
-      }
-
-      return options;
-    };
-
-    // plugin env variables using dot env package
-    const _envDirectory = path.resolve(process.cwd(), "environment");
-
-    config.options = runFunctionOnEachConfiguration(config.options, (options: Configuration) => {
-      const mode = options.mode || "development";
-      // .local file variables will get precedence
-      const environmentFiles = [
-        `${_envDirectory}/.env`, // loaded in all cases
-        `${_envDirectory}/.env.local`, // loaded in all cases, ignored by git
-        `${_envDirectory}/.env.${mode}`, // only loaded in specified mode
-        `${_envDirectory}/.env.${mode}.local`, // only loaded in specified mode, ignored by git
-      ];
-
-      let envVariables: Record<string, string> = {};
-      // parse environment vars from .env files
-      environmentFiles.forEach((environmentFile) => {
-        if (fs.existsSync(environmentFile)) {
-          try {
-            const environmentFileContents: string = fs.readFileSync(environmentFile);
-            const parsedEnvVariables: Record<string, string> =
-              dotenv.parse(environmentFileContents);
-            for (const [key, value] of Object.entries(parsedEnvVariables)) {
-              // only add variables starting with WEBPACK_
-              if (key.startsWith("WEBPACK_")) envVariables[`process.env.${key}`] = value;
-            }
-          } catch (err) {
-            this.logger.error(`Could not read ${environmentFile}`);
-          }
-        }
-      });
-
-      // expand environment vars
-      envVariables = dotenvExpand({
-        parsed: envVariables,
-        // don't write to process.env
-        ignoreProcessEnv: true,
-      }).parsed;
-
-      options.plugins = (options.plugins || []).concat([new webpack.DefinePlugin(envVariables)]);
-
-      return options;
-    });
-
     return config;
   }