webpack
Version:
Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jade, coffee, css, less, ... and your custom stuff.
65 lines (46 loc) • 1.35 kB
Markdown
This example illustrate a very simple case of Code Splitting with `require.ensure`.
* `a` and `b` are required normally via CommonsJs
* `c` is depdended 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 chunks 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
``` javascript
{{example.js}}
```
# js/output.js
``` javascript
{{js/output.js}}
```
# js/1.output.js
``` javascript
{{js/1.output.js}}
```
Minimized
``` javascript
{{min:js/1.output.js}}
```
# Info
## Uncompressed
```
{{stdout}}
```
## Minimized (uglify-js, no zip)
```
{{min:stdout}}
```