updating webpack.dev for local dev

Author: WSPluta

web/bundler/webpack.common.js

@@ -1,25 +1,41 @@
+// Import necessary plugins and modules
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 
+// Export the webpack configuration
 module.exports = {
+  // Entry point for the application, the main JavaScript file
   entry: path.resolve(__dirname, '../src/script.js'),
+
+  // Output configuration for the bundled files
   output: {
     filename: 'bundle.[contenthash].js',
     path: path.resolve(__dirname, '../dist'),
   },
+
+  // Source map generation for better debugging
   devtool: 'source-map',
+
+  // Array of plugins to enhance the webpack build process
   plugins: [
+    // CopyWebpackPlugin for copying static assets to the 'dist' directory
     new CopyWebpackPlugin({
-      patterns: [{from: path.resolve(__dirname, '../static')}],
+      patterns: [{ from: path.resolve(__dirname, '../static') }],
     }),
+
+    // HtmlWebpackPlugin for generating an HTML file from a template
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, '../src/index.html'),
       minify: true,
     }),
+
+    // MiniCSSExtractPlugin for extracting CSS into separate files
     new MiniCSSExtractPlugin(),
   ],
+
+  // Module configuration for defining how different file types should be processed
   module: {
     rules: [
       // HTML
@@ -75,11 +91,11 @@ module.exports = {
             loader: 'file-loader',
             options: {
               name: '[name].[ext]',
-              outputPath: 'assets/menu/'
-            }
-          }
-        ]
-      }  
+              outputPath: 'assets/menu/',
+            },
+          },
+        ],
+      },
     ],
   },
 };

web/bundler/webpack.dev.js

@@ -1,34 +1,53 @@
+const path = require("path");
 const { merge } = require("webpack-merge");
-const commonConfiguration = require("./webpack.common.js");
 const portFinderSync = require("portfinder-sync");
-
-const infoColor = (_message) => {
-  return `\u001b[1m\u001b[34m${_message}\u001b[39m\u001b[22m`;
-};
+const commonConfiguration = require("./webpack.common.js");
 
 module.exports = merge(commonConfiguration, {
   mode: "development",
+
   devServer: {
     host: "localhost",
     port: portFinderSync.getPort(8080),
-    contentBase: "./dist",
-    watchContentBase: true,
+    static: [
+      {
+        directory: path.resolve(__dirname, "dist"),
+        watch: true,
+      },
+      {
+        directory: path.resolve(__dirname, "static"),
+        staticOptions: {},
+        publicPath: "/static-public-path/",
+        serveIndex: true,
+        watch: true,
+      },
+    ],
     proxy: {
-      "/socket.io": { target: "ws://localhost:3000" },
-      "/api": { target: "ws://localhost:8080" },
+      "/socket.io": { target: "http://localhost:3000", ws: true },
+      "/api": { target: "http://localhost:8080", ws: true },
     },
     open: true,
     https: false,
-    useLocalIp: false,
-    disableHostCheck: true,
-    overlay: true,
-    noInfo: true,
-    after: function (app, server, compiler) {
-      const port = server.options.port;
-      const https = server.options.https ? "s" : "";
-      const domain = `http${https}://localhost:${port}`;
-
-      console.log(`Project running at:\n  - ${infoColor(domain)}`);
+    allowedHosts: "all",
+    onAfterSetupMiddleware: function (devServer) {
+      devServer.app.get("/some/path", function (req, res) {
+        res.json({ custom: "response" });
+      });
+    },
+    client: {
+      logging: "info",
+      overlay: {
+        errors: true,
+        warnings: true,
+      },
+      progress: true,
+      reconnect: true,
+      webSocketTransport: "ws", 
+      webSocketURL: {
+        hostname: "localhost",
+        pathname: "/ws",
+        port: 8080,
+      },
     },
   },
 });