React Webpack production setup - node.js

Question

I'm trying to put my ReactJS website into production. However, I believe that my setup with my server and webpack is not well made so that it fails to load the built CSS and js on Heroku. Can anyone check on my setup, please?
server.js:
const path = require('path');
const express = require('express');
const compression = require('compression');
const minify = require('express-minify');
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');
const app = express();
/** *************************** Environment Setup ************************** **/
const isDeveloping = process.env.NODE_ENV !== 'production';
const port = isDeveloping ? 2333 : process.env.PORT;
/** ****************************** Output Setup **************************** **/
if (isDeveloping) {
const compiler = webpack(config);
const middleware = webpackMiddleware(compiler, {
publicPath: config.output.publicPath,
contentBase: 'src',
stats: {
colors: true,
hash: false,
timings: true,
chunks: false,
chunkModules: false,
modules: false
}
});
app.use(middleware);
// Compress everything to speedup
app.use(compression({threshold: 0}));
// Minify and cache everything
app.use(minify());
app.use(webpackHotMiddleware(compiler));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '/dist'));
res.end();
});
} else {
// Compress everything to speedup
app.use(compression({threshold: 0}));
// Minify and cache everything
app.use(minify());
app.use(express.static(__dirname + '/dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '/dist'));
});
}
/** **************************** Server Running **************************** **/
app.listen(port, '0.0.0.0', function onStart(err) {
if (err) {
console.log(err);
}
console.info('==> 🌎 Listening on port %s.', port);
});
webpack.production.config.js:
'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var StatsPlugin = require('stats-webpack-plugin');
module.exports = {
entry: [
path.join(__dirname, 'app/App.jsx')
],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]-[hash].min.js',
publicPath: '/dist/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
new ExtractTextPlugin('[name]-[hash].min.css'),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compressor: {
warnings: false,
screw_ie8: true
}
}),
new StatsPlugin('webpack.stats.json', {
source: false,
modules: false
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
],
resolve: {
root: path.resolve('./'),
alias: {
jsx: 'app/jsx',
components: 'app/jsx/components',
utils: 'app/jsx/utils'
},
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
"presets": ["es2015", "stage-0", "react"]
}
}, {
test: /\.json?$/,
loader: 'json'
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[name]---[local]---[hash:base64:5]!postcss')
}, {
test: /img.*\.(jpg|jpeg|gif|png|svg)$/i,
loader: 'url-loader?name=/app/img/[name].[ext]'
}, {
test: /\.ico$/,
loader: 'file-loader?name=app/img/[name].[ext]'
}]
},
postcss: [
require('autoprefixer')
]
};
package.json script:
...
"scripts": {
"test": "",
"start": "node server",
"build": "rimraf dist && cross-env NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors",
"eslint": "eslint .",
"jscs": "jscs .",
"prod": "NODE_ENV=production node server",
"postinstall": "npm run build"
},
...
Thanks for the help.