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

WebpackBabeljs

Webpack Problem Overview


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!

Webpack Solutions


Solution 1 - Webpack

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 - Webpack

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBerto YáñezView Question on Stackoverflow
Solution 1 - WebpackloganfsmythView Answer on Stackoverflow
Solution 2 - WebpackMatt BrowneView Answer on Stackoverflow