title: Webpack Dev Server Not Hot Reloading .vue files
body: <p>Been working on a project and was sure HMR was working, any of my .js files if I would update them webpack would compile and the module would be replaced all hot like.</p>
  
  <p>I was working on a .vue file and webpack would recompile, but there was no super fresh HMR.</p>
  
  <p>Hoping someone can take a look and tell me if something is off:</p>
  
  <p>The script I'm using in the cli looks like this.</p>
  
  <p><code>webpack-dev-server --d --watch --output-path ./public --config ./_src/webpack.config.js --progress --env.dev</code></p>
  
  <p>I'm guessing the most important bit to look at is this:</p>
  
  <pre><code>devServer: {
      contentBase: 'public',
      hot: true,
      filename: 'main.js',
      overlay: true,
      stats: { colors: true },
      port: 3000,
      proxy: {
        '/': {
          target: 'http://moment.local/',
          secure: false,
          changeOrigin: true
        }
      },
      historyApiFallback: true
    },
  </code></pre>
  
  <p>But here is my whole config if it helps.</p>
  
  <pre><code>const webpack = require('webpack')
  const {resolve} = require('path')
  
  const ExtractTextPlugin = require('extract-text-webpack-plugin')
  
  module.exports = env =&gt; {
  const addPlugin = (add, plugin) =&gt; add ? plugin : undefined
  const ifProd = plugin =&gt; addPlugin(env.prod, plugin)
  const removeEmpty = array =&gt; array.filter(i =&gt; !!i)
  
  // Our Sass Extraction Plugin
  const extractSass = new ExtractTextPlugin({
    filename: 'style.css',
    disable: env.dev
  })
  
  return {
    entry: {
      'vendor': ['jquery', 'KlaviyoSubscribe', 'learnq', 'select2', 'slick-carousel', 'moment', 'lodash'],
      'main': resolve(__dirname, './js/index.js')
    },
    output: {
      filename: '[name].js',
      path: resolve(__dirname, '../public/'),
      pathinfo: !env.prod
    },
    module: {
      loaders: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
              css: 'vue-style-loader!css-loader!postcss-loader!sass-loader', // &lt;style lang='scss'&gt;
              scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader', // &lt;style lang='scss'&gt;
              sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax' // &lt;style lang='sass'&gt;
            }
          }
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        { test: /\.s(c|a)ss$/,
          use: extractSass.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 1,
                  sourceMap: true
                }
              },
              'postcss-loader?sourceMap',
              'sass-loader?sourceMap'
            ]
          })
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
        }
      ]
    },
    devtool: env.prod ? 'source-map' : 'eval',
    devServer: {
      contentBase: 'public',
      hot: true,
      filename: 'main.js',
      overlay: true,
      stats: { colors: true },
      port: 3000,
      proxy: {
        '/': {
          target: 'http://moment.local/',
          secure: false,
          changeOrigin: true
        }
      },
      historyApiFallback: true
    },
    bail: env.prod, // Fail out on the first error if production
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.common.js'
      }
    },
    plugins: removeEmpty([
      extractSass,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.CommonsChunkPlugin({
        // Let's create js for our vendor scripts
        name: 'vendor',
        // (with more entries, this ensures that no other module
        //  goes into the vendor chunk)
        minChunks: Infinity
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'commons',
        filename: 'commons.js',
        // (Modules must be shared between 2 entries)
        minChunks: 2
      })
      ...
    ])
    }
  }
  </code></pre>
  
  <p>Really struggling here so anything would be great.</p>