More info and comments
This commit is contained in:
parent
2e1460036c
commit
a3d4bb4693
63
README.md
63
README.md
|
@ -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`
|
||||
|
||||
|
|
|
@ -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"
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,2 +1,2 @@
|
|||
// No poly fille needed when compiled with webpack
|
||||
// No polyfill needed when compiled with webpack
|
||||
module.exports = function(){}
|
Loading…
Reference in New Issue