webpack/examples/multiple-entry-points/template.md

This example shows how to use multiple entry points with a commons chunk.

In this example you have two (HTML) pages pageA and pageB. You want to create individual bundles for each page. In addition to this you want to create a shared bundle that contains all modules used in both pages (assuming there are many/big modules in common). The pages also use Code Splitting to load a less used part of the features on demand.

You can see how to define multiple entry points via the entry option and the required changes ([name]) in the output option. You can also see how to use the CommonsChunkPlugin.

You can see the output files:

• commons.js contains:
  • the module system
  • chunk loading logic
  • module common.js which is used in both pages
• pageA.bundle.js contains: (pageB.bundle.js is similar)
  • the entry point pageA.js
  • it would contain any other module that is only used by pageA
• 0.chunk.js is an additional chunk which is used by both pages. It contains:
  • module shared.js

You can also see the info that is printed to console. It shows among others:

• the generated files
• the chunks with file, name and id
  • see lines starting with chunk
• the modules that are in the chunks
• the reasons why the modules are included
• the reasons why a chunk is created
  • see lines starting with >

pageA.js

{{pageA.js}}

pageB.js

{{pageB.js}}

webpack.config.js

{{webpack.config.js}}

pageA.html

{{pageA.html}}

dist/commons.js

{{dist/commons.js}}

dist/pageA.bundle.js

{{dist/pageA.bundle.js}}

dist/pageB.bundle.js

{{dist/pageB.bundle.js}}

dist/0.chunk.js

{{dist/0.chunk.js}}

Info

Unoptimized

{{stdout}}

Production mode

{{production:stdout}}