Feature request: Expose an event handler so server can tell client to reload

[webpack-contrib]

Feature request: Expose an event handler so server can tell client to reload

[glenjamin]

Would this be the normal hot-reload signal, or a different one where you could whatever you want?

I think a hot-reload signal wouldn't work, because webpack would need to compare the hash - but I'm open to making both ends of the socket extensible to additional events.

[mcmire]

Yeah, it would be a more generic signal in this case -- I don't need to rebuild webpack or do any HMR stuff, I just need to tell the page to reload somehow.

[glenjamin]

How about something like this?
https://github.com/glenjamin/webpack-hot-middleware/tree/custom-events

I'll have to write some docs for this I think, rather than messing with the simple example - you need to require the client yourself rather than including it in the webpack config to get a reference to module for attaching your custom handler.

[mcmire]

That would work, although instead of the client exporting a function, what about an object that has a subscribe method (which would be the opposite of the middleware's publish method)?

Here's how I'd probably envision it:

// backend/index.js

var server = require("./server");
var hotReloader = require("./hot-reloader");

hotReloader.activate(server);
server.start();

// backend/server.js

var webpack = require("webpack");
var buildWebpackDevMiddleware = require("webpack-dev-middleware");
var buildWebpackHotMiddleware = require("webpack-hot-middleware");

function createServer() {
  var server = express();
  var compiler = webpack(...);
  var webpackDevMiddleware = buildWebpackDevMiddleware(compiler, { ... });
  var webpackHotMiddleware = buildWebpackHotMiddleware(compiler);
  app.use(webpackDevMiddleware);
  app.use(webpackHotMiddleware);

  function start() {
    server.listen(3000, "localhost", function () {
      console.log("App server started on port 3000");
    });
  }

  function reloadClient() {
    webpackHotMiddleware.publish({ reload: true });
  }

  return {
    start: start,
    reloadClient: reloadClient
  };
}

module.exports = createServer();

// backend/hot-reloader.js

function activate(appServer) {
  var watcher = chokidar.watch("./backend/routes.js");
  watcher.on("ready", function () {
    watcher.on("all", function () {
      for (var id in require.cache) {
        if (/\/backend\//.test(id)) {
          console.log("Removing from require.cache: " + id);
          delete require.cache[id];
          appServer.reloadClient();
        }
      }
    });
  });
}

module.exports = {
  activate: activate
};

// frontend/index.js

var webpackHotMiddlewareClient = require("webpack-hot-middleware/client");

webpackHotMiddlewareClient.subscribe(function (message) {
  if (message.reload === true) {
    window.location.reload();
  }
});

[glenjamin]

Yep, that's doable.

I'll try and tidy this up and publish in the next week or so.

[mcmire]

Cool, sounds good. Thanks for the quick reply!

[glenjamin]

Released in v2.3.0 - ad98aeb

[mcmire]

Great, thanks!

[the-dijkstra]

this is amazing thanks ;)