我有两个Webpack入口点:索引和小部件。
索引入口点为我们的主页生成必要的入口。小部件入口点生成一个没有页脚和页眉的精简版本,因此它可以通过一个iFrame集成。但是除了html集成,我还想提供一个window.myLibrary.render函数。为了集成这个,我需要一个固定的js包。
因此,index
项应该如下所示:index
x 1月2日x 1月3日x
条目widget
应在widget.bundle.js
中集成通用块和供应商块,或从widget.bundle.js加载通用块和供应商块
这是否可行?
我当前的配置如下所示,但它只是将common和vendor捆绑到入口点捆绑包中。
optimization: {
splitChunks: {
chunks: 'all',
minChunks: 2,
minSize: 20000,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
default: false,
common: false,
// We want all vendor (node_modules) to go into a chunk.
vendors: {
test(module, chunks) {
// The (production) vendors bundle only includes modules that are
// referenced from the main chunk.
// Modules under node_modules that are referenced from the test bundle should not
// be included (they are bundled into the test bundle).
const isInChunk = chunkName =>
chunks.some(chunk => chunk.name === chunkName);
console.log(chunks.map(chunk => chunk.name));
return (
/[\\/]node_modules[\\/]/.test(module.resource) &&
!isInChunk('widget')
);
},
name: 'vendors',
// 'all' is confusing - it basically means test all modules regardless if they
// are statically (via require(x)/import 'x'; ie 'initial' option)
// or dynamically (via import('x'); ie 'async' option)
// loaded.
chunks: 'all',
reuseExistingChunk: true
}
}
}
}
1条答案
按热度按时间qoefvg9y1#
我在Auto-load a chunk in entry point中找到了答案。
您必须在小部件入口点上定义
chunks: ['widget']
,然后定义优化配置,如下所示: