title: webpack-dev-server not updating bundle when saving file
body: <p>I'm teaching myself webpack from scratch and I am trying to use the <code>webpack-dev-server</code> to live update the browser when I change a .js in my app file and show the changes. Say I have the following <code>package.json</code></p>
  
  <pre><code>{
    "name": "webpack-babel",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "serve": "webpack-dev-server --hot",
      "start": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "babel-core": "^6.23.1",
      "babel-loader": "^6.3.2",
      "babel-preset-es2015": "^6.22.0",
      "webpack": "^2.2.1",
      "webpack-dev-server": "^2.4.1"
    }
  }
  </code></pre>
  
  <p>and this is my webpack.config.json</p>
  
  <pre><code>const path = require('path');
  
      const config = {
          entry: './app/index.js',
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'bundle.js'
          },
          module: {
              rules: [
                  {
                      test: /\.js$/,
                      exclude: /node_modules/,
                      loader: 'babel-loader',
                      query: {
                          presets: ['es2015']
                      }
                  }
              ],
          }
      };
  
      module.exports = config;
  </code></pre>
  
  <p>I have the following code in my ./app/index.js (nothing crazy here): </p>
  
  <pre><code>let message = 'I love socks and snacks !';
  console.log(message);
  </code></pre>
  
  <p>When I run <code>npm run serve</code> change the message in my <code>app/index.js</code> to <code>'I love cola and snacks !!!'</code> and save the terminal does compile but nothing is updated in the browser. The bundle file still contains the old message and isn't being generated. What am I doing wrong? I only started trying this a few hours ago so I am a bit of a newbi with webpack.</p>
  
  <p>I have turned off "safe write' in my IDE and my file structure is like so: </p>
  
  <p><a href="https://i.stack.imgur.com/Kigj7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Kigj7.png" alt="enter image description here"></a></p>
  
  <p>this is my index.html...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script src="dist/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>* UPDATE *</strong> adding publicPath: <code>'dist/</code>' to the <code>output</code> object seems to work... but I am unsure if this is the correct solution to my problem.</p>