Split provider using webpack 2

Question

I have code sharing configuration similar to official docs and everything works fine - all my node modules are in the vendor block (including babel polyfill). But now I need to move the babel-polyfill, and it all depends on separating the piece ("polyfills") in order to load it to my vendor package. Any ideas how to do this?

My configuration:

... 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' }) ... 

Answer 1

Get Dependencies

You can read 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 (you need to return the array using dependencies ):

 const dependencies = getDependencies(); // ['module', ...] 

Polynomial Detection

Check for 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 false returned

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

Create a block of polylines

To select only babel-polyfill and dependencies just check if true returned

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