title: Correctly configure webpack-dev-middleware with vuejs project
body: <p>I'm new to webpack so it's probably a stupid mistake on my part.</p>
  
  <p>This is my project setup (root, atleast the relevant part):</p>
  
  <pre><code> +-- public
   |  |  
   |  +-- index.html
   |    
   +-- src
   |  |  
   |  +-- App.vue
   |  +-- main.js
   |  +-- assets
   |    
   +-- package.json
   |    
   +-- webpack.config.js
  </code></pre>
  
  <p>Now I would like to use the webpack-dev(and hot)-middleware to serve my index.html and create a bundle in memory from my src folder. Now I can get the middleware set up (via the npm page) and I see the bundle gets created (through logging in console) but two things are not clear to me:</p>
  
  <ul>
  <li>How to serve index.html</li>
  <li>How to use the bundle thats created in memory?</li>
  </ul>
  
  <p>Can somebody please explain how that middleware works exactly? This is my webpack config file (which is needed to plug into the middleware, it's just a copy of the webpack config file that gets created through the vue-cli):</p>
  
  <pre><code>var path = require('path')
  var webpack = require('webpack')
  
  module.exports = {
    entry: './src/main.js',
    output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist/',
      filename: 'build.js'
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            // vue-loader options go here
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
        }
      ]
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.common.js'
      }
    },
    devServer: {
      historyApiFallback: true,
      noInfo: true
    },
    devtool: '#eval-source-map'
  }
  
  if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          warnings: false
        }
      }),
      new webpack.LoaderOptionsPlugin({
        minimize: true
      })
    ])
  }
  </code></pre>
  
  <p>I know this is probably not the correct configuration, can someone maybe point out some things?</p>
  
  <p>Thanks in advance for your help!</p>
  
  <p><strong>Edit (this setup works)</strong>:</p>
  
  <p>My server.js now:</p>
  
  <pre><code>var express = require('express');
  var logger = require('morgan');
  var bodyParser = require('body-parser');
  var exphbs  = require('express-handlebars');
  var helmet = require('helmet');
  var redis = require('redis');
  var redisAdapter = require('socket.io-redis');
  var app = express();
  var server = require('http').Server(app);
  var io = require('socket.io')(server);
  // use the redis adapter to create sticky sessions, this is needed because of the different clusters
  io.adapter(redisAdapter( require('./app/lib/config').credentials.redis.url ));
  
  //setup security ===============================================================
  require('./app/lib/security-setup')(app, helmet);
  
  // configuration ===============================================================
  app.use(logger('dev')); // log every request to the console
  
  // set up our express application ==============================================
  
  // Make the body object available on the request
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));
  
  //set handlebars as default templating engine
  app.engine('handlebars', exphbs());
  app.set('view engine', 'handlebars');
  
  // serve the static content ====================================================
  if (app.settings.env === 'development') {
    var webpackConfig = require('./webpack.config.js')
    var compiler = require('webpack')(webpackConfig)
    var devMiddleware = require('webpack-dev-middleware')(compiler, {
      publicPath: webpackConfig.output.publicPath,
    })
    var hotMiddleware = require('webpack-hot-middleware')(compiler)
  
    app.use(devMiddleware)
    app.use(hotMiddleware)
  } else {
      app.use(express.static(__dirname + '/public'));
  }
  
  // set up global variables =====================================================
  app.use(function(req, res, next) {
    //set the io object on the response, so we can access it in our routes
    res.io = io;
    next();
  });
  
  // routes ======================================================================
  require('./app/routes.js')(app); // load our routes and pass in our app
  
  // export so bin/www can launch ================================================
  module.exports = {app: app, server: server};
  </code></pre>
  
  <p>my ./bin/www:</p>
  
  <pre><code>#!/usr/bin/env node
  
  /**
   * Module dependencies.
   */
  
  var app = require('../server').app;
  var cluster = require('cluster');
  var debug = require('debug')('temp:server');
  var http = require('http');
  var numCPUs = process.env.WORKERS || require('os').cpus().length;
  
  /**
   * Get port from environment and store in Express.
   */
  
  var port = normalizePort(process.env.PORT || '3000');
  app.set('port', port);
  
  if (cluster.isMaster) {
    // Fork workers.
    for (var i = 0; i &lt; numCPUs; i++) {
      cluster.fork();
    }
  
    // If a worker dies, log it to the console and start another worker.
    cluster.on('exit', function(worker, code, signal) {
      console.log('Worker ' + worker.process.pid + ' died.');
      cluster.fork();
    });
  
    // Log when a worker starts listening
    cluster.on('listening', function(worker, address) {
      console.log('Worker started with PID ' + worker.process.pid + '.');
    });
  
  } else {
    /**
     * Create HTTP server.
     */
  
    var server = require('../server').server;
  
    /**
     * Listen on provided port, on all network interfaces.
     */
    server.listen(port);
  
    server.on('error', onError);
    server.on('listening', onListening);
  }
  
  // The rest of the bin/www file.....
  
  /**
   * Normalize a port into a number, string, or false.
   */
  
  function normalizePort(val) {
    var port = parseInt(val, 10);
  
    if (isNaN(port)) {
      // named pipe
      return val;
    }
  
    if (port &gt;= 0) {
      // port number
      return port;
    }
  
    return false;
  }
  
  /**
   * Event listener for HTTP server "error" event.
   */
  
  function onError(error) {
    if (error.syscall !== 'listen') {
      throw error;
    }
  
    var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port;
  
    // handle specific listen errors with friendly messages
    switch (error.code) {
      case 'EACCES':
        console.error(bind + ' requires elevated privileges');
        process.exit(1);
        break;
      case 'EADDRINUSE':
        console.error(bind + ' is already in use');
        process.exit(1);
        break;
      default:
        throw error;
    }
  }
  
  /**
   * Event listener for HTTP server "listening" event.
   */
  
  function onListening() {
    var addr = server.address();
    var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port;
    debug('Listening on ' + bind);
  }
  </code></pre>
  
  <p>My working webpack.config.js:</p>
  
  <pre><code>var path = require('path')
  var webpack = require('webpack')
  var HtmlWebpackPlugin = require('html-webpack-plugin')
  
  module.exports = {
    entry: [
      'webpack/hot/dev-server',
      'webpack-hot-middleware/client',
      './src/main.js'
    ],
    output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist/',
      filename: 'build.js'
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            // vue-loader options go here
          }
        },
        {
          test: /\.less$/,
          loader: "style!css!less"
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
        }
      ]
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.common.js'
      }
    },
    devServer: {
      historyApiFallback: true,
      noInfo: true
    },
    devtool: '#eval-source-map',
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: path.resolve(__dirname, 'public/index.html'),
        inject: true
      }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ]
  }
  
  if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          warnings: false
        }
      }),
      new webpack.LoaderOptionsPlugin({
        minimize: true
      })
    ])
  }
  </code></pre>