feat: auto insert matching env from dotenv file

See #1134

Author: swashata

packages/scripts/package.json

@@ -50,6 +50,7 @@
 		"css-loader": "^5.2.4",
 		"del": "^6.0.0",
 		"dev-ip": "^1.0.1",
+		"dotenv": "^8.2.0",
 		"execa": "^5.0.0",
 		"figures": "^3.2.0",
 		"file-loader": "^6.0.0",

packages/scripts/src/bin/index.ts

@@ -3,6 +3,7 @@ import chalk from 'chalk';
 import program from 'commander';
 import path from 'path';
 import updateNotifier from 'update-notifier';
+import dotenv from 'dotenv';
 
 import { clearConsole } from '../dev-utils';
 import { bootstrap } from './bootstrap';
@@ -11,6 +12,8 @@ import { pack } from './pack';
 import { serve } from './serve';
 import { bulletSymbol, contextHelp, printIntro } from './utils';
 
+dotenv.config();
+
 export interface ProgramOptions {
 	context?: string;
 	projectConfig?: string;

packages/scripts/src/config/WebpackConfigHelper.ts

@@ -268,6 +268,7 @@ export class WebpackConfigHelper {
 			new webpack.DefinePlugin({
 				'process.env.NODE_ENV': JSON.stringify(this.env),
 				'process.env.BABEL_ENV': JSON.stringify(this.env),
+				...this.getEnvVariables(),
 				// Our own access to project config from the modules
 				// mainly needed for the publicPath entrypoint
 				__WPACKIO__: {
@@ -718,6 +719,19 @@ ${bannerConfig.copyrightText}${bannerConfig.credit ? creditNote : ''}`,
 		return defaults;
 	}
 
+	private getEnvVariables() {
+		const envVariables: Record<string, any> = {};
+		const match = 'WPACKIO_';
+		Object.keys(process.env ?? {}).forEach(key => {
+			if (key.startsWith(match)) {
+				envVariables[
+					`process.env.${key.substring(match.length)}`
+				] = JSON.stringify(process.env[key]);
+			}
+		});
+		return envVariables;
+	}
+
 	/**
 	 * Get calculated app directory
 	 */

yarn.lock

@@ -5079,6 +5079,11 @@ dot-prop@^6.0.1:
   dependencies:
     is-obj "^2.0.0"
 
+dotenv@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
+  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
+
 dts-dom@latest:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/dts-dom/-/dts-dom-3.6.0.tgz#0e8beaf6240e699d623bf4d7dcf0e6216222459a"