CODEWITHSUNDEEP
node.jsexpresswebpack-dev-server
Mendes
Mendes

Reputation: 18441

webpack-dev-server inside express?

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.

Upvotes: 0

Views: 2033

Answers (1)

Denis Rybalka
Denis Rybalka

Reputation: 1871

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

Upvotes: 0

Related Questions