Skip to content

Commit a3d4bb4

Browse files
sokrasokra
committed
More info and comments
1 parent 2e14600 commit a3d4bb4

File tree

4 files changed

+49
-34
lines changed

4 files changed

+49
-34
lines changed

‎README.md‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@
55
As developer you want to reuse existing code.
66
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.
77
The goal of `webpack` is to bundle CommonJs modules into javascript files which can be loaded by `<script>`-tags.
8-
Concating all required file has a disadvantage: many code to download (and execute) on page load.
9-
Therefor `webpack` uses the `require.ensure` function to split your code automatically into multiple bundles which are loaded on demand.
8+
Simply concating all required files has a disadvantage: many code to download (and execute) on page load.
9+
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.
1010
This happens mostly transparent to the developer with a single function call. Dependencies are resolved for you.
1111
The result is a smaller inital code download which results in faster page load.
1212

1313
**TL;DR**
1414

15-
* bundle CommonJs modules
15+
* bundle CommonJs modules for browser
16+
* reuse server-side code (node.js) on client-side
1617
* create multiple files which are loaded on demand
1718
* dependencies managed for you
1819
* faster page load in big webapps
@@ -51,6 +52,31 @@ are compiled to
5152
})
5253
```
5354

55+
## Code Splitting
56+
57+
### Example
58+
59+
``` javascript
60+
var a = require("a");
61+
var b = require("b");
62+
require.ensure(["c"], function(require) {
63+
require("b").xyz();
64+
var d = require("d");
65+
});
66+
```
67+
68+
```
69+
File 1: web.js
70+
- code of module a and dependencies
71+
- code of module b and dependencies
72+
73+
File 2: 1.web.js
74+
- code of module c and dependencies (but code is not used)
75+
- code of module d and dependencies
76+
```
77+
78+
See [details](modules-webpack/tree/master/example) for exact output.
79+
5480
## Browser replacements
5581

5682
Somethings it happens that browsers require other code than node.js do.
@@ -87,31 +113,6 @@ web_modules
87113
...
88114
```
89115

90-
## Code Splitting
91-
92-
### Example
93-
94-
``` javascript
95-
var a = require("a");
96-
var b = require("b");
97-
require.ensure(["c"], function(require) {
98-
require("b").xyz();
99-
var d = require("d");
100-
});
101-
```
102-
103-
```
104-
File 1: web.js
105-
- code of module a and dependencies
106-
- code of module b and dependencies
107-
108-
File 2: 1.web.js
109-
- code of module c and dependencies (but code is not used)
110-
- code of module d and dependencies
111-
```
112-
113-
See [details](modules-webpack/tree/master/example) for exact output.
114-
115116
## Usage
116117

117118
### Shell
@@ -136,8 +137,10 @@ Options:
136137

137138
### Programmatically Usage
138139

139-
`webpack(context, moduleName, [options], callback)`
140-
`webpack(absoluteModulePath, [options], callback)`
140+
``` javascript
141+
webpack(context, moduleName, [options], callback)
142+
webpack(absoluteModulePath, [options], callback)
143+
```
141144

142145
#### `options`
143146

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "webpack",
33
"version": "0.1.0",
44
"author": "Tobias Koppers @sokra",
5-
"description": "Bundle CommonJS modules into single script or multiple scripts for web browser",
5+
"description": "Packs CommonJs Modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.",
66
"dependencies": {
77
"esprima": "0.9.8",
88
"optimist": "0.2.x",
@@ -16,5 +16,8 @@
1616
},
1717
"main": "lib/webpack.js",
1818
"bin": "./bin/webpack.js",
19+
"scripts": {
20+
"test": "node node_modules/vows/bin/vows"
21+
},
1922
"licence": "MIT"
2023
}

‎require-polyfill.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
// Polyfill for node.js
2-
// adds require.ensure
3-
// call it like this: require("webpack/require-polyfill")(require);
2+
// adds require.ensure
3+
// call it like this: require("webpack/require-polyfill")(require);
4+
// This is only required when you want to use require.ensure in server-side code
5+
// which should be so only in rar cases.
46
module.exports = function(req) {
57
if(!req.ensure) {
68
req.ensure = function(array, callback) {
79
callback(req);
810
};
911
}
12+
if(!req.context) {
13+
req.context = function(contextName) {
14+
return function(name) {
15+
return req(contextName + "/" + name);
16+
}
17+
}
18+
}
1019
}

‎require-polyfill.web.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
// No poly fille needed when compiled with webpack
1+
// No polyfill needed when compiled with webpack
22
module.exports = function(){}

0 commit comments

Comments
 (0)