Hot reload with bundled assets are not being loaded/auto refresh in browser

I am trying to hot reload with my project’s bundled assets, but hot reload is not executing the browser refreshes when I make changes to any of my files.

I am looking at the F12 browser console, but nothing is being executed or loading, its just blank.

functions.php

function workshop_01_theme() {     wp_enqueue_script('workshop_01-js', get_theme_file_uri('/bundled-assets/scripts.bedc8565a6cb22e37037.js'), NULL, '1.0', true);     wp_enqueue_style('worskshop_01-style', get_theme_file_uri('/bundled-assets/styles.bedc8565a6cb22e37037.css')); } add_action('wp_enqueue_scripts', 'workshop_01_theme'); 

enter image description here

package.json

{   "name": "workshop_01",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "dev": "npm-run-all -p devFast buildWatch",     "devFast": "webpack serve",     "buildWatch": "webpack --watch",     "build": "webpack",     "test": "echo \"Error: no test specified\" && exit 1"   },   "keywords": [],   "author": "",   "license": "ISC",   "dependencies": {     "@babel/core": "^7.14.5",     "@babel/preset-env": "^7.14.5",     "@babel/preset-react": "^7.14.5",     "@glidejs/glide": "^3.4.1",     "autoprefixer": "^10.2.6",     "axios": "^0.21.1",     "babel-loader": "^8.2.2",     "clean-webpack-plugin": "^4.0.0-alpha.0",     "css-loader": "^5.2.6",     "cssnano": "^5.0.6",     "fs-extra": "^10.0.0",     "jquery": "^3.6.0",     "mini-css-extract-plugin": "^1.6.0",     "normalize.css": "^8.0.1",     "npm-run-all": "^4.1.5",     "postcss-color-function": "^4.1.0",     "postcss-hexrgba": "^2.0.1",     "postcss-import": "^14.0.2",     "postcss-loader": "^6.1.0",     "postcss-mixins": "^8.1.0",     "postcss-nested": "^5.0.5",     "postcss-simple-vars": "^6.0.3",     "react": "^17.0.2",     "react-dom": "^17.0.2",     "style-loader": "^2.0.0",     "webpack": "^5.38.1",     "webpack-cli": "^4.7.2",     "webpack-dev-server": "^3.11.2",     "webpack-manifest-plugin": "^3.1.1"   } } 

scripts.js

import "../css/styles.css"  // Allow new JS and CSS to load in browser without a traditional page refresh if (module.hot) {   module.hot.accept() } 

webpack.config.js

const currentTask = process.env.npm_lifecycle_event const path = require("path") const MiniCssExtractPlugin = require("mini-css-extract-plugin") const { CleanWebpackPlugin } = require("clean-webpack-plugin") const { WebpackManifestPlugin } = require("webpack-manifest-plugin") const fse = require("fs-extra")  const postCSSPlugins = [require("postcss-import"), require("postcss-mixins"), require("postcss-simple-vars"), require("postcss-nested"), require("postcss-hexrgba"), require("postcss-color-function"), require("autoprefixer")]  class RunAfterCompile {   apply(compiler) {     compiler.hooks.done.tap("Update functions.php", function () {       // update functions php here       const manifest = fse.readJsonSync("./bundled-assets/manifest.json")        fse.readFile("./functions.php", "utf8", function (err, data) {         if (err) {           console.log(err)         }          const scriptsRegEx = new RegExp("/bundled-assets/scripts.+?'", "g")         const vendorsRegEx = new RegExp("/bundled-assets/vendors.+?'", "g")         const cssRegEx = new RegExp("/bundled-assets/styles.+?'", "g")          let result = data.replace(scriptsRegEx, `/bundled-assets/$  {manifest["scripts.js"]}'`).replace(vendorsRegEx, `/bundled-assets/$  {manifest["vendors~scripts.js"]}'`).replace(cssRegEx, `/bundled-assets/$  {manifest["scripts.css"]}'`)          fse.writeFile("./functions.php", result, "utf8", function (err) {           if (err) return console.log(err)         })       })     })   } }  let cssConfig = {   test: /\.css$  /i,   use: ["css-loader?url=false", { loader: "postcss-loader", options: { postcssOptions :{ plugins: postCSSPlugins } }}] }  let config = {   entry: {     scripts: "./js/scripts.js"   },   plugins: [],   module: {     rules: [       cssConfig,       {         test: /\.js$  /,         exclude: /(node_modules)/,         use: {           loader: "babel-loader",           options: {             presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]]           }         }       }     ]   } }  if (currentTask == "devFast") {   config.devtool = "source-map"   cssConfig.use.unshift("style-loader")   config.output = {     filename: "bundled.js",     publicPath: "http://localhost:3000/"   }   config.devServer = {     before: function (app, server) {       // server._watch(["./**/*.php", "./**/*.js"])       server._watch(["./**/*.php", "!./functions.php"])     },     public: "http://localhost:3000",     publicPath: "http://localhost:3000/",     disableHostCheck: true,     contentBase: path.join(__dirname),     contentBasePublicPath: "http://localhost:3000/",     hot: true,     port: 3000,     headers: {       "Access-Control-Allow-Origin": "*"     }   }   config.mode = "development" }  if (currentTask == "build" || currentTask == "buildWatch") {   cssConfig.use.unshift(MiniCssExtractPlugin.loader)   postCSSPlugins.push(require("cssnano"))   config.output = {     publicPath: "/wp-content/themes/workshop_01/bundled-assets/",     filename: "[name].[chunkhash].js",     chunkFilename: "[name].[chunkhash].js",     path: path.resolve(__dirname, "bundled-assets")   }   config.mode = "production"   config.optimization = {     splitChunks: { chunks: "all" }   }   config.plugins.push(new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: "styles.[chunkhash].css" }), new WebpackManifestPlugin({ publicPath: "" }), new RunAfterCompile()) }  module.exports = config 

my webpack config file may be the issue, but I dont know what I should be doing to make hot reload work for my project here…