title: Webpack and webpack dev server not serving static files
body: <p>In the past I've been able to serve static files during development, but now I can't seem to do it anymore, given the latest verions of webpack and webpack-dev-server of <code>4.6.0</code> and <code>3.1.3</code>.</p>
  
  <p>If I check my chrome inspector (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>) -> <code>Sources</code> tab and look under the <code>Network</code> tab and <code>localhost:8080</code>, I can only see two entries:</p>
  
  <ul>
  <li>(index)</li>
  <li>bundle.js</li>
  </ul>
  
  <p>I should see my image files there that I'm trying to serve, but I don't. Its really frustrating when I see something like this in my console:</p>
  
  <p><code>Content not from webpack is served from C:\Users\PC-user\WebstormProjects\untitled/assets/</code></p>
  
  <p>But in reality, nothing is actually served. It feels rather betraying.</p>
  
  <p>Anyway, these are my files:</p>
  
  <p><strong>folder structure</strong></p>
  
  <ul>
  <li>assets</li>
  <li>node_modules</li>
  <li>src</li>
  <li>package.json</li>
  <li>package-lock.json</li>
  <li>webpack.config.js</li>
  </ul>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const webpack = require('webpack');
  
  module.exports = {
    entry: {
      app: './src/index.js'
    },
    devServer: {
      // contentBase: './dist',
      contentBase: __dirname + "/assets/",
      hot: true,
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      }),
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
      path: __dirname + "/assets/",
      filename: 'bundle.js',
      chunkFilename: '[name].js'
    },
  };
  </code></pre>