Updated ./build dependencies

Updated all build dependencies to the latest versions (including Electron, Project Foundation and Gulp) and implemented ESM modules to refactor and share constants between the Main and Render processes.

Author: gmattie

README.md

@@ -41,14 +41,14 @@ For more information see the [**Example Code**](https://github.com/gmattie/Data-
 
 Data Pixels Playground is a lightweight, cross-platform, desktop application for **Windows**, **Mac** and **Linux**, which may be used to write and execute DataPixels.js instances for previewing and testing purposes.
 
-The application features **built-in example code** via the *Help* menu as well as the ability to **parse pixel data from image files** to produce automatically generated code through the *File > Open Image File…* menu item or through drag-and-drop gestures.
+The application features **built-in example code** via the *Help* menu as well as the ability to **parse pixel data from image files** to produce automatically generated code through the *File > Open Image File…* menu item or through drag-and-drop gestures.  Additionally, compiled Data Pixels visible in the *View Panel* can be **easily dragged, scaled and reflected** using the mouse or in-app controls to help you design the perfect images for your requirements.
 
 Note: pixel color values that are automatically interpreted from image files with an embedded color space may differ slightly from the image’s intended color values.
 
 ![Application Screenshot](./resources/source/images/readme/ApplicationScreenshot.png)
 
 ## **Desktop Application Release Builds**
-Creating release builds for **Windows**, **Mac** and/or **Linux** is a 2-step process: code compilation, then application packaging, both of which are accomplished by running command-line NPM scripts that execute Gulp tasks.
+Creating release builds for **Windows**, **Mac** and/or **Linux** is a 2-step process: code compilation, then application packaging, both of which are accomplished by running command-line NPM scripts.
 
 #### **Compilation**
 
@@ -62,11 +62,7 @@ For more detailed information concerning code compilation please refer to [**Pro
 
 #### **Packaging**
 
-Application packaging can be executed for either all or individual deployment targets by entering one of the following CLI commands at the project **build folder** [*~/DataPixels/resources/build/* ]:
-
-```
-npm run package
-```
+Application packaging can be executed for individual platforms by entering one of the following CLI commands at the project **build folder** [*~/DataPixels/resources/build/* ]:
 
 ```
 npm run package-linux

config/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = (api) => {
+    api.cache(true);
+
+    return {
+        presets: [
+            "@babel/preset-env"
+        ]
+    };
+  };

config/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        "postcss-preset-env": {},
+    }
+};

config/webpack.config.js

@@ -0,0 +1,144 @@
+/**
+ * Imports
+ * 
+ */
+const path = require("path");
+
+/**
+ * Constants
+ * 
+ */
+const BUILD_DIR = path.resolve(__dirname, "../resources/build/");
+const SOURCE_DIR = path.resolve(__dirname, "../resources/source/");
+
+/**
+ * Plugins
+ * 
+ */
+const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
+const HTMLWebpackPlugin = require('html-webpack-plugin');
+const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+
+/**
+ * The Webpack configuration object contains the following keys:
+ * 
+ *     Entry:  An object that dictates where Webpack enters the application to start building the bundles.
+ *     Module:  Options that determine how the different types of modules within a project will be treated.
+ *     Optimization:  Executed optimizations when in Production mode.
+ *     Output:  An object that dictates where Webpack will build the bundles.
+ *     Plugins:  Customization of the Webpack build process.
+ *     Stats:  Options that control the displayed bundle information during the build process.
+ * 
+ */
+
+const config = {
+    entry: {
+        index: [
+            path.resolve(SOURCE_DIR, "js/index.js"),
+            path.resolve(SOURCE_DIR, "sass/index.scss")
+        ]
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        configFile: path.resolve(__dirname, "babel.config.js")
+                    }
+                }
+            },
+            {
+                test: /\.scss$/,
+                use: [
+                    MiniCSSExtractPlugin.loader,
+                    {
+                        loader: "css-loader",
+                        options: {
+
+                            /*
+                            *   This option bypasses the management of imported fonts and image files
+                            *   by disabling url() handling.  Imported files must be available in their
+                            *   proper locations, relative to the extracted CSS file, within the /build
+                            *   folder. 
+                            */
+
+                            url: false
+                        }
+                    },
+                    {
+                        loader: "postcss-loader",
+                        options: {
+                            config: {
+                                path: __dirname
+                            }
+                        }
+                    },
+                    "sass-loader"
+                ]
+            }
+        ]
+    },
+    optimization: {
+        minimizer: [
+            new UglifyJsPlugin({
+                cache: true,
+                parallel: true
+            }),
+            new OptimizeCSSAssetsPlugin({})
+        ]
+    },
+    output: {
+        path: BUILD_DIR,
+        filename: "./js/renderer/[name].js"
+    },
+    plugins: [
+        new MiniCSSExtractPlugin({
+            filename: "./css/[name].css"
+        }),
+        new BrowserSyncPlugin({
+            host: "localhost",
+            port: 3000,
+            server: {
+                baseDir: BUILD_DIR
+            }
+        })
+    ],
+    stats: {
+        entrypoints: false,
+        children: false
+    }
+};
+
+/**
+ * Exported function module that returns the Webpack configuration object.  This function is
+ * used to alter the configuration object according to the set "development" or "production"
+ * build mode.  The following keys and plugins are modified:
+ * 
+ *     Devtool:  This option controls how source maps are generated.
+ *     HTMLWebpackPlugin:  Copies and/or minifies "index.html" from the /source folder to the /build folder.
+ * 
+ */
+module.exports = (env, argv) => {
+    if (argv.mode === "development") {
+        config.devtool = "inline-source-map";
+    }
+
+    config.plugins.push(
+        new HTMLWebpackPlugin({
+            inject: false,
+            minify: (argv.mode === "production") ? {
+                collapseWhitespace: true,
+                removeComments: true
+            } : {},
+            template: path.resolve(SOURCE_DIR, "index.html"),
+            filename: "index.html"
+        })
+    );
+
+    return config;
+};