Wat is de beste manier om babel polyfill op te nemen met behulp van meerdere toegangspunten

Ik gebruik een webpack-configuratie met meerdere toegangspunten:

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 er een manier om de babel polyfillop te nemen in mijn webpack-configuratie. Of wat is de beste manier om het in mijn setup op te nemen?

Moet ik het als een vereiste in al mijn modules opnemen?

Bij voorbaat hartelijk dank!

Antwoord 1, autoriteit 100%

De gemakkelijkste manier zou zijn om te veranderen

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

worden

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

zodat de polyfill wordt geladen en uitgevoerd als onderdeel van elk invoerpunt zonder dat uw bestanden hiervan op de hoogte hoeven te zijn.

Dit veronderstelt dat zowel mainals servicesop dezelfde pagina zijn geladen. Als het twee afzonderlijke pagina’s zijn, wilt u het item babel-polyfillin beide arrays.

Opmerking

Het bovenstaande is van toepassing op Babel 5. Voor Babel 6 zou u npm install --save babel-polyfillinstalleren en babel-polyfillgebruiken in plaats van babel/polyfill.

Antwoord 2, autoriteit 10%

Een alternatief voor ontwikkeling (misschien niet de beste setup voor productie) zou zijn om babel-polyfillin zijn eigen module te hebben:

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

Achtergrond: ik heb de suggestie in het bovenstaande antwoord geprobeerd en kreeg nog steeds een foutmelding: “Slechts één instantie van babel-polyfill is toegestaan”. Ik gebruik webpack 2 dus misschien is dat een factor. De bovenstaande oplossing is prima voor mijn doeleinden, omdat ik een herbruikbare bibliotheek schrijf die in grotere apps moet worden opgenomen, en ik wil gewoon een aparte demobundel in de bibliotheekrepo voor testdoeleinden. Maar voor een volledige app is het misschien geen goed idee om een ​​extra HTTP-verzoek te vereisen om de polyfill in productie te laden, tenzij je HTTP/2 gebruikt.