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

我正在使用多个入口点的webpackconfiguration:

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

有什么办法可以在我的webackconfiguration中包含babel polyfill。 或者在我的设置中包含它的最好方法是什么?

我需要在所有模块中包含它吗?

提前非常感谢!

最简单的方法是改变

 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加载并作为每个入口点的一部分执行,而无需您的文件需要了解它。

这假定mainservices都加载在同一页面上。 我是他们两个单独的页面,你会想在两个数组中的babel-polyfill条目。

注意

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

发展的另一种select(可能不是最好的生产设置)将是在自己的模块中有babel-polyfill

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

背景:我在上面的答案中尝试了这个build议,但仍然出现错误:“只允许使用一个babel-polyfill实例”。 我正在使用webpack 2,所以也许这是一个因素。 上面的解决scheme对我来说是很好的,因为我正在编写一个可重用的库,将其包含在更大的应用程序中,并且只需要在库回购库中有一个单独的演示包用于testing目的。 但是对于一个完整的应用程序来说,要求额外的HTTP请求来加载生产中的polyfill可能不是一个好主意。