Simple quick and dirty hot reloading for phaser 2 games with webpack

Game.js

import "pixi";
import Phaser from "phaser";

import hotReloadPatcher from "./utils/hotReloadPatcher";
import hotReloadState from "./utils/hotReloadState";

import BootState from "./states/Boot";
import PreloadState from "./states/Preload";
import GameState from "./states/Game";

export default class Game extends Phaser.Game {

    constructor() {
        const el = document.getElementById("game");
        super(650, 680, Phaser.AUTO, el);

        hotReloadPatcher(this.state);

        this.state.add("Boot", BootState);
        this.state.add("Preload", PreloadState);
        this.state.add("Game", GameState);

        if (module.hot) {
            module.hot.accept("./states/Boot", () => hotReloadState(this.state, "Boot", () => require("./states/Boot").default)); // eslint-disable-line global-require
            module.hot.accept("./states/Preload", () => hotReloadState(this.state, "Preload", () => require("./states/Preload").default)); // eslint-disable-line global-require
            module.hot.accept("./states/Game", () => hotReloadState(this.state, "Game", () => require("./states/Game").default)); // eslint-disable-line global-require
        }
        this.state.start("Boot");
    }

}

hotReloadPatcher.js

/* eslint-disable no-param-reassign */

export default function hotReloadPatcher(stateManager) {
    if (module.hot) {
        const stateStart = stateManager.start.bind(stateManager);
        stateManager.hotReloadStartedStates = [];
        stateManager.hotReloadLastUsedParameters = [];
        stateManager.start = function hotReloadStart(key, clearWorld, clearCache, ...parameters) {
            const indexOfKey = this.hotReloadStartedStates.indexOf(key);
            if (indexOfKey !== -1) {
                this.hotReloadStartedStates.splice(indexOfKey, 1);
            }

            this.hotReloadStartedStates.push(key);
            stateManager.hotReloadLastUsedParameters = [clearWorld, clearCache, ...parameters];
            stateStart(key, clearWorld, clearCache, ...parameters);
        };
    }
}

hotReloadState.js

export default function hotReloadState(stateManager, key, newStateFactory) {
    if (module.hot) {
        const newState = newStateFactory();
        if (stateManager.hotReloadStartedStates.indexOf(key) === -1) {
            console.log(`Successful replaced state "${key}"`); // eslint-disable-line no-console

            stateManager.remove(key);
            stateManager.add(key, newState);
        } else if (stateManager.getCurrentState() && stateManager.getCurrentState().key === key) {
            console.log(`Successful replaced state "${key}" and restarted current state`); // eslint-disable-line no-console

            stateManager.clearCurrentState();
            stateManager.remove(key);
            stateManager.add(key, newState);

            stateManager.start(key, ...stateManager.hotReloadLastUsedParameters);
        } else {
            console.warn(`The state "${key}" was already called. A page refresh is required!`); // eslint-disable-line no-console
            window.location.reload();
        }
    }
}

package.json

{
   "...": "...",
   "scripts": {
     "dev:web": "webpack-dev-server --config ./webpack/webpack.web.config.js --content-base assets --hot --inline --port 3002"
   }
}