title: Webpack dev server cache clearing
body: <p>I can't get webpack dev server to work properly. I think the issue is the compiled code it makes in memory is not clearing. I can't work out where I'm going wrong. </p>
  
  <p>My config file is: </p>
  
  <pre><code>var path = require('path');
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
      entry: ['babel-polyfill', './src/js/index.js'],
      output: {
          path: path.join(__dirname, 'dist'),
          publicPath: "/",
          filename: 'js/index.js'
      },
      devServer: {
          contentBase: '/dist'
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  use: ['babel-loader']
              },
              {
                  test: /\.scss$/,
                  use:  [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
              }
          ]
      },
      plugins: [
          new MiniCssExtractPlugin({
              filename: 'css/styles.css',
            }),
          new HtmlWebpackPlugin({
              inject: false,
              hash: true,
              template: './src/index.html',
              filename: 'index.html'
            })
      ]
  
  }
  </code></pre>
  
  <p>And my scripts: </p>
  
  <pre><code>"scripts": {
      "dev": "webpack --mode development",
      "build": "webpack --mode production",
      "start": "webpack-dev-server --mode development --open"
    },
  </code></pre>
  
  <p>What I want is for webpack dev server to allow me to live reload as I work, then use build to actually compile my code. 
  The problem is, as soon as I use dev or build, and my dist file is made, webpack dev server stops working - even if I delete the dist file. I simply don't know how to get it to work. Would really appreciate any help.</p>
  
  <p>Thanks, R</p>