webpack/examples/code-splitted-require.context/README.md

226 lines
6.2 KiB
Markdown
Raw Normal View History

2012-03-10 20:11:23 +08:00
# example.js
``` javascript
2012-03-12 04:37:18 +08:00
function getTemplate(templateName, callback) {
require.ensure([], function(require) {
2012-08-23 08:05:07 +08:00
callback(require("../require.context/templates/"+templateName)());
2012-03-12 04:37:18 +08:00
});
}
getTemplate("a", function(a) {
console.log(a);
});
getTemplate("b", function(b) {
console.log(b);
2012-03-10 20:11:23 +08:00
});
```
# js/output.js
``` javascript
/******/(function(document, undefined) {
/******/ return function(modules) {
/******/ var installedModules = {}, installedChunks = {0:1};
/******/ function require(moduleId) {
2012-03-20 03:47:58 +08:00
/******/ if(typeof moduleId !== "number") throw new Error("Cannot find module '"+moduleId+"'");
2012-03-10 20:11:23 +08:00
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ var module = installedModules[moduleId] = {
2012-08-23 08:05:07 +08:00
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
2012-03-10 20:11:23 +08:00
/******/ };
/******/ modules[moduleId](module, module.exports, require);
2012-08-23 08:05:07 +08:00
/******/ module.loaded = true;
2012-03-10 20:11:23 +08:00
/******/ return module.exports;
/******/ }
2012-05-22 04:59:31 +08:00
/******/ require.e = function(chunkId, callback) {
2012-03-10 20:11:23 +08:00
/******/ if(installedChunks[chunkId] === 1) return callback(require);
/******/ if(installedChunks[chunkId] !== undefined)
/******/ installedChunks[chunkId].push(callback);
/******/ else {
/******/ installedChunks[chunkId] = [callback];
/******/ var head = document.getElementsByTagName('head')[0];
/******/ var script = document.createElement('script');
/******/ script.type = 'text/javascript';
2012-04-05 20:59:01 +08:00
/******/ script.charset = 'utf-8';
2012-03-10 20:11:23 +08:00
/******/ script.src = modules.c+chunkId+modules.a;
/******/ head.appendChild(script);
/******/ }
/******/ };
2012-05-17 18:47:06 +08:00
/******/ require.modules = modules;
2012-07-11 23:53:46 +08:00
/******/ require.cache = installedModules;
2012-03-10 20:11:23 +08:00
/******/ window[modules.b] = function(chunkId, moreModules) {
/******/ for(var moduleId in moreModules)
/******/ modules[moduleId] = moreModules[moduleId];
/******/ var callbacks = installedChunks[chunkId];
/******/ installedChunks[chunkId] = 1;
/******/ for(var i = 0; i < callbacks.length; i++)
/******/ callbacks[i](require);
/******/ };
/******/ return require(0);
/******/ }
/******/})(document)
/******/({a:".output.js",b:"webpackJsonp",c:"",
/******/0: function(module, exports, require) {
2012-11-07 19:49:01 +08:00
/**! .\example.js !**/
2012-07-11 23:53:46 +08:00
2012-04-05 20:59:01 +08:00
/******/ /* WEBPACK FREE VAR INJECTION */ (function(console) {
2012-03-12 04:37:18 +08:00
function getTemplate(templateName, callback) {
2012-05-22 04:59:31 +08:00
require.e(1, function(require) {
2012-11-07 19:49:01 +08:00
callback(require(/*! ../require.context/templates */2)("./"+templateName)());
2012-03-12 04:37:18 +08:00
});
}
getTemplate("a", function(a) {
2012-04-05 20:59:01 +08:00
console.log(a);
2012-03-12 04:37:18 +08:00
});
getTemplate("b", function(b) {
2012-04-05 20:59:01 +08:00
console.log(b);
2012-03-10 20:11:23 +08:00
});
2012-11-07 19:49:01 +08:00
/******/ /* WEBPACK FREE VAR INJECTION */ }(require(/*! __webpack_console */1)))
2012-03-10 20:11:23 +08:00
2012-03-20 03:47:58 +08:00
/******/},
/******/
/******/1: function(module, exports, require) {
2012-03-20 03:47:58 +08:00
2012-11-07 19:49:01 +08:00
/**! (webpack)\buildin\__webpack_console.js !**/
2012-07-11 23:53:46 +08:00
2012-08-07 04:19:15 +08:00
var console = (function() { return this["console"] || (this["window"] && this["window"].console) || {} }());
2012-04-05 20:59:01 +08:00
module.exports = console;
for(var name in {log:1, info:1, error:1, warn:1, dir:1, trace:1, assert:1})
if(!console[name])
console[name] = function() {};
2012-07-19 18:03:56 +08:00
var times = {};
2012-04-05 20:59:01 +08:00
if(!console.time)
console.time = function(label) {
2012-03-20 03:47:58 +08:00
times[label] = Date.now();
};
2012-04-05 20:59:01 +08:00
if(!console.timeEnd)
console.timeEnd = function() {
2012-03-20 03:47:58 +08:00
var duration = Date.now() - times[label];
2012-04-05 20:59:01 +08:00
console.log('%s: %dms', label, duration);
2012-03-20 03:47:58 +08:00
};
2012-03-10 20:11:23 +08:00
2012-10-26 21:07:50 +08:00
/******/}
2012-03-10 20:11:23 +08:00
/******/})
```
2012-05-01 16:51:02 +08:00
# js/1.output.js
``` javascript
2012-10-26 21:07:50 +08:00
/******/webpackJsonp(1,{
2012-05-01 16:51:02 +08:00
/******/2: function(module, exports, require) {
2012-11-07 19:49:01 +08:00
/**! (webpack)\examples\require.context\templates !**/
2012-07-11 23:53:46 +08:00
2012-10-26 21:07:50 +08:00
/***/ var map = {"./a.js":3,"./b.js":4,"./c.js":5};
/***/ exports = module.exports = function(name) {
/***/ return require(exports.id(name) || name)
/***/ };
/***/ exports.id = function(name) {
/***/ return map[name] || map[name+".js"];
/***/ };
/***/ exports.keys = function() {
/***/ return Object.keys(map);
2012-08-07 04:33:14 +08:00
/***/ };
2012-05-01 16:51:02 +08:00
/******/},
/******/
/******/3: function(module, exports, require) {
2012-11-07 19:49:01 +08:00
/**! (webpack)\examples\require.context\templates\a.js !**/
2012-07-11 23:53:46 +08:00
2012-05-01 16:51:02 +08:00
module.exports = function() {
return "This text was generated by template A";
}
/******/},
/******/
/******/4: function(module, exports, require) {
2012-11-07 19:49:01 +08:00
/**! (webpack)\examples\require.context\templates\b.js !**/
2012-07-11 23:53:46 +08:00
2012-05-01 16:51:02 +08:00
module.exports = function() {
return "This text was generated by template B";
}
/******/},
/******/
/******/5: function(module, exports, require) {
2012-11-07 19:49:01 +08:00
/**! (webpack)\examples\require.context\templates\c.js !**/
2012-07-11 23:53:46 +08:00
2012-05-01 16:51:02 +08:00
module.exports = function() {
return "This text was generated by template C";
}
2012-10-26 21:07:50 +08:00
/******/}
2012-05-01 16:51:02 +08:00
/******/})
```
2012-03-10 20:11:23 +08:00
# Info
## Uncompressed
2012-03-20 03:47:58 +08:00
```
2012-11-07 19:49:01 +08:00
Hash: 559a2edfadb9eaf3802f27ba76f9acac
Compile Time: 38ms
2012-03-20 03:47:58 +08:00
Chunks: 2
Modules: 6
Modules including duplicates: 6
Modules first chunk: 2
2012-11-07 19:49:01 +08:00
main output.js: 2966 chars/bytes
1.output.js: 1110 chars/bytes
<id> <size> <filename>
<reason> from <filename>
2012-03-20 03:47:58 +08:00
output.js
2012-11-07 19:49:01 +08:00
0 271 .\example.js
2012-03-20 03:47:58 +08:00
main
2012-11-07 19:49:01 +08:00
1 502 (webpack)\buildin\__webpack_console.js
2012-04-05 20:59:01 +08:00
require (2x) from .\example.js
2012-03-20 03:47:58 +08:00
1.output.js
2012-10-26 21:07:50 +08:00
2 322 [context] (webpack)\examples\require.context\templates
2012-08-09 17:57:27 +08:00
async context from .\example.js
2012-11-07 19:49:01 +08:00
3 80 (webpack)\examples\require.context\templates\a.js
2012-08-09 17:57:27 +08:00
async context from .\example.js
2012-11-07 19:49:01 +08:00
4 80 (webpack)\examples\require.context\templates\b.js
2012-08-09 17:57:27 +08:00
async context from .\example.js
2012-11-07 19:49:01 +08:00
5 80 (webpack)\examples\require.context\templates\c.js
2012-08-09 17:57:27 +08:00
async context from .\example.js
2012-03-10 20:11:23 +08:00
```
2012-03-12 04:37:18 +08:00
## Minimized (uglify-js, no zip)
2012-03-10 20:11:23 +08:00
2012-03-20 03:47:58 +08:00
```
2012-11-07 19:49:01 +08:00
Hash: fb0c194fd339c5e291b48da7893f9db5
Compile Time: 267ms
2012-03-20 03:47:58 +08:00
Chunks: 2
Modules: 6
Modules including duplicates: 6
Modules first chunk: 2
2012-11-07 19:49:01 +08:00
main output.js: 1154 chars/bytes
1.output.js: 456 chars/bytes
<id> <size> <filename>
<reason> from <filename>
2012-03-20 03:47:58 +08:00
output.js
2012-11-07 19:49:01 +08:00
0 160 .\example.js
2012-03-20 03:47:58 +08:00
main
2012-11-07 19:49:01 +08:00
1 403 (webpack)\buildin\__webpack_console.js
2012-04-05 20:59:01 +08:00
require (2x) from .\example.js
2012-03-20 03:47:58 +08:00
1.output.js
2012-11-07 19:49:01 +08:00
2 213 [context] (webpack)\examples\require.context\templates
2012-08-09 17:57:27 +08:00
async context from .\example.js
2012-11-07 19:49:01 +08:00
3 73 (webpack)\examples\require.context\templates\a.js
2012-08-09 17:57:27 +08:00
async context from .\example.js
2012-11-07 19:49:01 +08:00
4 73 (webpack)\examples\require.context\templates\b.js
2012-08-09 17:57:27 +08:00
async context from .\example.js
2012-11-07 19:49:01 +08:00
5 73 (webpack)\examples\require.context\templates\c.js
2012-08-09 17:57:27 +08:00
async context from .\example.js
2012-03-10 20:11:23 +08:00
```
2012-10-09 23:17:38 +08:00
## Graph
![webpack-graph](http://webpack.github.com/webpack/examples/code-splitted-require.context/graph.svg)