is it possible to achieve hot module reloading in Pixi.js / Webpack

[goldenratio]

Hey all,

Has anyone implemented hot module reloading (HMR) with Pixi.js / Webpack? Basically, I don't want to reload the whole app every time I make code changes.

Any thoughts on this, is much appreciated.

[zOadT]

Hey!

First of, I don't think there is a one fits all solution because it depends on how you prefer to structure your code (and with Pixi.js you basically have all the options) but I want to share the setup that works at least for me.

My approach is to simply swap the prototype of class instances when the class changes, so e.g. when I have a class and some instance

class A {
  update() {
    console.log(1); // (a)
  }
}

// Note, this should be done in a separate module, currently changes on Scene
// will result in additional scenes and intervals being initialised (b)
const instance = new A();
setInterval(() => instance.update(), 1000);

Now when I modify line (a) to print 2 instead of 1, instance.update basically gets replaced by HMR and only 2 gets printed (but twice per second because of the issue described in (b), but this isn't an issue for me in practice because initialisations of classes don't often happen at top level of modules in my code base. One could probably adapt some additional logic to mitigate this, but it would maybe just lead to some confusion later on)

This works well for me because scenes are defined as classes in my case, but I can imagine that for other scenarios maybe you want to replace function bodies in general or do something completely else.

To implement this behaviour I wrote a custom typescript transformer that searches for class declarations and adds the necessary code to handle the stuff as described above. I want to properly open source my setup at some point, but want to add some documentation and do some updates before that. But you can just go to my itch.io profile (my name is the same as in Github) and download the source of my latest jam game ("limited headspace") It is just a Webpack project were the relevant part is that I added a transformer to the ts-loader (only hotReplacementTransformer is relevant)

Note: It is a jam entry, so there is a lot of "funny" stuff going on that you can probably ignore 😄 But I think you should be able to add it to your setup to see how it works.

Hope this is helpful for you in some way!