diff --git a/packages/generators/init-generator.ts b/packages/generators/init-generator.ts
index d06a1efa097..8ef4cdfdc23 100644
--- a/packages/generators/init-generator.ts
+++ b/packages/generators/init-generator.ts
@@ -11,7 +11,7 @@ import { Confirm, Input, List } from "@webpack-cli/webpack-scaffold";
 import { WebpackOptions } from "./types";
 import entryQuestions from "./utils/entry";
 import getBabelPlugin from "./utils/module";
-import styleQuestionHandler from "./utils/style";
+import styleQuestionHandler, { ILoader, StylingType } from "./utils/style";
 import tooltip from "./utils/tooltip";
 
 /**
@@ -90,12 +90,6 @@ export default class InitGenerator extends Generator {
 			"new webpack.ProgressPlugin()",
 		);
 
-		if (this.isProd) {
-			this.configuration.config.webpackOptions.plugins.push(
-				"new TerserPlugin()",
-			);
-		}
-
 		let optimizationObj;
 
 		if (!this.isProd) {
@@ -106,6 +100,9 @@ export default class InitGenerator extends Generator {
 			};
 		} else {
 			optimizationObj = {
+				minimizer: [
+					"new TerserPlugin()",
+				],
 				splitChunks: {
 					cacheGroups: {
 						vendors: {
@@ -136,7 +133,7 @@ export default class InitGenerator extends Generator {
 		const done: () => {} = this.async();
 		const self: this = this;
 		let regExpForStyles: string;
-		let ExtractUseProps: object[];
+		let ExtractUseProps: ILoader[];
 
 		process.stdout.write(
 			`\n${logSymbols.info}${chalk.blue(" INFO ")} ` +
@@ -218,10 +215,10 @@ export default class InitGenerator extends Generator {
 				this.prompt([
 					List("stylingType", "Will you use one of the below CSS solutions?", [
 						"No",
-						"CSS",
-						"SASS",
-						"LESS",
-						"PostCSS",
+						StylingType.CSS,
+						StylingType.SASS,
+						StylingType.LESS,
+						StylingType.PostCSS,
 					]),
 				]))
 			.then((stylingTypeAnswer: {
diff --git a/packages/generators/utils/style.ts b/packages/generators/utils/style.ts
index 9d4d428ace8..5a642932f97 100644
--- a/packages/generators/utils/style.ts
+++ b/packages/generators/utils/style.ts
@@ -1,168 +1,188 @@
 import tooltip from "./tooltip";
 
+export enum StylingType {
+	CSS = "CSS",
+	SASS = "SASS",
+	LESS = "LESS",
+	PostCSS = "PostCSS",
+}
+
+export enum Loader {
+	CSS = "css-loader",
+	SASS = "sass-loader",
+	STYLE = "style-loader",
+	LESS = "less-loader",
+	POSTCSS = "postcss-loader",
+}
+
+export enum StyleRegex {
+	CSS = "/\.css$/",
+	SASS = "/\.(scss|css)$/",
+	LESS = "/\.(less|css)$/",
+	PostCSS = "/\.css$/",
+}
+
+export interface ILoader {
+	loader: string;
+	options?: {
+		importLoaders?: number;
+		sourceMap?: boolean;
+		plugins?: string;
+	};
+}
+
 export default function style(self, stylingType) {
-	const ExtractUseProps = [];
+	const ExtractUseProps: ILoader[] = [];
 	let regExpForStyles = null;
+
 	switch (stylingType) {
-		case "SASS":
+		case StylingType.CSS:
+			regExpForStyles = StyleRegex.CSS;
+
 			self.dependencies.push(
-				"sass-loader",
-				"node-sass",
-				"style-loader",
-				"css-loader",
+				Loader.CSS,
 			);
-			regExpForStyles = `${new RegExp(/\.(scss|css)$/)}`;
-			if (self.isProd) {
+			if (self.isProf) {
+				self.dependencies.push(
+					Loader.STYLE,
+				);
+			}
+
+			ExtractUseProps.push({
+				loader: `"${Loader.CSS}"`,
+				options: {
+					sourceMap: true,
+				},
+			});
+			if (!self.isProd) {
 				ExtractUseProps.push(
 					{
-						loader: "'css-loader'",
-						options: {
-							sourceMap: true,
-						},
-					},
-					{
-						loader: "'sass-loader'",
-						options: {
-							sourceMap: true,
-						},
+						loader: `"${Loader.STYLE}"`,
 					},
 				);
-			} else {
-				ExtractUseProps.push(
-					{
-						loader: "'style-loader'",
+			}
+			break;
+
+		case StylingType.SASS:
+			regExpForStyles = StyleRegex.SASS;
+
+			self.dependencies.push(
+				"node-sass",
+				Loader.SASS,
+				Loader.CSS,
+			);
+			if (self.isProf) {
+				self.dependencies.push(
+					Loader.STYLE,
+				);
+			}
+
+			ExtractUseProps.push(
+				{
+					loader: `"${Loader.CSS}"`,
+					options: {
+						sourceMap: true,
 					},
-					{
-						loader: "'css-loader'",
+				},
+				{
+					loader: `"${Loader.SASS}"`,
+					options: {
+						sourceMap: true,
 					},
+				},
+			);
+			if (!self.isProd) {
+				ExtractUseProps.push(
 					{
-						loader: "'sass-loader'",
+						loader: `"${Loader.STYLE}"`,
 					},
 				);
 			}
 			break;
-		case "LESS":
-			regExpForStyles = `${new RegExp(/\.(less|css)$/)}`;
+
+		case StylingType.LESS:
+			regExpForStyles = StyleRegex.LESS;
+
 			self.dependencies.push(
-				"less-loader",
 				"less",
-				"style-loader",
-				"css-loader",
+				Loader.LESS,
+				Loader.CSS,
 			);
-			if (self.isProd) {
-				ExtractUseProps.push(
-					{
-						loader: "'css-loader'",
-						options: {
-							sourceMap: true,
-						},
+			if (self.isProf) {
+				self.dependencies.push(
+					Loader.STYLE,
+				);
+			}
+
+			ExtractUseProps.push(
+				{
+					loader: `"${Loader.CSS}"`,
+					options: {
+						sourceMap: true,
 					},
-					{
-						loader: "'less-loader'",
-						options: {
-							sourceMap: true,
-						},
+				},
+				{
+					loader: `"${Loader.LESS}"`,
+					options: {
+						sourceMap: true,
 					},
-				);
-			} else {
+				},
+			);
+			if (!self.isProd) {
 				ExtractUseProps.push(
 					{
-						loader: "'css-loader'",
-						options: {
-							sourceMap: true,
-						},
-					},
-					{
-						loader: "'less-loader'",
-						options: {
-							sourceMap: true,
-						},
+						loader: `"${Loader.STYLE}"`,
 					},
 				);
 			}
 			break;
-		case "PostCSS":
+
+		case StylingType.PostCSS:
+			regExpForStyles = StyleRegex.PostCSS;
+
 			self.configuration.config.topScope.push(
 				tooltip.postcss(),
 				"const autoprefixer = require('autoprefixer');",
 				"const precss = require('precss');",
 				"\n",
 			);
+
 			self.dependencies.push(
-				"style-loader",
-				"css-loader",
-				"postcss-loader",
 				"precss",
 				"autoprefixer",
+				Loader.CSS,
+				Loader.POSTCSS,
 			);
-			regExpForStyles = `${new RegExp(/\.css$/)}`;
-			if (self.isProd) {
-				ExtractUseProps.push(
-					{
-						loader: "'css-loader'",
-						options: {
-							importLoaders: 1,
-							sourceMap: true,
-						},
-					},
-					{
-						loader: "'postcss-loader'",
-						options: {
-							plugins: `function () {
-                                return [
-                                    precss,
-                                    autoprefixer
-                                ];
-                            }`,
-						},
-					},
-				);
-			} else {
-				ExtractUseProps.push(
-					{
-						loader: "'style-loader'",
-					},
-					{
-						loader: "'css-loader'",
-						options: {
-							importLoaders: 1,
-							sourceMap: true,
-						},
-					},
-					{
-						loader: "'postcss-loader'",
-						options: {
-							plugins: `function () {
-                                return [
-                                    precss,
-                                    autoprefixer
-                                ];
-                            }`,
-						},
-					},
+			if (self.isProf) {
+				self.dependencies.push(
+					Loader.STYLE,
 				);
 			}
-			break;
-		case "CSS":
-			self.dependencies.push("style-loader", "css-loader");
-			regExpForStyles = `${new RegExp(/\.css$/)}`;
-			if (self.isProd) {
-				ExtractUseProps.push({
-					loader: "'css-loader'",
+
+			ExtractUseProps.push(
+				{
+					loader: `"${Loader.CSS}"`,
 					options: {
+						importLoaders: 1,
 						sourceMap: true,
 					},
-				});
-			} else {
+				},
+				{
+					loader: `"${Loader.POSTCSS}"`,
+					options: {
+						plugins: `function () {
+							return [
+								precss,
+								autoprefixer
+							];
+						}`,
+					},
+				},
+			);
+			if (!self.isProd) {
 				ExtractUseProps.push(
 					{
-						loader: "'style-loader'",
-						options: {
-							sourceMap: true,
-						},
-					},
-					{
-						loader: "'css-loader'",
+						loader: `"${Loader.STYLE}"`,
 					},
 				);
 			}