Webpack-express-middleware NPM

webpack-express-middleware

Sweet express and webpack integration.

npm install --save webpack-express-middleware

Set up a webpack server using webpack-dev-middleware and webpack-hot-middleware that also support production mode and a sweet terminal output inspired by create-react-app.

Screenshot

An example webpack.config.js can be found here. (Full-fledged including HMR, Babel, PostCSS, dev + prod builds, code splitting)

const express = require('express');
const createWebpackMiddleware = require('express-webpack-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = require('webpack')(config);

app.set('port', process.env.PORT || 3000);
app.set('host', process.env.HOST || '0.0.0.0');

const webpackMiddleware = createWebpackMiddleware(compiler, config);
webpackMiddleware(app);

app.listen(app.get('port'), app.get('host'), webpackMiddleware.listen);

Why

You want better output in your terminal and a server that just works, both for development and simple production scenarios (e.g need to run the app on Heroku).

The module will only setup the development features when NODE_ENV !== 'production'. In production mode, whatever is defined as output.path in your webpack config will be served using express.static().

Using this server setup, an app can be deployed instantly to Heroku and just work. See also hot-redux-chassis.