I have code splitting config similar to official docs and 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?
My config:
...
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' })
...
You can read the package.json
from 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', ...]
Check if module is babel-polyfill
or dependency:
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 );
}
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;
}
})
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;
}
})