webpack-dev-server inside express? - node.js

Question

I´m trying to understand how to use webpack-dev-server for hot bundling and reloading and I got the following code from react-redux-universal-hot-example:
var Express = require('express');
var webpack = require('webpack');
var config = require('../src/config');
var webpackConfig = require('./dev.config');
var compiler = webpack(webpackConfig);
var host = config.host || 'localhost';
var port = (Number(config.port) + 1) || 3001;
var serverOptions = {
contentBase: 'http://' + host + ':' + port,
quiet: true,
noInfo: true,
hot: true,
inline: true,
lazy: false,
publicPath: webpackConfig.output.publicPath,
headers: {'Access-Control-Allow-Origin': '*'},
stats: {colors: true}
};
var app = new Express();
app.use(require('webpack-dev-middleware')(compiler, serverOptions));
app.use(require('webpack-hot-middleware')(compiler));
app.listen(port, function onAppListening(err) {
if (err) {
console.error(err);
} else {
console.info('==> Webpack development server listening on port %s', port);
}
});
Questions:
a) Why is this code calling var app = Express() to seutp an express server ? Isn´t it webpack-dev-server a server itself ?
b) From the webpack-dev-server I expected somthing like:
var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");
var fs = require("fs");
var compiler = webpack({
// configuration
});
var server = new WebpackDevServer(compiler, {
// webpack-dev-server options
}) ;
Why is react-redux-universal-hot-example doing it inside a new instance of express() ?
c) Is there any docs or tutorials of this type of webpack-dev-server usage ?
Thanks for helping - I´m confused here.

Answer 1

As far as you see your application require a pair of middlewares
app.use(require('webpack-dev-middleware')(compiler, serverOptions));
app.use(require('webpack-hot-middleware')(compiler));
It's just easier to set it up having express middleware system.
There is a good documentation with examples https://webpack.github.io/docs/webpack-dev-server.html