How to polyfill fetch and promise with webpack 2?

Question

How to polyfill fetch and promise for Webpack 2?

I have a lot of entry points, so Webpack 1-way to add them before each entry point is not desired solution.

Answer 1

Regardless of how many entry points you have, you should have a separate file for your vendor files, such as frameworks (react, angular, whatevs) and any libraries you always need but are rarely going to change. You want those as a separate bundle so you can cache it. That bundle should always be loaded. Anything you include in that bundle will always be available but never repeated in your chunks if you use it with the commonChunksPlugin.

Here's a sample from an app I've done (just showing relevant config options):

module.exports = {
  entry: {
    client: 'client',
    vendor: [
      'react',
      'react-addons-shallow-compare',
      'react-addons-transition-group',
      'react-dom',
      'whatwg-fetch'
    ]
  },
  output: {
    path: `${__dirname}/dist`,
    filename: '[name].js',
    publicPath: '/build/'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    })
  ]
}

Answer 2

Maybe I'm not understanding correctly, but couldn't you just add babel-polyfill before the rest of your entry points in your webpack config?

module.exports = {
   entry: ['babel-polyfill', './app/js', '/app/js/whatever']
};