Does this work with hot loading?

[bebraw]

I see WebpackDevServer comes with special support for hot loading. Middleware does not seem to include it. Is it possible to use the middleware with hot loading somehow?

[sokra]

webpack-dev-server uses webpack-dev-middleware

You can use HMR, but you need to implement the change notification by yourself.

[bebraw]

Ok, thanks!

I had a look at code. Maybe it would make sense to separate the HMR bit so it's easier to compose but apart from that we can probably consider this issue resolved.

Incidentally I noticed that WebpackDevServer supports historyApiFallback argument. Given it was not documented yet, I added a note about it at the docs so it is easier to find.

[sokra]

👍 Thanks

[dtothefp]

@bebraw did you ever figure this out? I'm a little confused when @sokra says "you need to implement the change notification by yourself". Could one of you point me in the right direction?

[bebraw]

@dtothefp Middleware was too low level for my purposes after all. historyApiFallback did exactly what I needed. I wanted to access the site from any url (not just root) and enabling that helped me to do that. Here's an example without imports:

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
}).listen(port, ip, function (err) {
    if(err) {
        return console.log(err);
    }

    console.log('Listening at ' + ip + ':' + port);
});

@dtothefp Can you describe your use case?

[dtothefp]

@bebraw thanks, I'm familiar with the webpack-dev-server and have used it quite a bit. I'm currently working on a project where they have a small express server serving frontend assets locally. I've successfully add the webpack-dev-middleware to the express server but want to figure out how to get hot module replacement working.

  app.use(webpackMiddleware(compiler, {
    publicPath: wpConfig.output.publicPath
  }));

Generally I use webpack.HotModuleReplacementPlugin in combo with the config you have above (minus the hot: true property and

var devScripts = [
    'webpack-dev-server/client?http://localhost:' + options.port,
    'webpack/hot/only-dev-server',
  ]

bundled with my entries. If I add the first script 'webpack-dev-server/client?http://localhost:' + options.port this throws an error in Socket.io in the webpack-dev-server

I'm assuming what @sokra is talking about above relates to this https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack#from-the-module-view so I guess I just need to dig into the docs more

[dtothefp]

@sokra could you please give me some advice on hot-module-replacement with webpack-dev-middleware. I cloned your example app but still didn't completely get it. In that app

module.hot.apply(function(err, renewedModules) {
    if(err) return hotResult.text(err.toString());
    if(renewedModules) hotResult.text("Renewed modules: " + renewedModules.join(", "));
});

module.hot.status() continually throws an error (as expected from the docs) because it status !== 'ready'. But, even if I change code in the /pages directory which seems to be setup for hot-module-replacement, nothing seems to update. I setup an example repo and from the code here I thought that all JS in the /views directory would work with hot-module-replacement.

var page = require('page');
var views = require('./views');

if(module.hot) {
  module.hot.accept('./views', function() {
    views = require('./views');
  });
}

// start router
page('/', views.home);
page('/download', views.download);
page('/c/:id/:token', views.chat);
page('/:key', views.question);

I'm a little confused from the docs and the example app, as I can't figure out what handlers to apply to create hot-module-replacement with scripts using the webpack-dev-middleware

[sokra]

@dtothefp You need to call module.hot.check first before using module.hot.apply. The "example-app" is pretty old and the API changed in between.

http://webpack.github.io/docs/hot-module-replacement.html#management-api

[dtothefp]

@sokra I actually am calling check here

https://github.com/dtothefp/webpack-middleware-test/blob/master/lib/index.js#L32

but was getting errors because it kept telling me check is only allowed in idle status. It seems some sort of recursive loop because if on page load I call module.hot.status() the status is "idle". But, when I call module.hot.check the status becomes "check" and the check method throws an error in the try/catch block, as well as passing the error argument to the callback function. It seems the middleware is difficult to setup with hot loading, so I will probably move more towards the technique you mentioned here

gaearon/react-hot-loader#46 (comment)

[sokra]

hmm... It shouldn't be so complex. Take a look at the file in webpack/hot which feature some HMR management implementations.

[mattpage]

For anybody that is struggling with getting HMR working, I created a node module that implements HMR on top of webpack-dev-middleware. You can find it here.

[pixeldrew]

another module that works: https://www.npmjs.com/package/webpack-hot-middleware