What is the best way to include babel polyfill using multiple entry points

I'm using a webpack config using multiple entry points:

var fs = require('fs');
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.[hash].js');

module.exports = {
    cache: true,
    entry: {
        main: './resources/assets/js/main.js',
        services: './resources/assets/js/services.js'
    },
    output: {
        path: './public/assets/web/js',
        filename: '[name].[hash].js',
        publicPath: '/assets/web/js/',
        chunkFilename: '[id].[chunkhash].js'
    },
    resolve: {
        modulesDirectories: ['node_modules', 'web_modules', 'modules']
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: [/node_modules/, /web_modules/],
            loader: 'babel-loader',
            query: {
                stage: 0
            }
        }]
    },
    plugins: [commonsPlugin,
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery'
        }),
        function() {
            this.plugin('done', function(stats) {
                fs.writeFile('./cache.json', JSON.stringify({
                    hash: stats.hash
                }));
            });
        }
    ]
};

Is there any way to include the babel polyfill in my webpack config. Or what is the best way to include it in my setup?

Do I have to include it as a require in all my modules?

Thank you very much in advance!

Solution 1:

The easiest way would be to change

main: './resources/assets/js/main.js',
services: './resources/assets/js/services.js'

to be

main: ['babel-polyfill', './resources/assets/js/main.js'],
services: ['./resources/assets/js/services.js']

so that the polyfill is loaded and executed as part of each entry point without your files needing to know about it.

This assumes that both main and services are loaded on the same page. If they are two separate pages, you'd want the babel-polyfill entry in both arrays.

Note

The above applies to Babel 5. For Babel 6, you'd npm install --save babel-polyfill and use babel-polyfill instead of babel/polyfill.

Solution 2:

An alternative for development (perhaps not the best setup for production) would be to have babel-polyfill in its own module:

entry: {
    'babel-polyfill': ['babel-polyfill'],
    main: './resources/assets/js/main.js',
    services: './resources/assets/js/services.js'
}

Background: I tried the suggestion in the answer above and was still getting an error: "Only one instance of babel-polyfill is allowed". I'm using webpack 2 so maybe that's a factor. The above solution is fine for my purposes since I'm writing a reusable library to be included in larger apps, and just want a separate demo bundle in the library repo for testing purposes. But for a full app, it might not be a good idea to require an extra HTTP request to load the polyfill in production unless you're using HTTP/2.