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

Question

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!

Answer 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.