Building with webpack, @progress/kendo-* packages aren't bundled into vendor.(hash).js

[andrewpmontgomery]

I'm submitting a...

• Bug report

Current behavior

Webpack bundles @progress/kendo-angular-dateinputs code into main.hash.js
despite being referenced in vendor.ts

Expected behavior

All vendor code should be bundled into vendor.hash.js

Minimal reproduction of the problem with instructions

1. Clone my bug-demo project: https://github.com/andrewpmontgomery/kendo-angular-webpack
2. npm install
3. npm run build
4. A browser window will automatically open at ./dist/report.html, showing the source-maps of the output files vendor.hash.js and main.hash.js
5. The main.hash.js file contains @telerik and @progress JS code, which shouldn't be there.

What is the motivation or use case for changing the behavior?

Vendor code should end up in vendor.hash.js, because that's the standard.
Other modules (@angular, rxjs, zone.js, reflect-metadata, etc.) are bundled correctly.

Environment

Package versions:
@angular/...@4.3.3
@progress/kendo-angular-dateinputs@1.0.5
@progress/kendo-angular-intl@1.2.2
@progress/kendo-angular-l10n@1.0.2
@ngtools/webpack@1.5.5
webpack@3.4.1

Browser:

• n/a (not a browser issue)

System:

• TypeScript version: 2.4.2
• Node version: 8.2.1
• Platform: Windows 7 x64

[tsvetomir]

If I get this right, CommonsChunkPlugin will put modules required in more than one place in a common chunk. Since the @progress/kendo-angular-date-inputs is only required in one place - app.module.ts it ends up in the main.js bundle.

You can use the minChunks function to put all external modules in the vendor.js chunk:

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor', //minChunks: Infinity
  minChunks: function (module) {
    // this assumes your vendor imports exist in the node_modules directory
    return module.context && module.context.indexOf("node_modules") !== -1;
  }
})

With that change, the @progress and @telerik packages end up in vendor.ts: