Including only required Babel polyfills with Webpack

If you are using something like Object.assign or Promises in your ES6/TypeScript code, you will sooner or later come across the fact that IE11 does not support them natively. In such cases, the natural way forward is to include a polyfill to get them working.

Babel has a polyfill library based on core js which has polyfills for a lot of such ES6/ES2015 features.

But you don't want to include the entire polyfill library in your application if you are only using a couple of polyfills.

Here is a handy way to include just the polyfills you need using webpack:

1) Add babel-polyfill to your dev dependencies:

npm install babel-polyfill -D

view raw babel-polyfill hosted with ❤ by GitHub

2) And then include the required polyfills in your webpack config:

	module.exports = {
	entry: ["core-js/fn/object/assign",
	"core-js/fn/promise",
	"./Scripts/src/app.tsx"]
	//other webpack stuff
	}

view raw webpack.config.js hosted with ❤ by GitHub

This will make sure that only the polyfills you need are included in your webpack bundle.

More info here:
https://github.com/zloirock/core-js#commonjs
https://babeljs.io/docs/usage/polyfill/

Hope you find this useful!