title: Webpack multi ES version builds
body: <p>Hello you smart people of the Stackoverflow. I have a challenge on a webpack build I am trying to set up.</p>
  
  <h2>What I am trying to acheive</h2>
  
  <p>I am trying to create a build that generates two version of my JS files. One that uses ES 6/7+ which will be used by the latest browsers and one that is transpiled back to ES 5.</p>
  
  <p>The reason is that I want to minimize code sent to the "decent" browsers and to leverage any performance optimizations that can be drawn from using pure ES 6/7, not to mention adding less polyfills to the code.</p>
  
  <h2>The problem</h2>
  
  <p>Currently I have achieved my goal by running two parallel builds; one that transpiles the code with only few Babel transforms for a ES 6/7+ version and a second that uses the es2015 preset to transpile back to ES 5 and this generally works as intended. However my problem is that the full build that transpiles both versions is SUUUUUPER slow. We are talking 5+ min slow which is far from ideal.</p>
  
  <p>One of the problem I see right away with this setup is that there is a lot of code that is being reparsed that might not need reparsing, such as CSS (stylus), images, SVGs, fonts etc. All of these assets really only need to be treated once, as it will be exactly the same for each version of the JS files. So in reality I only need to transform the JS part of the code, which is why I created the <a href="https://www.npmjs.com/package/rebabel-webpack-plugin" rel="nofollow noreferrer">rebabel-webpack-plugin</a> module, which really just takes the emitted files, transpiles them again and save the code under another name. This works fine, but it feels hacky and it kinda circumvents the original webpack build flow with some possible drawbacks as a consequence:</p>
  
  <ol>
  <li>I don't really think that SourceMaps will be working properly, as it is not transpiling the original code.</li>
  <li>Adding polyfills with a <a href="https://github.com/babel/babel-preset-env" rel="nofollow noreferrer">babel-preset-env</a> <a href="https://www.npmjs.com/package/babel-polyfill" rel="nofollow noreferrer">babel-polyfill</a> combo could be challenging and/or hacky</li>
  <li>Bundle analyzers could be messed up</li>
  <li>Unable to do a shared code file for regenerated files</li>
  </ol>
  
  <p>I have not verified these drawbacks, but they are what I can see of immediate possible issues.</p>
  
  <p>I have tried running a subsequent build on the emitted files, which works, but generally it is kinda the same as using the <a href="https://www.npmjs.com/package/rebabel-webpack-plugin" rel="nofollow noreferrer">rebabel-webpack-plugin</a>, but with a more awkward setup (collecting list of emitted files -> setting up new config -> run new build).</p>
  
  <h2>The actual question</h2>
  
  <p>So my question for you bright minds out there boils down to: How do one achieve a proper "re-targeting" of our JS files using webpack, without having to run two parallel builds?</p>