title: Webpack dev-server - how to serve a static file with updated assets?
body: <p>So my problem is that I can have webpack serve a directory listing when I go to <code>http://localhost:8080/webpack-dev-server/</code>. If I modify the dev server path, then it doesn't make any changes to the bundle. </p>
  
  <p>I want a very simple setup. Take everything in app, perform js transforms and then serve it in dist. How does <code>index.html</code> fit it?</p>
  
  <p>I have the following dir structure:</p>
  
  <pre><code>app
    index.js
  dist
    bundle.js
  index.html
  webpack.config.js
  </code></pre>
  
  <p>And inside of webpack.config I have this:</p>
  
  <pre><code>const path = require('path')
  
  module.exports = {
      entry: './app/index.js',
      output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist'),
          publicPath: '.',
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  use: 'babel-loader',
                  exclude: /(node_modules)/,
              }
          ]
      },
      devServer: {
          contentBase: path.join(__dirname, 'dist'),
          compress: true,
      }
  }
  </code></pre>
  
  <p>I interpret this as "start bundle at index.js, after transforming all js files using the babel-loader put that file called <code>bundle.js</code> into the <code>dist/</code>. Then on dev server, serve js content from that dist folder and compress."</p>
  
  <p>The disconnect I have is in understanding how <code>index.html</code> plays into this. 
  I have consulted: <code>https://webpack.js.org/configuration/dev-server/#devserver</code>.</p>
  
  <p>I can change the <code>contentBase</code> path to be <code>.</code> and it will not show the directory listing but then it doesn't update the bundle. </p>
  
  <p><strong>tldr:</strong></p>
  
  <p>How can I enable the dev server to point to <code>index.html</code> but serve updated assets?</p>
  
  <p>Finally, figured it out.</p>
  
  <pre><code>const path = require('path')
  
  module.exports = {
      entry: './app/index.js',
      output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist'),
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  use: 'babel-loader',
                  exclude: /(node_modules)/,
              }
          ]
      },
      devServer: {
          contentBase: 'dist',
      }
  }
  </code></pre>
  
  <p>I'd love the say that I had an epiphany but I just spammed the options until it worked. </p>