webpack/examples/mixed/README.md

257 lines
7.3 KiB
Markdown
Raw Normal View History

2012-08-07 04:19:15 +08:00
# example.js
``` javascript
// CommonJs-style requires
var commonjs1 = require("./commonjs");
var amd1 = require("./amd");
// AMD-style requires (with all webpack features)
require([
"./commonjs", "./amd",
"../require.context/templates/"+amd1+".js",
Math.random() < 0.5 ? "./commonjs" : "./amd"],
function(commonjs2, amd2, template, randModule) {
// Do something with it...
}
);
```
2012-08-07 04:25:48 +08:00
# amd.js
2012-08-07 04:19:15 +08:00
``` javascript
// AMD Module Format
define(
"app/amd",
["./commonjs"],
function(commonjs1) {
// but you can use CommonJs-style requires:
var commonjs2 = require("./commonjs");
// Do something...
return 456;
}
);
```
2012-08-07 04:25:48 +08:00
# commonjs.js
2012-08-07 04:19:15 +08:00
``` javascript
// CommonJs Module Format
module.exports = 123;
// but you can use amd.style requires
require(
["./amd"],
function(amd1) {
var amd2 = require("./amd");
}
);
```
# js/output.js
``` javascript
2013-01-31 01:49:25 +08:00
/******/ (function webpackBootstrap(modules) {
/******/ var installedModules = {};
/******/ function require(moduleId) {
/******/ if(typeof moduleId !== "number") throw new Error("Cannot find module '"+moduleId+"'");
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ modules[moduleId].call(null, module, module.exports, require);
/******/ module.loaded = true;
/******/ return module.exports;
/******/ }
/******/ require.e = function requireEnsure(chunkId, callback) {
/******/ if(installedChunks[chunkId] === 1) return callback.call(null, 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';
/******/ script.charset = 'utf-8';
/******/ script.src = modules.c+""+chunkId+".output.js";
/******/ head.appendChild(script);
/******/ }
/******/ };
/******/ require.modules = modules;
/******/ require.cache = installedModules;
/******/ var installedChunks = {0:1};
/******/ window["webpackJsonp"] = function webpackJsonpCallback(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].call(null, require);
/******/ };
/******/ return require(0);
/******/ })({
/******/ c: "",
/***/ 0:
/*!********************!*\
!*** ./example.js ***!
\********************/
/***/ function(module, exports, require) {
// CommonJs-style requires
var commonjs1 = require(/*! ./commonjs */ 2);
var amd1 = require(/*! ./amd */ 1);
// AMD-style requires (with all webpack features)
require.e/* require */(1, function(require) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [
(require(/*! ./commonjs */ 2)), (require(/*! ./amd */ 1)),
require(/*! ../require.context/templates */ 3)("./"+amd1+".js"),
Math.random() < 0.5 ? (require(/*! ./commonjs */ 2)) : (require(/*! ./amd */ 1))]; (function(commonjs2, amd2, template, randModule) {
// Do something with it...
}.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});
/***/ },
/***/ 1:
/*!****************!*\
!*** ./amd.js ***!
\****************/
/***/ function(module, exports, require) {
// AMD Module Format
{var __WEBPACK_AMD_DEFINE_ARRAY__ = [(require(/*! ./commonjs */ 2))]; var __WEBPACK_AMD_DEFINE_RESULT__ = (function(commonjs1) {
// but you can use CommonJs-style requires:
var commonjs2 = require(/*! ./commonjs */ 2);
// Do something...
return 456;
}.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)); if(__WEBPACK_AMD_DEFINE_RESULT__ !== undefined) module.exports = __WEBPACK_AMD_DEFINE_RESULT__;};
/***/ },
/***/ 2:
/*!*********************!*\
!*** ./commonjs.js ***!
\*********************/
/***/ function(module, exports, require) {
// CommonJs Module Format
module.exports = 123;
// but you can use amd.style requires
require.e/* require */(0/* empty */, function(require) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [(require(/*! ./amd */ 1))]; (function(amd1) {
var amd2 = require(/*! ./amd */ 1);
}.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});
/***/ }
/******/ })
2012-10-26 21:07:50 +08:00
2012-08-09 17:32:02 +08:00
```
# js/1.output.js
``` javascript
2013-01-31 01:49:25 +08:00
webpackJsonp(1, {
/***/ 3:
/*!************************************************!*\
!*** ./require.context/templates ^\.\/.*\.js$ ***!
\************************************************/
/***/ function(module, exports, require) {
var map = {
"./a.js": 4,
"./b.js": 5,
"./c.js": 6
};
2013-02-13 18:58:13 +08:00
function webpackContext(req) {
return require(map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }()));
2013-01-31 01:49:25 +08:00
};
2013-02-13 18:58:13 +08:00
webpackContext.keys = function webpackContextKeys() {
2013-01-31 01:49:25 +08:00
return Object.keys(map);
};
2013-02-13 18:58:13 +08:00
module.exports = webpackContext;
2013-01-31 01:49:25 +08:00
/***/ },
/***/ 4:
/*!****************************************!*\
!*** ./require.context/templates/a.js ***!
\****************************************/
/***/ function(module, exports, require) {
module.exports = function() {
return "This text was generated by template A";
}
2012-08-07 04:19:15 +08:00
2013-01-31 01:49:25 +08:00
/***/ },
2012-08-07 04:19:15 +08:00
2013-01-31 01:49:25 +08:00
/***/ 5:
/*!****************************************!*\
!*** ./require.context/templates/b.js ***!
\****************************************/
/***/ function(module, exports, require) {
2012-08-07 04:19:15 +08:00
2013-01-31 01:49:25 +08:00
module.exports = function() {
return "This text was generated by template B";
}
2012-08-07 04:19:15 +08:00
2013-01-31 01:49:25 +08:00
/***/ },
2012-08-07 04:19:15 +08:00
2013-01-31 01:49:25 +08:00
/***/ 6:
/*!****************************************!*\
!*** ./require.context/templates/c.js ***!
\****************************************/
/***/ function(module, exports, require) {
2012-08-07 04:19:15 +08:00
2013-01-31 01:49:25 +08:00
module.exports = function() {
return "This text was generated by template C";
}
2012-08-07 04:19:15 +08:00
2013-01-31 01:49:25 +08:00
/***/ }
2012-08-07 04:19:15 +08:00
2013-01-31 01:49:25 +08:00
})
2012-08-07 04:19:15 +08:00
```
# Info
## Uncompressed
```
2013-02-13 18:58:13 +08:00
Hash: 578635659acd728459ebbd30abf93f14
Time: 62ms
2013-01-31 01:49:25 +08:00
Asset Size Chunks Chunk Names
output.js 3621 0 main
2013-02-13 18:58:13 +08:00
1.output.js 1422 1
chunk {0} output.js (main) 728
[0] ./example.js 358 [built] {0}
[1] ./amd.js 208 [built] {0}
2013-01-31 01:49:25 +08:00
amd require ./amd [2] ./commonjs.js 5:0-10:1
cjs require ./amd [2] ./commonjs.js 8:13-29
cjs require ./amd [0] ./example.js 3:11-27
amd require ./amd [0] ./example.js 6:0-13:1
amd require ./amd [0] ./example.js 6:0-13:1
2013-02-13 18:58:13 +08:00
[2] ./commonjs.js 162 [built] {0}
2013-01-31 01:49:25 +08:00
cjs require ./commonjs [0] ./example.js 2:16-37
amd require ./commonjs [0] ./example.js 6:0-13:1
amd require ./commonjs [0] ./example.js 6:0-13:1
amd require ./commonjs [1] ./amd.js 2:0-11:1
cjs require ./commonjs [1] ./amd.js 7:18-39
2013-02-13 18:58:13 +08:00
chunk {1} 1.output.js 433 {0}
2013-01-31 01:49:25 +08:00
[3] ./require.context/templates ^\.\/.*\.js$ 193 [built] {1}
amd require context ../require.context/templates [0] ./example.js 6:0-13:1
2013-02-13 18:58:13 +08:00
[4] ./require.context/templates/a.js 80 [built] {1}
2013-01-31 01:49:25 +08:00
context element ./a.js [3] ./require.context/templates ^\.\/.*\.js$
2013-02-13 18:58:13 +08:00
[5] ./require.context/templates/b.js 80 [built] {1}
2013-01-31 01:49:25 +08:00
context element ./b.js [3] ./require.context/templates ^\.\/.*\.js$
2013-02-13 18:58:13 +08:00
[6] ./require.context/templates/c.js 80 [built] {1}
2013-01-31 01:49:25 +08:00
context element ./c.js [3] ./require.context/templates ^\.\/.*\.js$
2012-08-07 04:19:15 +08:00
```
2012-10-09 23:17:38 +08:00
## Graph
![webpack-graph](http://webpack.github.com/webpack/examples/mixed/graph.svg)