使用多个入口点包含babel polyfill的最佳方法是什么

Question

我使用多个入口点的webpack配置:

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
                }));
            });
        }
    ]
};

有没有办法在我的webpack配置中包含babel polyfill.或者在我的设置中包含它的最佳方法是什么？

我是否必须将其作为所有模块中的要求包含在内？

非常感谢你提前!

Answer 1

最简单的方法就是改变

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

成为

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

这样polyfill就会被加载并作为每个入口点的一部分执行,而你的文件不需要知道它.

这假设两个main和services都加载在同一页面上.如果它们是两个单独的页面,则您需要babel-polyfill两个数组中的条目.

注意

以上适用于Babel 5.对于Babel 6,你npm install --save babel-polyfill使用babel-polyfill而不是使用babel/polyfill.

Answer 2

开发的替代方案(可能不是生产的最佳设置)将babel-polyfill在其自己的模块中:

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

背景:我在上面的答案中尝试了这个建议并且仍然出现错误:"只允许一个babel-polyfill实例".我正在使用webpack 2,所以这可能是一个因素.上面的解决方案很适合我的目的,因为我正在编写一个可重用的库,以包含在更大的应用程序中,并且只是想在库仓库中使用单独的演示包进行测试.但对于完整的应用程序,除非您使用HTTP/2,否则在生产中需要额外的HTTP请求来加载polyfill可能不是一个好主意.