Webpack not compiling when not in the root url - express

Question

I have the following output section specified in my webpack.config.js:
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/'
},
I then have my express server set up like this:
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const config = require('./webpack.config.dev');
const app = express();
const compiler = webpack(config);
var host = config.host || 'localhost';
var port = (Number(config.port) + 1) || 4040;
const serverConfig = {
contentBase: 'http://' + host + ':' + port,
quiet: true,
noInfo: true,
hot: true,
inline: true,
lazy: false,
headers: {'Access-Control-Allow-Origin': '*'},
stats: {colors: true},
publicPath: '/'
};
app.use(express.static(__dirname + '/public'));
app.use(require('webpack-dev-middleware')(compiler, serverConfig));
app.use(require('webpack-hot-middleware')(compiler));
const indexFile = path.join(__dirname, './client/public/index.html');
app.use(express.static(__dirname + './build'))
app.get('*', function(req, res) {
console.log(req.originalUrl);
res.sendFile(indexFile);
});
app.listen(4040, 'localhost', function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:4040');
});
When I am at the root url, i.e. '/' then the bundle.js file is rendered:
<script src="bundle.js"/>
But when I navigate to a non root url and refresh the page, webpack does not render the bundle.js and the script tag is not added.

Answer 1

By default only the root serves index.html. You need to enable historyApiFallback in your dev server config historyApiFallback: true. That way the server will serve index.html in all routes.

Answer 2

Turns out this more convoluted because I am using the HtmlWebpackPlugin, this fixes it:
var express = require('express');
var app = express();
var webpack = require('webpack');
var path = require('path');
var compiler = webpack(require('./webpack.config.js'));
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: '/'
}));
app.use('*', function (req, res, next) {
var filename = path.join(compiler.outputPath,'index.html');
compiler.outputFileSystem.readFile(filename, function(err, result){
if (err) {
return next(err);
}
res.set('content-type','text/html');
res.send(result);
res.end();
});
});
app.listen(3000);