title: Webpack dev middleware not serving bundle.js correctly
body: <p>I'm trying to make my own redux starter kit and have been refactoring it a bit, but somehow now my bundle.js (and style.css) aren't served to the page correctly by <code>webpack-dev-middleware</code>. It's been bugging me that I can't find a solution, so here I am asking for some help :)</p>
  
  <p>The four main files that have to do with the problem are the following:</p>
  
  <p><code>/src/server.js</code></p>
  
  <pre><code>import express from 'express';
  import configureMiddleware from './serverConfig.js';
  
  const app = express();
  const PORT = process.env.PORT || 3000;
  
  app.use(configureMiddleware());
  
  app.listen(PORT, (error) =&gt; {
    if (error) {
      throw error;
    } else {
      console.log(__dirname);
      console.log(`All is good @ http://localhost:${PORT}`);
    }
  });
  </code></pre>
  
  <p><code>/src/serverConfig.js</code></p>
  
  <pre><code>import express from 'express';
  import compression from 'compression';
  import React from 'react';
  import { match, RouterContext } from 'react-router';
  import { renderToString } from 'react-dom/server';
  import { Provider } from 'react-redux';
  import configureStore from './store/configureStore';
  import routes from './routes';
  import config from '../webpack.config.client';
  import webpack from 'webpack';
  import webpackDevMiddleware from 'webpack-dev-middleware';
  import webpackHotMiddleware from 'webpack-hot-middleware';
  
  const IS_DEV = process.env.NODE_ENV !== 'production';
  
  function addSharedMiddleware(app) {
    app.set('view engine', 'pug');
    app.set('views', __dirname);
  
    app.get('*', (req, res) =&gt; {
      match({ routes, location: req.url }, (err, redirect, props) =&gt; {
        if (err) {
          res.status(500).send(err.message);
        } else if (!props) {
          res.status(404).send('Not Found');
        } else {
          // Set initialState here if needed.
          const initialState = {};
          const store = configureStore(initialState);
          const react = (
            &lt;Provider store={store}&gt;
              &lt;RouterContext {...props} /&gt;
            &lt;/Provider&gt;
          );
  
          const reactString = renderToString(react);
          const finalState = store.getState();
  
          res.render('index', { reactString, finalState });
        }
      });
    });
  }
  
  function addDevMiddleware(app) {
    const compiler = webpack(config);
    const middleware = webpackDevMiddleware(compiler, {
      publicPath: config.output.path
    });
    app.use(middleware);
    app.use(webpackHotMiddleware(compiler));
  }
  
  function addProdMiddleware(app) {
    app.use(compression());
    app.use(express.static('/'));
  }
  
  export default function () {
    const app = express();
  
    addSharedMiddleware(app);
  
    if (IS_DEV) {
      addDevMiddleware(app);
    } else {
      addProdMiddleware(app);
    }
  
    return app;
  }
  </code></pre>
  
  <p><code>/webpack.config.client.js</code></p>
  
  <pre><code>const webpack = require('webpack');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  const path = require('path');
  
  const clientConfig = {
    context: `${__dirname}/src`,
    debug: true,
    entry: [path.join(process.cwd(), 'src/app.js')],
    output: {
      path: path.join(process.cwd(), 'dist'),
      publicPath: '/',
      filename: 'bundle.js'
    },
    target: 'web',
    plugins: [
      new CopyWebpackPlugin([{
        from: 'index.pug'
      }]),
      new ExtractTextPlugin('style.css')
    ],
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: ['react-hot', 'babel']
        },
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract(['css', 'sass'])
        }
      ]
    }
  };
  
  if (process.env.NODE_ENV !== 'production') {
    clientConfig.entry.unshift('webpack-hot-middleware/client?reload=true');
    clientConfig.plugins.push(
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    )
  } else {
    clientConfig.plugins.push(
      new webpack.DefinePlugin({
      'process.env':{
        'NODE_ENV': JSON.stringify('production')
      }
      }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    );
  }
  
  module.exports = clientConfig;
  </code></pre>
  
  <p>Last but not least, here is the package.json script I'm using to serve:
  <code>"serve": "babel-node ./src/server.js"</code></p>
  
  <p><strong>tl;dr <code>webpack-dev-middleware</code> incorrectly serves bundles</strong></p>
  
  <p>Does anyone know what's going wrong?</p>
  
  <p>Thanks,
  Jori</p>