How to Enable Broken Live Reload on Webpack App

Question

I am working with an existing app that uses webpack but the live-reload doesn't work at all. I have tried several different approaches without any luck. I will provide copies of my package.json and webpack.config.js as well as a link to a [GitHub REPO][1].

• package.json

    "name": "problem",
    "version": "1.0.0",
    "source": "src/index.html",
    "private": true,
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "NODE_ENV=production webpack && node cleanBuild.js",
      "webpack-server": "webpack serve --port 3050",
      "serve": "webpack serve --live-reload"
    },
    "keywords": [],
    "author": "Me!",
    "license": "ISC",
    "description": "",
    "devDependencies": {
      "clean-webpack-plugin": "^4.0.0",
      "concurrently": "^8.2.1",
      "css-loader": "^6.8.1",
      "html-webpack-plugin": "^5.5.3",
      "mini-css-extract-plugin": "^2.7.6",
      "sass": "^1.68.0",
      "sass-loader": "^13.3.2",
      "style-loader": "^3.3.3",
      "webpack": "^5.88.2",
      "webpack-cli": "^5.1.4",
      "webpack-dev-server": "^4.15.1",
      "webpack-manifest-plugin": "^5.0.0"
    }
  }```
  
  

• webpack.config.js

  const path = require('path');
  const SRC_DIR = path.resolve(__dirname, "./src");
  const DIST_DIR = path.resolve(__dirname, "dist", "problem");
  
  // compile sass into css
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  // create a manifest.js
  const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  
  
  let mode = "development";
  
  var target = "web";
  
  if (process.env.NODE_ENV === "production") {
    mode = "production";
  }
  
  module.exports = {
    mode: mode,
    entry: {
      index: SRC_DIR + '/javascripts/index.js',
      password_field_functions:  SRC_DIR + '/javascripts/field_functions.js',
      application: SRC_DIR + '/stylesheets/application.scss',
      bootstrap_problem: SRC_DIR + '/stylesheets/bootstrap_problem.scss',
    },
    output: {
      filename: 'javascripts/[name].[chunkhash].js',
      path: path.resolve(__dirname, DIST_DIR),
      publicPath: '/problem/'
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader, // Extracts CSS into separate files
            'css-loader',               // Translates CSS into CommonJS
            {
              loader: 'sass-loader',   // Compiles Sass to CSS
              options: {
                sassOptions: {
                  includePaths: [
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, 'src/stylesheets')
                  ],
                }
              }
            }
          ]
        },
        {
          test: /\.js$/, // regex to match .js files
          exclude: /node_modules/,
        }
      ]
    },
    devtool: 'inline-source-map',
    devServer: {
      static: path.join(__dirname, 'src'), // Specify the root directory for your static files (e.g., images, styles)
      port: 3050, // Port for the development server
      open: true,
      hot: false, // Enable hot module replacement
      onBeforeSetupMiddleware: function(devServer) {
        devServer.app.use(function(req, res, next) {
          const allowedOrigins = [
            "http://localhost:3000",
            "http://localhost:3002",
            // ... add other origins as needed
          ];
          const origin = req.headers.origin;
  
          if (allowedOrigins.includes(origin)) {
            res.setHeader("Access-Control-Allow-Origin", origin);
          }
  
          next();
        });
      }
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: 'stylesheets/[name].[contenthash].css'
      }),
      new WebpackManifestPlugin({}),
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      }),
      new CleanWebpackPlugin(),
    ],
  };```
  
  
  [1]: https://github.com/ChidoYo/livereload-repair