问题描述
我有类似官方 docs
,一切运行完美-我的所有节点模块都位于供应商块中(包括 babel-polyfill)。但是现在,我需要移动babel-polyfill及其所有依赖项来分离块( polyfills),以便能够在我的供应商捆绑包之前加载它。任何想法如何做到?
I have code splitting config similar to official docsand everything works perfect - all my node modules are in "vendor" chunk (including "babel-polyfill"). But now I need to move babel-polyfill and all it's dependecies to separate chunk ("polyfills") to be able to load it before my vendor bundle. Any ideas how to do that?
我的配置:
...
entry: {
main: './index.jsx'
},
...
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' })
...
推荐答案
获取依赖项
您可以阅读来自
babel-polyfill
const path = require('path');
function getDependencies () {
// Read dependencies...
const { dependencies } = require('node_modules/babel-polyfill/package.json');
// Extract module name
return Object.keys(dependencies);
}
只需调用它(应该返回带有的数组依赖项
):
Just call it (should return an array with the dependencies
):
const dependencies = getDependencies(); // ['module', ...]
检测polyfills
检查模块是否为 babel-polyfill
或依赖项:
function isPolyfill(module){
// Get module name from path
const name = path.posix.basename(module.context)
// If module has a path
return name &&
// If is main module or dependency
( name === "babel-polyfill" || dependencies.indexOf(name) !== -1 );
}
要删除 babel-polyfill
和依赖项只是检查是否返回 false
To remove babel-polyfill
and dependencies just check if returns false
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// If has path
return module.context &&
//If is a node-module
module.context.indexOf('node_modules')!== -1 &&
// Remove babel-polyfill and dependencies
isPolyfill(module) === false;
}
})
创建polyfills块
仅选择 babel-polyfill
和依赖项仅检查是否返回 true
Create polyfills chunk
To select only babel-polyfill
and dependencies just check if returns true
new webpack.optimize.CommonsChunkPlugin({
name: 'polyfills',
minChunks: function (module) {
// If has a path
return module.context &&
//If is a node-module
module.context.indexOf('node_modules')!== -1 &&
// Select only babel-polyfill and dependencies
isPolyfill(module) === true;
}
})
这篇关于拆分“供应商”使用webpack 2的块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!