什么是最好的方式包括使用多个入口点巴别塔填充材料

我使用了一个使用多个入口点的 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 配置中。或者在我的设置中包含它的最佳方式是什么？

我必须包括它作为一个要求，在我的所有模块？

非常感谢你提前！

63068 次浏览

小开

最佳答案

最简单的方法就是改变

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']

这样填充就可以作为每个入口点的一部分加载和执行，而不需要你的文件去了解它。

这假设 main和 services都装载在同一个页面上。如果它们是两个独立的页面，那么在两个数组中都需要 babel-polyfill条目。

注意

以上适用于巴别塔5。对于巴别塔6，你会使用 npm install --save babel-polyfill和 babel-polyfill而不是 babel/polyfill。

小开

另一种开发方式(也许不是最好的生产设置)是在自己的模块中使用 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 请求来加载填充函数可能不是一个好主意。