feat: add DotEnv support

packages/webpack5/src/configuration/base.ts

@@ -14,7 +14,8 @@ import { addCopyRule, applyCopyRules } from '../helpers/copyRules';
 import { WatchStatePlugin } from '../plugins/WatchStatePlugin';
 import { getProjectRootPath } from '../helpers/project';
 import { hasDependency } from '../helpers/dependencies';
-import { IWebpackEnv } from '../index';
+import { applyDotEnvPlugin } from '../helpers/dotEnv';
+import { env as _env, IWebpackEnv } from '../index';
 import {
 	getPlatformName,
 	getAbsoluteDistPath,
@@ -22,7 +23,7 @@ import {
 	getEntryPath,
 } from '../helpers/platform';
 
-export default function (config: Config, env: IWebpackEnv): Config {
+export default function (config: Config, env: IWebpackEnv = _env): Config {
 	const entryPath = getEntryPath();
 	const platform = getPlatformName();
 	const mode = env.production ? 'production' : 'development';
@@ -268,6 +269,9 @@ export default function (config: Config, env: IWebpackEnv): Config {
 		},
 	]);
 
+	// enable DotEnv
+	applyDotEnvPlugin(config);
+
 	// set up default copy rules
 	addCopyRule('assets/**');
 	addCopyRule('fonts/**');

packages/webpack5/src/helpers/dotEnv.ts

@@ -0,0 +1,49 @@
+import DotEnvPlugin from 'dotenv-webpack';
+import Config from 'webpack-chain';
+import { resolve } from 'path';
+
+import { getProjectRootPath } from './project';
+import { env } from '..';
+import { existsSync } from 'fs';
+
+/**
+ * @internal
+ */
+export function applyDotEnvPlugin(config: Config) {
+	const path = getDotEnvPath();
+
+	config.when(path !== null, (config) => {
+		config.plugin('DotEnvPlugin').use(DotEnvPlugin, [
+			{
+				path: getDotEnvPath(),
+				silent: true, // hide any errors
+			},
+		]);
+	});
+}
+
+function getDotEnvFileName(): string {
+	if (env.env) {
+		return `.env.${env.env}`;
+	}
+
+	return '.env';
+}
+
+function getDotEnvPath(): string {
+	const dotEnvPath = resolve(getProjectRootPath(), '.env');
+	const dotEnvWithEnvPath = resolve(getProjectRootPath(), getDotEnvFileName());
+
+	// look for .env.<env>
+	if (existsSync(dotEnvWithEnvPath)) {
+		return dotEnvWithEnvPath;
+	}
+
+	// fall back to .env
+	if (existsSync(dotEnvPath)) {
+		return dotEnvPath;
+	}
+
+	// don't use .env
+	return null;
+}

packages/webpack5/src/index.ts

@@ -12,6 +12,8 @@ import helpers from './helpers';
 export interface IWebpackEnv {
 	[name: string]: any;
 
+	env?: string;
+
 	appPath?: string;
 	appResourcesPath?: string;