title: Webpack config setup causing webpack-dev-server to throw a 404
body: <p>When I am running </p>
  
  <p><code>webpack-dev-server</code></p>
  
  <p>it is not loading some of the resources</p>
  
  <blockquote>
    <p>Failed to load resource: the server responded with a status of 404 (Not Found)</p>
  </blockquote>
  
  <p>Which is a <code>.jpg</code> image that I point out below.</p>
  
  <p>My project will compile and display, it just will not show the images. But I noticed if I navigate to another path in the url instead of base index <code>http://localhost:3000/</code> , it then will throw the following</p>
  
  <blockquote>
    <p>GET <a href="http://localhost:3000/pages/main.js" rel="nofollow noreferrer">http://localhost:3000/pages/main.js</a> net::ERR_ABORTED 404 (Not Found)</p>
  </blockquote>
  
  <p><strong>Project Directory</strong></p>
  
  <pre><code>|-- project
  |-- webpack.config.js
  |-- dist
  |   |-- favicon.ico
  |   |-- index.html
  |   |-- main.js
  |   |-- 398938.jpg &lt;---throwing the failed to load resource
  </code></pre>
  
  <p><strong>webpack.config.js snippet</strong></p>
  
  <pre><code> entry: {
      main: "./src/index.js"
    },
    output: {
      filename: "[name].bundle.js",
      chunkFilename: "[name].bundle.js",
  
    },
    devServer: {
      contentBase: path.join(__dirname, "./dist/"),
      publicPath: "/dist/",
      compress: true,
      port: 3000,
      historyApiFallback: true
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./dist/index.html",
        filename: "index.html",
        favicon: "./dist/favicon.ico"
      })
    ],
  
  </code></pre>