korywka
korywka

Reputation: 7653

How to polyfill fetch and promise with webpack 2?

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.

Upvotes: 18

Views: 7288

Answers (2)

shadymoses
shadymoses

Reputation: 3463

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']
    })
  ]
}

Upvotes: 12

Taylor Jones
Taylor Jones

Reputation: 400

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']
};

Upvotes: 3

Related Questions