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.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 ``` javascript {{example.js}} ``` # dist/output.js ``` javascript {{dist/output.js}} ``` # dist/0.output.js ``` javascript {{dist/0.output.js}} ``` Minimized ``` javascript {{production:dist/0.output.js}} ``` # Info ## Unoptimized ``` {{stdout}} ``` ## Production mode ``` {{production:stdout}} ```