title: Using Webpack To Transpile ES6 as separate files
body: <p>Is it possible to configure webpack to do the equivalent of:</p>
  
  <pre><code>babel src --watch --out-dir lib
  </code></pre>
  
  <p>So that a directory structure that looks like this:</p>
  
  <pre><code>- src
    - alpha
      - beta.js
      - charlie
         - delta.js
      - echo.js
      - foxtrot
        - golf
          - hotel.js
  </code></pre>
  
  <p>Would compile all the files to ES5 and output them in an identical structure under a <code>lib</code> directory:</p>
  
  <pre><code>- lib
    - alpha
      - beta.js
      - charlie
         - delta.js
      - echo.js
      - foxtrot
        - golf
          - hotel.js
  </code></pre>
  
  <p>I took a pass at globbing all the filepaths and passing them in as separate entries, but it seems that webpack 'forgets' the locations of the files when it comes to defining the output files. <code>Output.path</code> only offers the <code>[hash]</code> token, while <code>Output.file</code> has more options, but only offers <code>[name]</code>, <code>[hash]</code> and <code>[chunk]</code>, so it appears at least, that this kind of compilation isn't supported.</p>
  
  <p>To give my question some context, I am creating an npm module consisting of React components and their related styles. I am using CSS modules, so I need a way to compile both JavaScript and CSS into the module's lib dir.</p>