snapshot wip

config/paths.js

@@ -0,0 +1,12 @@
+const path = require('path')
+
+module.exports = {
+  // Source files
+  src: path.resolve(__dirname, '../src'),
+
+  // Production build files
+  build: path.resolve(__dirname, '../dist'),
+
+  // Static files that get copied to build folder
+  public: path.resolve(__dirname, '../public'),
+}

config/webpack.common.js

@@ -0,0 +1,113 @@
+const path = require('path');
+const paths = require('./paths')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+//const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+
+
+module.exports = {
+
+  // Where webpack looks to start building the bundle and include polyfill
+  entry: [ 'whatwg-fetch', paths.src + '/renderer/index.js'],
+
+  // Where webpack outputs the assets and bundles
+  output: {
+    path: paths.build,
+    filename: '[name].bundle.js',
+    publicPath: '/',
+  },
+
+
+  resolve: {
+        extensions: ['.js', '.jsx'],
+fallback: { "util": require.resolve("util/"),
+	"path": require.resolve("path-browserify"),
+"os": require.resolve("os-browserify/browser"),
+ "stream": require.resolve("stream-browserify") ,
+"https": require.resolve("https-browserify"),
+"http": require.resolve("stream-http"),
+ "zlib": require.resolve("browserify-zlib"),
+"assert": require.resolve("assert/")
+ },
+    alias: {
+      "@api": path.resolve(__dirname, "../src/api"),
+      "@renderer": path.resolve(__dirname, "../src/renderer"),
+      "@main": path.resolve(__dirname, "../src/main"),
+      "@root": path.resolve(__dirname, ".."),
+            'components': path.resolve(__dirname, '../src/components/'),
+			'images': path.resolve(__dirname, '../src/images/'),
+		    'styles': path.resolve(__dirname, '../src/styles/'),
+		 }
+    },
+
+
+  // Customize the webpack build process
+  plugins: [
+
+
+	//new FriendlyErrorsPlugin(),
+
+    // Removes/cleans build folders and unused assets when rebuilding
+    new CleanWebpackPlugin(),
+
+    // Copies files from target to destination folder
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: paths.public,
+          to: 'assets',
+          globOptions: {
+            ignore: ['*.DS_Store'],
+          },
+        },
+      ],
+    }),
+
+    // Generates an HTML file from a template
+    // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
+    new HtmlWebpackPlugin({
+      title: 'webpack Boilerplate',
+      favicon: paths.src + '/images/favicon.png',
+      template: paths.src + '/template.html', // template file
+      filename: 'index.html', // output file
+    }),
+  ],
+
+  // Determine how modules within the project are treated
+  module: {
+    rules: [
+      // JavaScript: Use Babel to transpile JavaScript files
+      {
+		  test: /\.js$/, 
+		  exclude: /node_modules/, 
+		  use: ['babel-loader']},
+
+	   {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader"
+        }
+      },
+
+      // Styles: Inject CSS into the head with source maps
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          'style-loader',
+          {loader: 'css-loader', options: {sourceMap: true, importLoaders: 1}},
+          {loader: 'postcss-loader', options: {sourceMap: true}},
+          {loader: 'sass-loader', options: {sourceMap: true}},
+        ],
+      },
+
+      // Images: Copy image files to build folder
+      {test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource'},
+
+      // Fonts and SVGs: Inline files
+      {test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline'},
+    ],
+  },
+}

config/webpack.dev.js

@@ -0,0 +1,41 @@
+const paths = require('./paths')
+
+const webpack = require('webpack')
+const { merge } = require('webpack-merge')
+
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  // Set the mode to development or production
+  mode: 'development',
+
+  // Control how source maps are generated
+  devtool: 'inline-source-map',
+
+
+  // ENABLE "target: 'web'"  for use Hot Reload / HMR in Crome ( not in IE 11 )
+  // DISABLE ['web', 'es5'] for use IE 11 during testing => Hot Reload / HMR will stop working in Chrome due to a bug in Webpack 5
+  // target: ['web', 'es5'], 
+   target: 'web', 
+
+  // Spin up a server for quick development
+  devServer: {
+    historyApiFallback: true,
+    static: paths.build,
+    open: true,
+    compress: true,
+    hot: true,
+    port: 8080,
+  },
+
+  plugins: [
+
+	// Note: Only update what has changed on hot reload 
+	// Require the statement "module.hot.accept();" in the root index.jsx !
+    new webpack.HotModuleReplacementPlugin(),
+
+	new FriendlyErrorsPlugin()
+  ],
+})

config/webpack.prod.js

@@ -0,0 +1,64 @@
+const paths = require('./paths')
+const { merge } = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: false,
+
+  output: {
+    path: paths.build,
+    publicPath: '/',
+    filename: 'js/[name].[contenthash].bundle.js',
+  },
+
+  // Production: Magic happen here transpiling to es5 to partly support older browser like IE11
+  target: ['web', 'es5'], 
+
+  plugins: [
+    // Extracts CSS into separate files
+    // Note: style-loader is for development, MiniCssExtractPlugin is for production
+    new MiniCssExtractPlugin({
+      filename: 'styles/[name].[contenthash].css',
+      chunkFilename: '[id].css',
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 2,
+              sourceMap: false,
+            },
+          },
+          'postcss-loader',
+          'sass-loader',
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new CssMinimizerPlugin(), "..."],
+    // Once your build outputs multiple chunks, this option will ensure they share the webpack runtime
+    // instead of having their own. This also helps with long-term caching, since the chunks will only
+    // change when actual code changes, not the webpack runtime.
+    runtimeChunk: {
+      name: 'runtime',
+    },
+  },
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+})

forge.config.js

@@ -100,28 +100,6 @@ let config = {
 
   plugins: [
     {
-      name: "@electron-forge/plugin-auto-unpack-natives",
-      config: {},
-    },
-    {
-      name: "@electron-forge/plugin-webpack",
-      config: {
-        devContentSecurityPolicy: `default-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-eval' 'unsafe-inline' data:`,
-        mainConfig: "./webpack.main.config.js",
-        renderer: {
-          config: "./webpack.renderer.config.js",
-          entryPoints: [
-            {
-              html: "./src/renderer/index.html",
-              js: "./src/renderer/index.js",
-              name: "main_window",
-              preload: {
-                js: "./src/preload.js",
-              },
-            },
-          ],
-        },
-      },
     },
   ],
   hooks: {