backbone.js - Getting marionette.backbone to work with webpack hot module replacement -

i used sample project here set webpack project hot module replacement. set sample backbone application.

// main.js  import $ 'jquery';  import backbone 'backbone';    import router './router';    window.app = window.app || {};    const app = new backbone.marionette.application();  app.addregions({content: '#content'});    app.on('start', () => {      if (backbone.history)        backbone.history.start({ pushstate: true })  }    );    app.addinitializer(() => {    return new router();  });      $( () => { app.start() });    // hmr  if (module.hot) {      module.hot.accept();  }

i can see hrm loading fine based on [hmr] connected debug output. when file changes can see rebuilding , pushing updates client side based on following output:

[hmr] updated modules: process-update.js?e13e:77 [hmr]  - ./app/backbone/views/template.hbs process-update.js?e13e:77 [hmr]  - ./app/backbone/views/hello.js process-update.js?e13e:77 [hmr]  - ./app/backbone/router.js 

however screen doesn't reload. nothing happens.

any idea how work? or hmr supposed work react?

it's bit tricker can working backbone. blog post here explains well. (disclaimer, wrote it)

in short, need explicitly tell parent view can accept hot reload, re-require new hot reloaded view, close out existing child view, , re-render it. below example uses ampersand same basic principal applies marionette or vanilla backbone

/* parent.view.js */ var childview = require('./child.view.js'); var parentview = ampersandview.extend({     template : require('path/to/template.hbs')      initialize: function(){         var self = this;         if(module.hot){             module.hot.accept('./child.view.js', function(){                 // re-require child view, give new hot-reloaded child view                 var newchildview = require('./child.view.js');                 // remove old view.  in ampersand call 'remove'                 self.renderchildview(newchildview);             });         }     },      renderchildview(view){         if(this.child){             this.child.remove();         }         // use passed in view         var childview = new view({             model: this.model         });         this.child = this.rendersubview(childview, this.query('.container'));     }       render: function(){         this.renderwithtemplate(this);         renderchildview(childview);         return this;     } }); 

```