More info and comments

This commit is contained in:
Tobias Koppers 2012-03-11 13:44:38 +01:00
parent 2e1460036c
commit a3d4bb4693
4 changed files with 49 additions and 34 deletions

View File

@ -5,14 +5,15 @@
As developer you want to reuse existing code.
As with node.js and web all file are already in the same language, but it is extra work to use your code with the node.js module system and the browser.
The goal of `webpack` is to bundle CommonJs modules into javascript files which can be loaded by `<script>`-tags.
Concating all required file has a disadvantage: many code to download (and execute) on page load.
Therefor `webpack` uses the `require.ensure` function to split your code automatically into multiple bundles which are loaded on demand.
Simply concating all required files has a disadvantage: many code to download (and execute) on page load.
Therefore `webpack` uses the `require.ensure` function ([CommonJs/Modules/Async/A](http://wiki.commonjs.org/wiki/Modules/Async/A)) to split your code automatically into multiple bundles which are loaded on demand.
This happens mostly transparent to the developer with a single function call. Dependencies are resolved for you.
The result is a smaller inital code download which results in faster page load.
**TL;DR**
* bundle CommonJs modules
* bundle CommonJs modules for browser
* reuse server-side code (node.js) on client-side
* create multiple files which are loaded on demand
* dependencies managed for you
* faster page load in big webapps
@ -51,6 +52,31 @@ are compiled to
})
```
## Code Splitting
### Example
``` javascript
var a = require("a");
var b = require("b");
require.ensure(["c"], function(require) {
require("b").xyz();
var d = require("d");
});
```
```
File 1: web.js
- code of module a and dependencies
- code of module b and dependencies
File 2: 1.web.js
- code of module c and dependencies (but code is not used)
- code of module d and dependencies
```
See [details](modules-webpack/tree/master/example) for exact output.
## Browser replacements
Somethings it happens that browsers require other code than node.js do.
@ -87,31 +113,6 @@ web_modules
...
```
## Code Splitting
### Example
``` javascript
var a = require("a");
var b = require("b");
require.ensure(["c"], function(require) {
require("b").xyz();
var d = require("d");
});
```
```
File 1: web.js
- code of module a and dependencies
- code of module b and dependencies
File 2: 1.web.js
- code of module c and dependencies (but code is not used)
- code of module d and dependencies
```
See [details](modules-webpack/tree/master/example) for exact output.
## Usage
### Shell
@ -136,8 +137,10 @@ Options:
### Programmatically Usage
`webpack(context, moduleName, [options], callback)`
`webpack(absoluteModulePath, [options], callback)`
``` javascript
webpack(context, moduleName, [options], callback)
webpack(absoluteModulePath, [options], callback)
```
#### `options`

View File

@ -2,7 +2,7 @@
"name": "webpack",
"version": "0.1.0",
"author": "Tobias Koppers @sokra",
"description": "Bundle CommonJS modules into single script or multiple scripts for web browser",
"description": "Packs CommonJs Modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.",
"dependencies": {
"esprima": "0.9.8",
"optimist": "0.2.x",
@ -16,5 +16,8 @@
},
"main": "lib/webpack.js",
"bin": "./bin/webpack.js",
"scripts": {
"test": "node node_modules/vows/bin/vows"
},
"licence": "MIT"
}

View File

@ -1,10 +1,19 @@
// Polyfill for node.js
// adds require.ensure
// call it like this: require("webpack/require-polyfill")(require);
// adds require.ensure
// call it like this: require("webpack/require-polyfill")(require);
// This is only required when you want to use require.ensure in server-side code
// which should be so only in rar cases.
module.exports = function(req) {
if(!req.ensure) {
req.ensure = function(array, callback) {
callback(req);
};
}
if(!req.context) {
req.context = function(contextName) {
return function(name) {
return req(contextName + "/" + name);
}
}
}
}

View File

@ -1,2 +1,2 @@
// No poly fille needed when compiled with webpack
// No polyfill needed when compiled with webpack
module.exports = function(){}