Update npm scripts to allow hot reloading

Signed-off-by: Christian Wolf <github@christianwolf.email>

package.json

@@ -4,9 +4,10 @@
 	"description": "",
 	"main": "src/main.js",
 	"scripts": {
-		"build": "node node_modules/webpack/bin/webpack.js --progress --config webpack.build.js",
+		"build": "npx webpack --node-env production --progress --config webpack.config.js",
-		"build-dev": "node node_modules/webpack/bin/webpack.js --progress --config webpack.build-dev.js",
+		"build-dev": "npx webpack --node-env development --progress --config webpack.config.js",
-		"dev": "node node_modules/webpack/bin/webpack.js --progress --watch --config webpack.devel.js",
+		"dev": "npx webpack --node-env development --progress --watch --config webpack.devel.js",
+		"serve": "npx webpack serve --node-env development --progress --config webpack.config.js --env dev_server",
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"prettier": "npx prettier --check src",
 		"prettier-fix": "npx prettier --write src",

webpack.build-dev.js

@@ -1,8 +0,0 @@
-const { merge } = require('webpack-merge')
-const common = require('./webpack.config.js')
-
-module.exports = merge(common, {
-    mode: 'development',
-    devtool: 'inline-cheap-source-map',
-    plugins: [],
-})

webpack.build.js

@@ -1,39 +0,0 @@
-const { merge } = require('webpack-merge')
-const common = require('./webpack.config.js')
-const TerserPlugIn = require('terser-webpack-plugin')
-const CompressionPlugin = require('compression-webpack-plugin')
-
-module.exports = merge(common, {
-    mode: 'production',
-    devtool: 'source-map',
-    optimization: {
-        minimizer: [
-            new TerserPlugIn({
-                terserOptions:{	
-                    //sideEffects: false,
-                    // All files have side effects, and none can be tree-shaken
-                    // {
-                    //   "./src/file2.js"
-                    //  ]
-                    // }
-                    output:{
-                        comments: false
-                    }
-                },
-                parallel: true
-            })
-        ],
-    },
-    plugins: [
-        new CompressionPlugin({
-            test: /\.js(\?.*)?$/i,
-        }),
-    ],
-    performance: {
-        hints: "warning",
-        // Calculates sizes of gziped bundles.
-        assetFilter: function (assetFilename) {
-            return assetFilename.endsWith(".js.gz");
-        },
-    }
-})

webpack.config.js

@@ -16,6 +16,10 @@ module.exports = (env) => { return merge(webpackConfig, {
     entry: {
         guest: path.resolve(path.join('src', 'guest.js')),
     },
+    // You can add this to allow acces in the network. You will have to adopt the public path in main.js as well!
+    // devServer: {
+    //     host: "0.0.0.0",
+    // },
     plugins: [
         new CleanWebpackPlugin(),
         new webpack.DefinePlugin({

webpack.devel.js

@@ -1,9 +1,8 @@
 const { merge } = require('webpack-merge')
-const base = require('./webpack.build-dev.js')
+const base = require('./webpack.config.js')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
-module.exports = merge(base, {
+module.exports = (env) => merge(base(env), {
-    mode: "development",
     plugins: [
         new BundleAnalyzerPlugin(
             {