examples/common-chunk-and-vendor-chunk/template.md
This example shows how to create an explicit vendor chunk as well as a common chunk for code shared among entry points. In this example, we have 3 entry points: pageA, pageB, and pageC. Those entry points share some of the same utility modules, but not others. This configuration will pull out any modules common to at least 2 bundles and place it in the common bundle instead, all while keeping the specified vendor libraries in their own bundle by themselves.
To better understand, here are the entry points and which utility modules they depend on:
pageA
utility1utility2pageB
utility2utility3pageC
utility2utility3Given this configuration, webpack will produce the following bundles:
vendor
vendor1vendor2common
utility2utility3pageA
pageAutility1pageB
pageBpageC
pageCWith this bundle configuration, you would load your third party libraries, then your common application code, then your page-specific application code.
_{{webpack.config.js}}_
_{{dist/vendor.js}}_
_{{dist/commons-utility2_js.js}}_
_{{dist/commons-utility3_js.js}}_
_{{dist/pageA.js}}_
_{{dist/pageB.js}}_
_{{dist/pageC.js}}_
_{{stdout}}_
_{{production:stdout}}_