title: How to copy a directory with Webpack?
body: <p>I've been playing around with Webpack to try and understand how it works but no matter what I do it never seems to do what I expect it to considering what the documentation and numerous videos seem to say.</p>
  
  <p>As a first step to accomplishing my end goal, I simply want to copy all the files in the <code>./src</code> directory to the <code>./dist</code> directory, maintaining the full folder structure. After a bit of digging it seems what I need is something like this in the rules for my <code>webpack.config.js</code> (I currently only have html, css and js files in the source directory for testing purposes):</p>
  
  <pre><code>test: /\.(html|js|css)$/,
  use: [
      {
          loader: 'file-loader',
          options: {
              name: '[path][name].[ext]'
          }
      }
  ]
  </code></pre>
  
  <p>Now in my <code>entry.js</code> file which is in the root directory I have this:</p>
  
  <pre><code>function requireAll (r) { r.keys().forEach(r); }
  requireAll(require.context('./src/', true, /\.(html|js|css)$/));
  </code></pre>
  
  <p>...because from my understanding I need to import all the files I want to process into my entry file so they can then be placed into the new directory using <code>file-loader</code>.</p>
  
  <p>With this setup, running webpack creates a dist folder like this:</p>
  
  <pre><code>dist/
      chunk.js     &lt;-- (the output filename set in my webpack config)
      entry.js     &lt;-- (an exact duplicate of the entry file)
  </code></pre>
  
  <p>This is obviously not what I want. I don't know whether I just need to tweak my setup or if I'm doing this completely wrong.</p>