How to use webpack and webpack-dev-middleware to recompile node.js application on file changes?

I have a Node.js application using Express which is compiled using Webpack 2. Thus, when I call webpack --=config <my_config.dev.js> the application is bundled in a dist folder as app.js. To start it, I simply call node dist/app.

Now I would like to use the webpack-dev-middleware package to i) automatically recompile when source files change, and of course ii) to swap the running bundle with the recompiled one so that actually the changed code is running. (I don't care about hot module swapping and the like.)

I've followed this, and this and added to my main.ts file:

(function () {
    let webpack = require('webpack');
    let webpackConfig = require('../../config/webpack.config.dev')();
    console.log('public path: ' + webpackConfig.output.publicPath);
    let compiler = webpack(webpackConfig);
    app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: false,
    publicPath: webpackConfig.output.publicPath // shouldn't matter (?)
    }));
})();

Running again with node ./dist/app, i) seems to work just fine. Whenever I change a file, Webpack recompiles (in memory) with output such as:

webpack: Compiling...

[at-loader] Checking started in a separate process...
Hash: 67917299c2af66cfef5a
Version: webpack 2.2.0-rc.2
Time: 354ms
Asset    Size  Chunks  Chunk Names
... (output omitted)
[67] ./src/app/main.ts 15.9 kB {0} [built]
 + 53 hidden modules
webpack: Compiled successfully.

[at-loader] Ok, 0.208 sec.

However, ii) doesn't work. When a client application calls the Node.js back-end, it's still the old code running.

What's missing here? What do I need to do that actually the re-compiled code is running? I get the feeling I'm somehow running the ./dist/app from disk and am not using the in-memory image recompiled by Webpack?

via user1043103