This example illustrates a very simple case of Code Splitting with require.ensure.

a and b are required normally via CommonJS
c is depended through the require.ensure array.
- This means: make it available, but don't execute it
- webpack will load it on demand
b and d are required via CommonJs in the require.ensure callback
- webpack detects that these are in the on-demand-callback and
- will load them on demand
- webpacks optimizer can optimize b away
  - as it is already available through the parent chunks

You can see that webpack outputs two files/chunks:

output.js is the entry chunk and contains
- the module system
- chunk loading logic
- the entry point example.js
- module a
- module b
1.output.js is an additional chunk (on demand loaded) and contains
- module c
- module d

You can see that chunks are loaded via JSONP. The additional chunks are pretty small and minimize well.

example.js

{{example.js}}

dist/output.js

{{dist/output.js}}

{{dist/3.output.js}}

Minimized

{{production:dist/3.output.js}}

{{stdout}}

{{production:stdout}}