How to enable hot reload when using Webpack in watch mode and Firebase emulators:start

Question

I'm starting off a new project and I though it would be nice to use the full firebase emulators suite.

Se here's what I've thought could work:

// THIS IS MY package.json SCRIPT

"start-firebase-build": "set NODE_ENV=development_firebase&& webpack --config webpack.config.js",

webpack.config.js

That webpack config will do the following:

if (DEVELOPMENT_FIREBASE) {
  
  const DEV_PLUGINS = [
    new webpack.HotModuleReplacementPlugin(),             // ENABLE HMR
    new webpack.HashedModuleIdsPlugin()                   // INCLUDE HASH IN MODULE IDS AND FILENAMES
  ];
  const PLUGINS = config.plugins.concat(DEV_PLUGINS);     // MERGE COMMON AND DEV PLUGINS

  config = {
    ...config,
    watch: true,
    mode: "development",
    devtool: "inline-source-map",
    plugins: PLUGINS,
    output: {
      filename: "[name].[hash:5].js",
      path: path.resolve(__dirname, "public"),           // OUTPUT FILES WILL BE IN /public
      publicPath: "/"
    },
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        ["react-dom"]: "@hot-loader/react-dom"
      }
    }
  };
}

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": "npm --prefix \"$RESOURCE_DIR\" run build"
  },
  "hosting": {
    "public": "public",                     // <---- SERVING FILES FROM /public
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/app.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "functions": {
      "port": 5001
    },
    "firestore": {
      "port": 8080
    },
    "hosting": {
      "port": 5000
    },
    "ui": {
      "enabled": true
    }
  }
}

So I've opened two terminals and I did the following:

TERMINAL 1

npm run start-firebase-build

// THIS WILL RUN THE BUILD FOR FIREBASE IN /public IN WATCH MODE (SO IT CAN BE HOT RELOADED)

TERMINAL 2

firebase emulators:start

// START ALL FIREBASE EMULATORS

---

THE RESULT:

Everything works. But I get no HMR. From what I can see from the script logs, Webpack is doing its thing (regarding reloading the modules), but I have to refresh the page in order to get Firebase to get the new bundle version.

QUESTION

Is it possible to develop using firebase hosting emulator and still get hot reloading while making changes to the front-end code?

I mean, if this is not possible, a solution to this could be just use firestore and functions emulators while still using webpack-dev-server as the "hosting provider", but I kind of "lose communication" with the hosting settings from firebase.json.

Imagine I have a buildSitemap cloud function that responds to the URL /sitemap.xml. That information is stored in firebase.json and that rewrite is done by Firebase hosting.

firebase.json

"rewrites": [
  {
    "source": "/sitemap.xml",
    "function": "buildSitemap"
  },
]

How do people usually handle this?