build: updated webpack config generation

Author: matteobruni

packages/webpack-config/src/bundles/buildBundle.ts

@@ -1,5 +1,4 @@
 import type { ExternalData } from "../common/ExternalData";
-import { getBundleEntry } from "./getBundleEntry";
 import { getConfig } from "../common/getConfig";
 
 interface BundleParams {
@@ -25,22 +24,20 @@ GitHub : https://www.github.com/matteobruni/tsparticles
 How to use? : Check the GitHub README
 v${version}`,
         minBanner = `tsParticles ${fixBundleName}v${version} by Matteo Bruni`,
-        configs = [
-            getConfig({
-                entry: getBundleEntry(moduleName, false),
-                version,
-                banner,
-                minBanner: minBanner,
-                dir,
-                bundle: false,
-                additionalExternals,
-            }),
-        ];
+        configs = getConfig({
+            entry: { format: "", name: moduleName, bundle: false },
+            version,
+            banner,
+            minBanner: minBanner,
+            dir,
+            bundle: false,
+            additionalExternals,
+        });
 
     if (bundle ?? true) {
         configs.push(
-            getConfig({
-                entry: getBundleEntry(`${moduleName}.bundle`, true),
+            ...getConfig({
+                entry: { format: "", name: `${moduleName}.bundle`, bundle: true },
                 version,
                 banner,
                 minBanner: minBanner,

packages/webpack-config/src/bundles/getBundleEntry.ts

@@ -1,6 +1,7 @@
 import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
 import type { ExternalData } from "./ExternalData";
 import TerserPlugin from "terser-webpack-plugin";
+import { getEntry } from "./getEntry.js";
 import { getExternals } from "./getExternals";
 import path from "path";
 import webpack from "webpack";
@@ -10,25 +11,35 @@ interface ConfigParams {
     banner: string;
     bundle?: boolean;
     dir: string;
-    entry: unknown;
+    entry: {
+        bundle: boolean;
+        format: string;
+        name?: string;
+    };
     minBanner: string;
     version: string;
 }
 
-const getConfig = (params: ConfigParams): unknown => {
+/**
+ *
+ * @param params -
+ * @param min -
+ * @returns the webpack configuration
+ */
+function getSingleConfig(params: ConfigParams, min: boolean): unknown {
     const { additionalExternals, banner, bundle, dir, entry, minBanner, version } = params;
 
     return {
-        entry: entry,
-        mode: "production",
+        entry: getEntry({ ...entry, min }),
+        mode: min ? "production" : "development",
         output: {
             path: path.resolve(dir, "dist"),
-            filename: "[name].js",
+            filename: min ? "[name].min.js" : "[name].js",
             library: {
                 type: "umd2",
             },
             globalObject: "this",
-            chunkFilename: "[name].js",
+            chunkFilename: min ? "[name].min.js" : "[name].js",
         },
         resolve: {
             extensions: [".cjs", ".mjs", ".js", ".json"],
@@ -81,6 +92,10 @@ const getConfig = (params: ConfigParams): unknown => {
             hints: false,
         },
     };
+}
+
+const getConfig = (params: ConfigParams): unknown[] => {
+    return [getSingleConfig(params, false), getSingleConfig(params, true)];
 };
 
 export { getConfig };

packages/webpack-config/src/common/getConfig.ts

@@ -1,11 +1,19 @@
-const getEntry = (format: string, name?: string, bundle?: boolean): unknown => {
-    const fileName = bundle ? "bundle" : "index",
+interface IEntryParams {
+    bundle: boolean;
+    format: string;
+    min: boolean;
+    name?: string;
+}
+
+const getEntry = (data: IEntryParams): unknown => {
+    const { bundle, format, min, name } = data,
+        fileName = bundle ? "bundle" : "index",
         fixFormat = format ? `.${format}` : "",
         fixName = name ? `.${name}` : "",
+        fixMin = min ? ".min" : "",
         obj = {} as Record<string, string>;
 
-    obj[`tsparticles${fixFormat}${fixName}`] = `./dist/browser/${fileName}.js`;
-    obj[`tsparticles${fixFormat}${fixName}.min`] = `./dist/browser/${fileName}.js`;
+    obj[`tsparticles${fixFormat}${fixName}${fixMin}`] = `./dist/browser/${fileName}.js`;
 
     return obj;
 };

packages/webpack-config/src/common/getEntry.ts

@@ -1,6 +1,5 @@
 import type { ExternalData } from "../common/ExternalData";
 import { getConfig } from "../common/getConfig";
-import { getEffectEntry } from "./getEffctEntry";
 
 interface EffectParams {
     additionalExternals?: ExternalData[];
@@ -24,17 +23,15 @@ How to use? : Check the GitHub README
 v${version}`,
         minBanner = `tsParticles ${effectName} Shape v${version} by Matteo Bruni`;
 
-    return [
-        getConfig({
-            entry: getEffectEntry(moduleName, false),
-            version,
-            banner,
-            minBanner: minBanner,
-            dir,
-            bundle: false,
-            additionalExternals,
-        }),
-    ];
+    return getConfig({
+        entry: { format: "effect", name: moduleName, bundle: false },
+        version,
+        banner,
+        minBanner: minBanner,
+        dir,
+        bundle: false,
+        additionalExternals,
+    });
 }
 
 export { loadParticlesEffect };

packages/webpack-config/src/effects/buildEffect.ts

@@ -1,6 +1,5 @@
 import type { ExternalData } from "../common/ExternalData";
 import { getConfig } from "../common/getConfig";
-import { getEngineEntry } from "./getEngineEntry";
 
 interface EngineParams {
     additionalExternals?: ExternalData[];
@@ -24,17 +23,15 @@ How to use?: Check the GitHub README
 ------------------------------------------------------`,
         minBanner = `tsParticles Engine v${version} by Matteo Bruni`;
 
-    return [
-        getConfig({
-            entry: getEngineEntry(),
-            version,
-            banner,
-            minBanner: minBanner,
-            dir,
-            bundle: false,
-            additionalExternals,
-        }),
-    ];
+    return getConfig({
+        entry: { format: "engine", bundle: false },
+        version,
+        banner,
+        minBanner: minBanner,
+        dir,
+        bundle: false,
+        additionalExternals,
+    });
 }
 
 export { loadParticlesEngine };

packages/webpack-config/src/effects/getEffctEntry.ts

@@ -1,6 +1,5 @@
 import type { ExternalData } from "../common/ExternalData";
 import { getConfig } from "../common/getConfig";
-import { getInteractionEntry } from "./getInteractionEntry";
 
 interface InteractionParams {
     additionalExternals?: ExternalData[];
@@ -24,17 +23,19 @@ How to use? : Check the GitHub README
 v${version}`,
         minBanner = `tsParticles ${pluginName} Interaction v${version} by Matteo Bruni`;
 
-    return [
-        getConfig({
-            entry: getInteractionEntry(moduleName, false),
-            version,
-            banner,
-            minBanner: minBanner,
-            dir,
+    return getConfig({
+        entry: {
+            format: "interaction",
+            name: moduleName,
             bundle: false,
-            additionalExternals,
-        }),
-    ];
+        },
+        version,
+        banner,
+        minBanner: minBanner,
+        dir,
+        bundle: false,
+        additionalExternals,
+    });
 }
 
 export { loadParticlesInteraction };

packages/webpack-config/src/engine/buildEngine.ts

@@ -1,6 +1,5 @@
 import type { ExternalData } from "../../common/ExternalData";
 import { getConfig } from "../../common/getConfig";
-import { getInteractionExternalEntry } from "./getInteractionExternalEntry";
 
 interface InteractionExternalParams {
     additionalExternals?: ExternalData[];
@@ -24,17 +23,19 @@ How to use? : Check the GitHub README
 v${version}`,
         minBanner = `tsParticles ${pluginName} External Interaction v${version} by Matteo Bruni`;
 
-    return [
-        getConfig({
-            entry: getInteractionExternalEntry(moduleName, false),
-            version,
-            banner,
-            minBanner: minBanner,
-            dir,
+    return getConfig({
+        entry: {
+            format: "interaction.external",
+            name: moduleName,
             bundle: false,
-            additionalExternals,
-        }),
-    ];
+        },
+        version,
+        banner,
+        minBanner: minBanner,
+        dir,
+        bundle: false,
+        additionalExternals,
+    });
 }
 
 export { loadParticlesInteractionExternal };