title: How can I polyfill Promise with webpack?
body: <p>I'm using webpack to bundle up my JavaScript. I'm depending on modules like <a href="https://www.npmjs.com/package/popsicle" rel="noreferrer">popsicle</a> which use <a href="https://www.npmjs.com/package/any-promise" rel="noreferrer">any-promise</a>.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>var popsicle = require('popsicle');
  popsicle.get('/').then(function() {
    console.log('loaded URL');
  });
  </code></pre>
  
  <p>This works fine in browsers where <code>Promise</code> is available, but <a href="http://caniuse.com/#feat=promises" rel="noreferrer">IE 11 does not provide Promise</a>. So I want to use <a href="https://www.npmjs.com/package/es6-promise" rel="noreferrer">es6-promise</a> as a polyfill.</p>
  
  <p>I tried adding an explicit <code>ProvidePlugin</code> to my <code>webpack.config.js</code>:</p>
  
  <pre><code>plugins: [
    new webpack.ProvidePlugin({
      'Promise': 'exports?global.Promise!es6-promise'
    })
  ]
  </code></pre>
  
  <p>But I still get the error in IE 11: <code>any-promise browser requires a polyfill or explicit registration e.g: require('any-promise/register/bluebird')</code>.</p>
  
  <p>I tried explicitly attaching a global:</p>
  
  <pre><code>global.Promise = global.Promise || require('es6-promise');
  </code></pre>
  
  <p>But IE 11 gives a different error: <code>Object doesn't support this action</code>.</p>
  
  <p>I also tried explicitly registering es6-promise:</p>
  
  <pre><code>require('any-promise/register/es6-promise');
  var popsicle = require('popsicle');
  </code></pre>
  
  <p>This works, but I have to do it in every single file that loads <code>popsicle</code>. I want to just attach <code>Promise</code> to <code>window</code>.</p>
  
  <p><strong>How can I ensure <code>window.Promise</code> is always defined, using webpack?</strong></p>
  
  <p><a href="https://github.com/Wilfred/webpack_promise_demo" rel="noreferrer">Full repo demo here</a>.</p>