feat: add htmlWebpackPlugin in development

Author: evenstensberg

packages/generators/init-generator.ts

@@ -12,6 +12,7 @@ import entryQuestions from "./utils/entry";
 import langQuestionHandler, { LangType } from "./utils/languageSupport";
 import styleQuestionHandler, { Loader, StylingType } from "./utils/styleSupport";
 import tooltip from "./utils/tooltip";
+import { generatePluginName } from "./utils/plugins";
 
 /**
  *
@@ -224,6 +225,19 @@ export default class InitGenerator extends Generator {
 				);
 			}
 		}
+		if(!this.isProd) {
+			this.dependencies.push("html-webpack-plugin");
+			const htmlWebpackDependency: string = "html-webpack-plugin";
+			const htmlwebpackPlugin: string = generatePluginName(htmlWebpackDependency);
+			(this.configuration.config.topScope as string[]).push(
+				`const ${htmlwebpackPlugin} = require('${htmlWebpackDependency}')`,
+				"\n",
+				tooltip.html(),
+			);
+			(this.configuration.config.webpackOptions.plugins as string[]).push(
+				`new ${htmlwebpackPlugin}()`,
+			);
+		}
 		done();
 	}
 

packages/generators/utils/tooltip.ts

@@ -57,6 +57,17 @@ export default {
  *
  * https://github.com/webpack-contrib/terser-webpack-plugin
  *
+ */`;
+	},
+
+	html: (): string => {
+		return `/*
+ * We've enabled HtmlWebpackPlugin for you! This generates a html
+ * page for you when you compile webpack, which will make you start
+ * developing and prototyping faster.
+ * 
+ * https://github.com/jantimon/html-webpack-plugin
+ * 
  */`;
 	}
 };

packages/generators/utils/webpackConfig.ts

@@ -4,15 +4,15 @@ export function getDefaultOptimization(isProd: boolean): WebpackOptions["optimiz
     let optimizationOptions;
     if (isProd) {
         optimizationOptions = {
+            minimizer: [
+                "new TerserPlugin()",
+            ],
             splitChunks: {
                 chunks: "'all'",
             },
         };
     } else {
         optimizationOptions = {
-            minimizer: [
-                "new TerserPlugin()",
-            ],
             splitChunks: {
                 cacheGroups: {
                     vendors: {

packages/utils/run-prettier.ts

@@ -19,7 +19,7 @@ export default function runPrettier(outputPath: string, source: string, cb?: Fun
 		try {
 			prettySource = prettier.format(source, {
 				filepath: outputPath,
-				parser: "babylon",
+				parser: "babel",
 				singleQuote: true,
 				tabWidth: 1,
 				useTabs: true,