Webpack implicit vendor package with polyfill package

Question

I would like to build three packages: main.js , vendor.js and polyfill.js . polyfill.js file must contain the modules defined in the polyfill.js file. The vendor.js file must be dynamically created by retrieving all the dependencies imported from npm ( node_modules ). Finally, main.js should contain other than polyfill and vendor modules, which is essentially my application code.

polyfill.js

 import 'core-js/es7/reflect'; import 'zone.js/dist/zone'; 

main.js

 import { NgModule, ApplicationRef } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { Store } from '@ngrx/store'; @NgModule([ imports: [...] ]) class AppModule { } 

I wrote the following webpack configuration, but always get the following error:

 "CommonsChunkPlugin: While running in normal mode it not allowed to use a non-entry chunk (main)", "CommonsChunkPlugin: While running in normal mode it not allowed to use a non-entry chunk (vendor)" 

webpack.config.prod.js

 { entry: { polyfill: './polyfill.ts', main: './main.ts' }, output: { publicPath: options.assetPath }, devtool: 'source-map', plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module) { const check = module.context && module.context.indexOf('node_modules') !== -1; module.originalChunkNames = module.chunks.map(chunk=> chunk.name); return check; } }), new webpack.optimize.CommonsChunkPlugin({ name: 'polyfill', chunks: ['vendor'], minChunks: ({ originalChunkNames }) => originalChunkNames.includes('polyfill'), }), new webpack.optimize.CommonsChunkPlugin({ names: ['main', 'vendor', 'polyfill'], minChunks: Infinity }) ] } 

Here, what I would like to do is dynamically create a vendor package that includes all the node_modules that I import in my source files. Create the polyfill package by including the entire module explicitly defined in the polyfill.js file. And the final package is main .

I tried many examples from webpack github repo, but none of them helped me achieve something like the above

Answer 1

I created a Github repository to demonstrate a working example.

The following is an important part of configuring a web package to achieve this type of output:

 { entry: { polyfill: 'polyfill.ts', main: 'main.ts' }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", chunks: ["main"], minChunks: function(module) { const check = module.context && module.context.indexOf("node_modules") !== -1; module.originalChunkNames = module.chunks.map(chunk => chunk.name); return check; } }), new webpack.optimize.CommonsChunkPlugin({ name: "polyfill", chunks: ["vendor"], minChunks: function({ originalChunkNames }) { return originalChunkNames.includes("polyfill"); } }), ] }