Webpack Express Reload

Autoreload webpack app running through an express server. Not HMR. Works with webpack-dev-middleware.

Installation

npm install -D webpack-express-reload

Inside your server.js file convert your express server into a server that supports live-reload using SockJS.

const express = require('express');
const path = require('path');
const app = express();

const Webpack = require('webpack')
const middleware = require('webpack-dev-middleware');
const webpackConfig = require('./webpack.config');

const PORT = process.env.PORT || 3001;
const HOST = process.env.HOST || '0.0.0.0';

const compiler = Webpack(webpackConfig);

app.use(middleware(compiler));
app.use(express.static(path.resolve(__dirname, 'public')))

const server = require('webpack-express-reload')(app, compiler, { path: '/_testapp'});

server.listen(PORT, HOST, () => {
  console.log(`Listening on http://${HOST}:${PORT}`);
});

Inside your webpack.config.js add the webpack-express-reload client. Specify the url to connect to the server using ?http://0.0.0.0:3001/_testapp where /_testapp os the path defined in the server config.

const path = require('path');

module.exports = {
  entry: [
    path.resolve(__dirname, 'src/index.js'),
    `webpack-express-reload/client?http://0.0.0.0:3001/_testapp`
  ],
  mode: process.env.NODE_ENV || 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
}