title: When using Webpack, which folder do I have my server statically serve?
body: <p>Assuming I want to (my boss is making me) use webpack, and I have a file structure like: </p>
  
  <p><a href="https://i.stack.imgur.com/ufOR0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ufOR0.png" alt="Folder structure, builds folder has bundle.js, src folder has index.html, index.js, and style.css"></a></p>
  
  <p>Wherein <code>builds</code> is where webpack outputs the result of bundling/compiling the <code>src</code> folder, how do I then have <code>index.html</code> point to <code>bundle.js</code> if it is present on a server, i.e. which folder do I expose via <code>express.static()</code>? What is the correct "webpack" way to do this with i.e. a simple <code>webpack.config</code> like below? Am I missing something fundamental about how this works? Ideally I'd like to do something like the following in my <code>index.html</code></p>
  
  <pre><code>&lt;html&gt;
  &lt;script src='bundle.js'&gt;&lt;/script&gt; 
  &lt;!-- bundle.js spits a bunch of CSS into the html, dynamically builds elements, etc --&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Or is that not how things are done in webpack? </p>
  
  <p><code>webpack.config.js</code></p>
  
  <pre><code>module.exports = {
      entry:  './src/index.js',
      output: {
          path:     'builds',
          filename: 'bundle.js',
      },
      module: {
          loaders: [
              { test: /\.css$/, 
                loader: "style!css" 
              }
          ]
      }
  };
  </code></pre>
  
  <p>I have tried to figure this out via <a href="http://webpack.github.io/docs/usage.html" rel="nofollow noreferrer">the docs</a> and <a href="https://blog.madewithlove.be/post/webpack-your-bags/" rel="nofollow noreferrer">this oft-linked article</a>. </p>