added graphs to examples

This commit is contained in:
Tobias Koppers 2012-10-09 17:17:38 +02:00
parent 0fb1fa820d
commit 725698bce6
31 changed files with 295 additions and 24 deletions

View File

@ -6,6 +6,9 @@ require = require("enhanced-require")(module);
var cp = require('child_process');
var tc = require("./template-common");
var formatOutput = require("../lib/formatOutput");
var createFilenameShortener = require("../lib/createFilenameShortener");
var webpackGraph = require("webpack-graph");
var extraArgs = "";
if(require("fs").existsSync(require("path").join(process.cwd(), "webpackOptions.js")))
@ -17,13 +20,24 @@ cp.exec("node ../../bin/webpack.js --verbose --min "+extraArgs+" example.js js/o
if (error !== null)
console.log(error);
var readme = tc(require("raw!"+require("path").join(process.cwd(), "template.md")), require.context("raw!"+process.cwd()), stdout.replace(/[\r\n]*$/, ""), "min");
cp.exec("node ../../bin/webpack.js --filenames --verbose "+extraArgs+" example.js js/output.js", function (error, stdout, stderr) {
cp.exec("node ../../bin/webpack.js --filenames --verbose "+extraArgs+" example.js js/output.js --json", function (error, stdout, stderr) {
if(stderr)
console.log(stderr);
if (error !== null)
console.log(error);
readme = tc(readme, require.context("raw!val!raw!"+process.cwd()), stdout.replace(/[\r\n]*$/, ""));
var stats = JSON.parse(stdout);
var formatedStats = formatOutput(stats, {
context: process.cwd(),
verbose: true
});
var filenameShortener = createFilenameShortener(process.cwd());
readme = tc(readme, require.context("raw!val!raw!"+process.cwd()), formatedStats.replace(/[\r\n]*$/, ""));
readme = readme.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
require("fs").writeFile("README.md", readme, "utf-8", function() {});
require("fs").writeFile("graph.svg", webpackGraph(stats, {
nameShortener: filenameShortener,
width: 500,
height: 300
}), "utf-8", function() {});
});
});

View File

@ -186,7 +186,7 @@ module.exports = function() {
```
Hash: b83e1a10c24b65db5ee14c7bcf8ebc85
Compile Time: 47ms
Compile Time: 48ms
Chunks: 2
Modules: 7
Modules including duplicates: 7
@ -218,7 +218,7 @@ output.js
```
Hash: 7da1af67af62fe871b1f6a446eee7c04
Compile Time: 168ms
Compile Time: 153ms
Chunks: 2
Modules: 7
Modules including duplicates: 7
@ -245,3 +245,7 @@ output.js
6 72 (webpack)\examples\require.context\templates\c.js
async context from .\example.js
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)

View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="284.9004468540512" height="300"><line class="" x1="15.20455989995011" y1="39.665301097634206" x2="85.57188674632589" y2="65.16283752385583" style="stroke-width:1"/><line class="" x1="136.98039896581787" y1="15.20455989995011" x2="85.57188674632589" y2="65.16283752385583" style="stroke-width:1"/><line class="async " x1="133.3754940115522" y1="170.06946213803403" x2="85.57188674632589" y2="65.16283752385583" style="stroke-width:1"/><line class="" x1="22.222869848483164" y1="230.74454854278667" x2="133.3754940115522" y2="170.06946213803403" style="stroke-width:0.5"/><line class="" x1="154.7520197891042" y1="284.7954401000499" x2="133.3754940115522" y2="170.06946213803403" style="stroke-width:0.5"/><line class="" x1="269.6958869541011" y1="198.07433937915857" x2="133.3754940115522" y2="170.06946213803403" style="stroke-width:0.5"/><line class="req" id="module0link0" x1="85.57188674632589" y1="65.16283752385583" x2="15.20455989995011" y2="39.665301097634206"/><line class="req" id="module0link1" x1="85.57188674632589" y1="65.16283752385583" x2="136.98039896581787" y2="15.20455989995011"/><line class="async req" id="module0link2" x1="85.57188674632589" y1="65.16283752385583" x2="133.3754940115522" y2="170.06946213803403"/><line class="dep" id="module1link0" x1="15.20455989995011" y1="39.665301097634206" x2="85.57188674632589" y2="65.16283752385583"/><line class="dep" id="module2link0" x1="136.98039896581787" y1="15.20455989995011" x2="85.57188674632589" y2="65.16283752385583"/><line class="async dep" id="module3link0" x1="133.3754940115522" y1="170.06946213803403" x2="85.57188674632589" y2="65.16283752385583"/><line class="req" id="module3link1" x1="133.3754940115522" y1="170.06946213803403" x2="22.222869848483164" y2="230.74454854278667"/><line class="req" id="module3link2" x1="133.3754940115522" y1="170.06946213803403" x2="154.7520197891042" y2="284.7954401000499"/><line class="req" id="module3link3" x1="133.3754940115522" y1="170.06946213803403" x2="269.6958869541011" y2="198.07433937915857"/><line class="dep" id="module4link0" x1="22.222869848483164" y1="230.74454854278667" x2="133.3754940115522" y2="170.06946213803403"/><line class="dep" id="module5link0" x1="154.7520197891042" y1="284.7954401000499" x2="133.3754940115522" y2="170.06946213803403"/><line class="dep" id="module6link0" x1="269.6958869541011" y1="198.07433937915857" x2="133.3754940115522" y2="170.06946213803403"/><circle id="module0" cx="85.57188674632589" cy="65.16283752385583" r="3.8011399749875276" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,3)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="15.20455989995011" cy="39.665301097634206" r="3.8011399749875276" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,1)" onmouseout="c()"><title>(webpack)\buildin\__webpack_console.js
Chunks:
output.js</title></circle><circle id="module2" cx="136.98039896581787" cy="15.20455989995011" r="3.8011399749875276" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(2,1)" onmouseout="c()"><title>(webpack)\buildin\__webpack_amd_require.js
Chunks:
output.js</title></circle><circle id="module3" cx="133.3754940115522" cy="170.06946213803403" r="3.8011399749875276" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(3,4)" onmouseout="c()"><title>(webpack)\examples\require.context\templates
Chunks:
1.output.js</title></circle><circle id="module4" cx="22.222869848483164" cy="230.74454854278667" r="3.8011399749875276" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(4,1)" onmouseout="c()"><title>(webpack)\examples\require.context\templates\a.js
Chunks:
1.output.js</title></circle><circle id="module5" cx="154.7520197891042" cy="284.7954401000499" r="3.8011399749875276" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(5,1)" onmouseout="c()"><title>(webpack)\examples\require.context\templates\b.js
Chunks:
1.output.js</title></circle><circle id="module6" cx="269.6958869541011" cy="198.07433937915857" r="3.8011399749875276" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(6,1)" onmouseout="c()"><title>(webpack)\examples\require.context\templates\c.js
Chunks:
1.output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -29,3 +29,7 @@
```
{{min:stdout}}
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)

View File

@ -161,7 +161,7 @@ module.exports = function() {
```
Hash: 1782c323238112211ad2f04896d358db
Compile Time: 38ms
Compile Time: 39ms
Chunks: 2
Modules: 6
Modules including duplicates: 6
@ -191,7 +191,7 @@ output.js
```
Hash: 26040949e1e15270899471a6db72d142
Compile Time: 135ms
Compile Time: 137ms
Chunks: 2
Modules: 6
Modules including duplicates: 6
@ -216,3 +216,7 @@ output.js
5 72 (webpack)\examples\require.context\templates\c.js
async context from .\example.js
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)

View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="300.40493299405244" height="300"><line class="" x1="19.110117460583794" y1="16.795058130215985" x2="84.93116438081327" y2="54.83088208259702" style="stroke-width:1"/><line class="async " x1="140.3591336901791" y1="158.293597970001" x2="84.93116438081327" y2="54.83088208259702" style="stroke-width:1"/><line class="" x1="16.795058130215985" y1="227.00232866102047" x2="140.3591336901791" y2="158.293597970001" style="stroke-width:0.5"/><line class="" x1="162.90845876982442" y1="283.204941869784" x2="140.3591336901791" y2="158.293597970001" style="stroke-width:0.5"/><line class="" x1="283.60987486383647" y1="174.56635338838305" x2="140.3591336901791" y2="158.293597970001" style="stroke-width:0.5"/><line class="req" id="module0link0" x1="84.93116438081327" y1="54.83088208259702" x2="19.110117460583794" y2="16.795058130215985"/><line class="async req" id="module0link1" x1="84.93116438081327" y1="54.83088208259702" x2="140.3591336901791" y2="158.293597970001"/><line class="dep" id="module1link0" x1="19.110117460583794" y1="16.795058130215985" x2="84.93116438081327" y2="54.83088208259702"/><line class="async dep" id="module2link0" x1="140.3591336901791" y1="158.293597970001" x2="84.93116438081327" y2="54.83088208259702"/><line class="req" id="module2link1" x1="140.3591336901791" y1="158.293597970001" x2="16.795058130215985" y2="227.00232866102047"/><line class="req" id="module2link2" x1="140.3591336901791" y1="158.293597970001" x2="162.90845876982442" y2="283.204941869784"/><line class="req" id="module2link3" x1="140.3591336901791" y1="158.293597970001" x2="283.60987486383647" y2="174.56635338838305"/><line class="dep" id="module3link0" x1="16.795058130215985" y1="227.00232866102047" x2="140.3591336901791" y2="158.293597970001"/><line class="dep" id="module4link0" x1="162.90845876982442" y1="283.204941869784" x2="140.3591336901791" y2="158.293597970001"/><line class="dep" id="module5link0" x1="283.60987486383647" y1="174.56635338838305" x2="140.3591336901791" y2="158.293597970001"/><circle id="module0" cx="84.93116438081327" cy="54.83088208259702" r="4.198764532553996" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,2)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="19.110117460583794" cy="16.795058130215985" r="4.198764532553996" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,1)" onmouseout="c()"><title>(webpack)\buildin\__webpack_console.js
Chunks:
output.js</title></circle><circle id="module2" cx="140.3591336901791" cy="158.293597970001" r="4.198764532553996" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(2,4)" onmouseout="c()"><title>(webpack)\examples\require.context\templates
Chunks:
1.output.js</title></circle><circle id="module3" cx="16.795058130215985" cy="227.00232866102047" r="4.198764532553996" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(3,1)" onmouseout="c()"><title>(webpack)\examples\require.context\templates\a.js
Chunks:
1.output.js</title></circle><circle id="module4" cx="162.90845876982442" cy="283.204941869784" r="4.198764532553996" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(4,1)" onmouseout="c()"><title>(webpack)\examples\require.context\templates\b.js
Chunks:
1.output.js</title></circle><circle id="module5" cx="283.60987486383647" cy="174.56635338838305" r="4.198764532553996" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(5,1)" onmouseout="c()"><title>(webpack)\examples\require.context\templates\c.js
Chunks:
1.output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@ -29,3 +29,7 @@
```
{{min:stdout}}
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)

View File

@ -139,7 +139,7 @@ module.exports = "It works";
```
Hash: 666de730e77865c0f918eb2d4b2418dc
Compile Time: 53ms
Compile Time: 49ms
Chunks: 2
Modules: 4
Modules including duplicates: 4
@ -165,7 +165,7 @@ output.js
```
Hash: d3a59169e3ef602b7e54516f7ac8f25c
Compile Time: 144ms
Compile Time: 140ms
Chunks: 2
Modules: 4
Modules including duplicates: 4
@ -186,3 +186,7 @@ output.js
3 25 .\file.js
async require (1x) from (webpack)\~\bundle-loader!.\file.js
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="245.53119536129023" height="300"><line class="" x1="23.61804068585556" y1="30.968777255326298" x2="129.7694648646668" y2="23.61804068585556" style="stroke-width:1"/><line class="" x1="221.91315467543467" y1="78.03973656497202" x2="129.7694648646668" y2="23.61804068585556" style="stroke-width:1"/><line class="async " x1="144.86023884610043" y1="276.38195931414447" x2="221.91315467543467" y2="78.03973656497202" style="stroke-width:0.5"/><line class="req" id="module0link0" x1="129.7694648646668" y1="23.61804068585556" x2="23.61804068585556" y2="30.968777255326298"/><line class="req" id="module0link1" x1="129.7694648646668" y1="23.61804068585556" x2="221.91315467543467" y2="78.03973656497202"/><line class="dep" id="module1link0" x1="23.61804068585556" y1="30.968777255326298" x2="129.7694648646668" y2="23.61804068585556"/><line class="dep" id="module2link0" x1="221.91315467543467" y1="78.03973656497202" x2="129.7694648646668" y2="23.61804068585556"/><line class="async req" id="module2link1" x1="221.91315467543467" y1="78.03973656497202" x2="144.86023884610043" y2="276.38195931414447"/><line class="async dep" id="module3link0" x1="144.86023884610043" y1="276.38195931414447" x2="221.91315467543467" y2="78.03973656497202"/><circle id="module0" cx="129.7694648646668" cy="23.61804068585556" r="5.90451017146389" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,2)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="23.61804068585556" cy="30.968777255326298" r="5.90451017146389" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,1)" onmouseout="c()"><title>(webpack)\buildin\__webpack_console.js
Chunks:
output.js</title></circle><circle id="module2" cx="221.91315467543467" cy="78.03973656497202" r="5.90451017146389" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(2,2)" onmouseout="c()"><title>(webpack)\~\bundle-loader
.\file.js
Chunks:
output.js</title></circle><circle id="module3" cx="144.86023884610043" cy="276.38195931414447" r="5.90451017146389" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(3,1)" onmouseout="c()"><title>.\file.js
Chunks:
1.output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -36,3 +36,7 @@
```
{{min:stdout}}
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)

View File

@ -107,7 +107,7 @@ webpackJsonp(1,{3:function(a,b,c){},4:function(a,b,c){}})
```
Hash: 50d0702166fd38f26c96b9cd8d421243
Compile Time: 45ms
Compile Time: 49ms
Chunks: 2
Modules: 5
Modules including duplicates: 5
@ -135,7 +135,7 @@ output.js
```
Hash: cfe028c1c8ac12be33bebd83dc12aa80
Compile Time: 141ms
Compile Time: 123ms
Chunks: 2
Modules: 5
Modules including duplicates: 5
@ -158,3 +158,7 @@ output.js
4 0 .\~\d.js
async require (1x) from .\example.js
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)

View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="359.6963279625197" height="300"><line class="" x1="29.724658129224352" y1="60.76512294449978" x2="155.71087227885246" y2="142.17706484388987" style="stroke-width:1"/><line class="" x1="80.81219925308272" y1="264.1626366670309" x2="155.71087227885246" y2="142.17706484388987" style="stroke-width:1"/><line class="async " x1="313.1467146941385" y1="270.27534187077566" x2="155.71087227885246" y2="142.17706484388987" style="stroke-width:1"/><line class="async " x1="329.9716698332954" y1="29.724658129224352" x2="155.71087227885246" y2="142.17706484388987" style="stroke-width:1"/><line class="req" id="module0link0" x1="155.71087227885246" y1="142.17706484388987" x2="29.724658129224352" y2="60.76512294449978"/><line class="req" id="module0link1" x1="155.71087227885246" y1="142.17706484388987" x2="80.81219925308272" y2="264.1626366670309"/><line class="async req" id="module0link2" x1="155.71087227885246" y1="142.17706484388987" x2="313.1467146941385" y2="270.27534187077566"/><line class="async req" id="module0link3" x1="155.71087227885246" y1="142.17706484388987" x2="329.9716698332954" y2="29.724658129224352"/><line class="dep" id="module1link0" x1="29.724658129224352" y1="60.76512294449978" x2="155.71087227885246" y2="142.17706484388987"/><line class="dep" id="module2link0" x1="80.81219925308272" y1="264.1626366670309" x2="155.71087227885246" y2="142.17706484388987"/><line class="async dep" id="module3link0" x1="313.1467146941385" y1="270.27534187077566" x2="155.71087227885246" y2="142.17706484388987"/><line class="async dep" id="module4link0" x1="329.9716698332954" y1="29.724658129224352" x2="155.71087227885246" y2="142.17706484388987"/><circle id="module0" cx="155.71087227885246" cy="142.17706484388987" r="7.431164532306088" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,4)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="29.724658129224352" cy="60.76512294449978" r="7.431164532306088" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,1)" onmouseout="c()"><title>.\~\b.js
Chunks:
output.js</title></circle><circle id="module2" cx="80.81219925308272" cy="264.1626366670309" r="7.431164532306088" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(2,1)" onmouseout="c()"><title>.\~\a.js
Chunks:
output.js</title></circle><circle id="module3" cx="313.1467146941385" cy="270.27534187077566" r="7.431164532306088" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(3,1)" onmouseout="c()"><title>.\~\c.js
Chunks:
1.output.js</title></circle><circle id="module4" cx="329.9716698332954" cy="29.724658129224352" r="7.431164532306088" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(4,1)" onmouseout="c()"><title>.\~\d.js
Chunks:
1.output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -36,3 +36,7 @@ Minimized
```
{{min:stdout}}
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)

View File

@ -125,7 +125,7 @@ console.timeEnd = function() {
```
Hash: 474013c0b0bff5edce1407a1cb805a35
Compile Time: 137ms
Compile Time: 136ms
Chunks: 1
Modules: 4
Modules including duplicates: 4
@ -150,7 +150,7 @@ output.js
```
Hash: 19d4c8993b53d92be00e044dd3101c86
Compile Time: 219ms
Compile Time: 215ms
Chunks: 1
Modules: 4
Modules including duplicates: 4

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="278.8475987951863" height="300"><line class="" x1="25.846258109367238" y1="123.68313266151779" x2="176.56826310929824" y2="25.846258109367238" style="stroke-width:0.5"/><line class="" x1="25.846258109367238" y1="123.68313266151779" x2="157.3394071615456" y2="274.1537418906328" style="stroke-width:0.3333333333333333"/><line class="" x1="157.3394071615456" y1="274.1537418906328" x2="253.0013406858191" y2="109.41959591799458" style="stroke-width:0.5"/><line class="" x1="253.0013406858191" y1="109.41959591799458" x2="176.56826310929824" y2="25.846258109367238" style="stroke-width:1"/><line class="req" id="module0link0" x1="176.56826310929824" y1="25.846258109367238" x2="25.846258109367238" y2="123.68313266151779"/><line class="req" id="module0link1" x1="176.56826310929824" y1="25.846258109367238" x2="253.0013406858191" y2="109.41959591799458"/><line class="dep" id="module1link0" x1="25.846258109367238" y1="123.68313266151779" x2="176.56826310929824" y2="25.846258109367238"/><line class="dep" id="module1link1" x1="25.846258109367238" y1="123.68313266151779" x2="157.3394071615456" y2="274.1537418906328"/><line class="dep" id="module2link0" x1="157.3394071615456" y1="274.1537418906328" x2="253.0013406858191" y2="109.41959591799458"/><line class="req" id="module2link1" x1="157.3394071615456" y1="274.1537418906328" x2="25.846258109367238" y2="123.68313266151779"/><line class="dep" id="module3link0" x1="253.0013406858191" y1="109.41959591799458" x2="176.56826310929824" y2="25.846258109367238"/><line class="req" id="module3link1" x1="253.0013406858191" y1="109.41959591799458" x2="157.3394071615456" y2="274.1537418906328"/><circle id="module0" cx="176.56826310929824" cy="25.846258109367238" r="6.461564527341809" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,2)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="25.846258109367238" cy="123.68313266151779" r="6.461564527341809" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,2)" onmouseout="c()"><title>(webpack)\buildin\__webpack_console.js
Chunks:
output.js</title></circle><circle id="module2" cx="157.3394071615456" cy="274.1537418906328" r="6.461564527341809" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(2,2)" onmouseout="c()"><title>(webpack)\~\coffee-loader
.\cup2.coffee
Chunks:
output.js</title></circle><circle id="module3" cx="253.0013406858191" cy="109.41959591799458" r="6.461564527341809" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(3,2)" onmouseout="c()"><title>(webpack)\~\coffee-loader
.\cup1.coffee
Chunks:
output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -98,7 +98,7 @@ exports.add = function() {
```
Hash: b1075afe2e2b2fd4519bc29c86dc97b9
Compile Time: 23ms
Compile Time: 24ms
Chunks: 1
Modules: 3
Modules including duplicates: 3
@ -120,7 +120,7 @@ output.js
```
Hash: e7fbffd3f8f8581e96fa46569eda7c02
Compile Time: 94ms
Compile Time: 91ms
Chunks: 1
Modules: 3
Modules including duplicates: 3

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="48.124355305192694" height="300"><line class="" x1="24.062177652596347" y1="125.48019455362162" x2="24.062177652596347" y2="24.062177652596347" style="stroke-width:1"/><line class="" x1="24.062177652596347" y1="275.93782234740365" x2="24.062177652596347" y2="125.48019455362162" style="stroke-width:0.5"/><line class="req" id="module0link0" x1="24.062177652596347" y1="24.062177652596347" x2="24.062177652596347" y2="125.48019455362162"/><line class="dep" id="module1link0" x1="24.062177652596347" y1="125.48019455362162" x2="24.062177652596347" y2="24.062177652596347"/><line class="req" id="module1link1" x1="24.062177652596347" y1="125.48019455362162" x2="24.062177652596347" y2="275.93782234740365"/><line class="dep" id="module2link0" x1="24.062177652596347" y1="275.93782234740365" x2="24.062177652596347" y2="125.48019455362162"/><circle id="module0" cx="24.062177652596347" cy="24.062177652596347" r="6.015544413149087" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,1)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="24.062177652596347" cy="125.48019455362162" r="6.015544413149087" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,2)" onmouseout="c()"><title>.\increment.js
Chunks:
output.js</title></circle><circle id="module2" cx="24.062177652596347" cy="275.93782234740365" r="6.015544413149087" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(2,1)" onmouseout="c()"><title>.\math.js
Chunks:
output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -138,7 +138,7 @@ Prints in node.js (`node example.js`) and in browser:
```
Hash: 847d13b98159af41faccdda862ec3e8d
Compile Time: 53ms
Compile Time: 50ms
Chunks: 1
Modules: 4
Modules including duplicates: 4

18
examples/loader/graph.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="401.4967622263996" height="300"><line class="" x1="35.44047028561271" y1="81.19526283005192" x2="206.73997792007944" y2="101.37098137779809" style="stroke-width:1"/><line class="" x1="230.48006726091452" y1="264.5595297143873" x2="206.73997792007944" y2="101.37098137779809" style="stroke-width:1"/><line class="" x1="366.0562919407869" y1="35.440470285612705" x2="206.73997792007944" y2="101.37098137779809" style="stroke-width:1"/><line class="req" id="module0link0" x1="206.73997792007944" y1="101.37098137779809" x2="35.44047028561271" y2="81.19526283005192"/><line class="req" id="module0link1" x1="206.73997792007944" y1="101.37098137779809" x2="230.48006726091452" y2="264.5595297143873"/><line class="req" id="module0link2" x1="206.73997792007944" y1="101.37098137779809" x2="366.0562919407869" y2="35.440470285612705"/><line class="dep" id="module1link0" x1="35.44047028561271" y1="81.19526283005192" x2="206.73997792007944" y2="101.37098137779809"/><line class="dep" id="module2link0" x1="230.48006726091452" y1="264.5595297143873" x2="206.73997792007944" y2="101.37098137779809"/><line class="dep" id="module3link0" x1="366.0562919407869" y1="35.440470285612705" x2="206.73997792007944" y2="101.37098137779809"/><circle id="module0" cx="206.73997792007944" cy="101.37098137779809" r="8.860117571403178" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,3)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="35.44047028561271" cy="81.19526283005192" r="8.860117571403178" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,1)" onmouseout="c()"><title>(webpack)\buildin\__webpack_console.js
Chunks:
output.js</title></circle><circle id="module2" cx="230.48006726091452" cy="264.5595297143873" r="8.860117571403178" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(2,1)" onmouseout="c()"><title>(webpack)\~\json-loader
.\test.json
Chunks:
output.js</title></circle><circle id="module3" cx="366.0562919407869" cy="35.440470285612705" r="8.860117571403178" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(3,1)" onmouseout="c()"><title>.\loader.js
.\file.js
Chunks:
output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -266,7 +266,7 @@ module.exports = function() {
```
Hash: 08f6b94c40913ca704ca33fe5a185c2b
Compile Time: 50ms
Compile Time: 51ms
Chunks: 2
Modules: 9
Modules including duplicates: 9
@ -301,3 +301,7 @@ output.js
8 82 (webpack)\examples\require.context\templates\c.js
async context from .\example.js
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)

29
examples/mixed/graph.svg Normal file
View File

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="382.19212483802147" height="300"><line class="" x1="59.00328201676227" y1="75.79718586085517" x2="197.49411723853504" y2="125.57315326697663" style="stroke-width:0.5"/><line class="async " x1="59.00328201676227" y1="75.79718586085517" x2="131.2021812211799" y2="103.87421965028658" style="stroke-width:0.25"/><line class="" x1="131.2021812211799" y1="103.87421965028658" x2="197.49411723853504" y2="125.57315326697663" style="stroke-width:0.5"/><line class="async " x1="131.2021812211799" y1="103.87421965028658" x2="59.00328201676227" y2="75.79718586085517" style="stroke-width:0.25"/><line class="" x1="211.30460374980152" y1="12.761937811755091" x2="197.49411723853504" y2="125.57315326697663" style="stroke-width:0.3333333333333333"/><line class="" x1="211.30460374980152" y1="12.761937811755091" x2="131.2021812211799" y2="103.87421965028658" style="stroke-width:0.2"/><line class="" x1="211.30460374980152" y1="12.761937811755091" x2="12.761937811755091" y2="171.13264936227077" style="stroke-width:0.25"/><line class="" x1="12.761937811755091" y1="171.13264936227077" x2="59.00328201676227" y2="75.79718586085517" style="stroke-width:0.3333333333333333"/><line class="async " x1="261.579693415499" y1="196.5844861579694" x2="197.49411723853504" y2="125.57315326697663" style="stroke-width:1"/><line class="" x1="193.73969442284815" y1="278.30889466930597" x2="261.579693415499" y2="196.5844861579694" style="stroke-width:0.5"/><line class="" x1="313.61531633457633" y1="287.2380621882449" x2="261.579693415499" y2="196.5844861579694" style="stroke-width:0.5"/><line class="" x1="369.43018702626637" y1="173.07918393049914" x2="261.579693415499" y2="196.5844861579694" style="stroke-width:0.5"/><line class="req" id="module0link0" x1="197.49411723853504" y1="125.57315326697663" x2="59.00328201676227" y2="75.79718586085517"/><line class="req" id="module0link1" x1="197.49411723853504" y1="125.57315326697663" x2="131.2021812211799" y2="103.87421965028658"/><line class="req" id="module0link2" x1="197.49411723853504" y1="125.57315326697663" x2="211.30460374980152" y2="12.761937811755091"/><line class="async req" id="module0link3" x1="197.49411723853504" y1="125.57315326697663" x2="261.579693415499" y2="196.5844861579694"/><line class="dep" id="module1link0" x1="59.00328201676227" y1="75.79718586085517" x2="197.49411723853504" y2="125.57315326697663"/><line class="async reqdep" id="module1link1" x1="59.00328201676227" y1="75.79718586085517" x2="131.2021812211799" y2="103.87421965028658"/><line class="req" id="module1link2" x1="59.00328201676227" y1="75.79718586085517" x2="12.761937811755091" y2="171.13264936227077"/><line class="dep" id="module2link0" x1="131.2021812211799" y1="103.87421965028658" x2="197.49411723853504" y2="125.57315326697663"/><line class="async reqdep" id="module2link1" x1="131.2021812211799" y1="103.87421965028658" x2="59.00328201676227" y2="75.79718586085517"/><line class="req" id="module2link2" x1="131.2021812211799" y1="103.87421965028658" x2="211.30460374980152" y2="12.761937811755091"/><line class="dep" id="module3link0" x1="211.30460374980152" y1="12.761937811755091" x2="197.49411723853504" y2="125.57315326697663"/><line class="dep" id="module3link1" x1="211.30460374980152" y1="12.761937811755091" x2="131.2021812211799" y2="103.87421965028658"/><line class="dep" id="module3link2" x1="211.30460374980152" y1="12.761937811755091" x2="12.761937811755091" y2="171.13264936227077"/><line class="dep" id="module4link0" x1="12.761937811755091" y1="171.13264936227077" x2="59.00328201676227" y2="75.79718586085517"/><line class="req" id="module4link1" x1="12.761937811755091" y1="171.13264936227077" x2="211.30460374980152" y2="12.761937811755091"/><line class="async dep" id="module5link0" x1="261.579693415499" y1="196.5844861579694" x2="197.49411723853504" y2="125.57315326697663"/><line class="req" id="module5link1" x1="261.579693415499" y1="196.5844861579694" x2="193.73969442284815" y2="278.30889466930597"/><line class="req" id="module5link2" x1="261.579693415499" y1="196.5844861579694" x2="313.61531633457633" y2="287.2380621882449"/><line class="req" id="module5link3" x1="261.579693415499" y1="196.5844861579694" x2="369.43018702626637" y2="173.07918393049914"/><line class="dep" id="module6link0" x1="193.73969442284815" y1="278.30889466930597" x2="261.579693415499" y2="196.5844861579694"/><line class="dep" id="module7link0" x1="313.61531633457633" y1="287.2380621882449" x2="261.579693415499" y2="196.5844861579694"/><line class="dep" id="module8link0" x1="369.43018702626637" y1="173.07918393049914" x2="261.579693415499" y2="196.5844861579694"/><circle id="module0" cx="197.49411723853504" cy="125.57315326697663" r="3.190484452938773" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,4)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="59.00328201676227" cy="75.79718586085517" r="3.190484452938773" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,3)" onmouseout="c()"><title>.\amd.js
Chunks:
output.js</title></circle><circle id="module2" cx="131.2021812211799" cy="103.87421965028658" r="3.190484452938773" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(2,3)" onmouseout="c()"><title>.\commonjs.js
Chunks:
output.js</title></circle><circle id="module3" cx="211.30460374980152" cy="12.761937811755091" r="3.190484452938773" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(3,3)" onmouseout="c()"><title>(webpack)\buildin\__webpack_amd_require.js
Chunks:
output.js</title></circle><circle id="module4" cx="12.761937811755091" cy="171.13264936227077" r="3.190484452938773" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(4,2)" onmouseout="c()"><title>(webpack)\buildin\__webpack_amd_define.js
Chunks:
output.js</title></circle><circle id="module5" cx="261.579693415499" cy="196.5844861579694" r="3.190484452938773" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(5,4)" onmouseout="c()"><title>(webpack)\examples\require.context\templates
Chunks:
1.output.js</title></circle><circle id="module6" cx="193.73969442284815" cy="278.30889466930597" r="3.190484452938773" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(6,1)" onmouseout="c()"><title>(webpack)\examples\require.context\templates\a.js
Chunks:
1.output.js</title></circle><circle id="module7" cx="313.61531633457633" cy="287.2380621882449" r="3.190484452938773" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(7,1)" onmouseout="c()"><title>(webpack)\examples\require.context\templates\b.js
Chunks:
1.output.js</title></circle><circle id="module8" cx="369.43018702626637" cy="173.07918393049914" r="3.190484452938773" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(8,1)" onmouseout="c()"><title>(webpack)\examples\require.context\templates\c.js
Chunks:
1.output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 7.9 KiB

View File

@ -36,3 +36,7 @@
```
{{stdout}}
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)

View File

@ -169,7 +169,7 @@ require.e(1, function(require) {
```
Hash: e8a5188136febe5f240b1f8cbc74cf2b
Compile Time: 48ms
Compile Time: 47ms
Chunks: 3
Modules: 5
Modules including duplicates: 7

View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="306.5774933731176" height="300"><line class="" x1="25.514679490037032" y1="60.489870689926605" x2="133.8737884675857" y2="122.13698443949441" style="stroke-width:1"/><line class="async " x1="53.37523349514675" y1="274.48532050996295" x2="133.8737884675857" y2="122.13698443949441" style="stroke-width:1"/><line class="async " x1="264.6721573978113" y1="228.76778771551847" x2="133.8737884675857" y2="122.13698443949441" style="stroke-width:1"/><line class="async " x1="281.0628138830806" y1="25.514679490037032" x2="133.8737884675857" y2="122.13698443949441" style="stroke-width:1"/><line class="req" id="module0link0" x1="133.8737884675857" y1="122.13698443949441" x2="25.514679490037032" y2="60.489870689926605"/><line class="async req" id="module0link1" x1="133.8737884675857" y1="122.13698443949441" x2="53.37523349514675" y2="274.48532050996295"/><line class="async req" id="module0link2" x1="133.8737884675857" y1="122.13698443949441" x2="264.6721573978113" y2="228.76778771551847"/><line class="async req" id="module0link3" x1="133.8737884675857" y1="122.13698443949441" x2="281.0628138830806" y2="25.514679490037032"/><line class="dep" id="module1link0" x1="25.514679490037032" y1="60.489870689926605" x2="133.8737884675857" y2="122.13698443949441"/><line class="async dep" id="module2link0" x1="53.37523349514675" y1="274.48532050996295" x2="133.8737884675857" y2="122.13698443949441"/><line class="async dep" id="module3link0" x1="264.6721573978113" y1="228.76778771551847" x2="133.8737884675857" y2="122.13698443949441"/><line class="async dep" id="module4link0" x1="281.0628138830806" y1="25.514679490037032" x2="133.8737884675857" y2="122.13698443949441"/><circle id="module0" cx="133.8737884675857" cy="122.13698443949441" r="6.378669872509258" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,4)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="25.514679490037032" cy="60.489870689926605" r="6.378669872509258" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,1)" onmouseout="c()"><title>.\~\a.js
Chunks:
output.js</title></circle><circle id="module2" cx="53.37523349514675" cy="274.48532050996295" r="6.378669872509258" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(2,1)" onmouseout="c()"><title>.\~\b.js
Chunks:
1.output.js
2.output.js</title></circle><circle id="module3" cx="264.6721573978113" cy="228.76778771551847" r="6.378669872509258" fill="rgb(240,160,80)" stroke-width="1" onmouseover="a(3,1)" onmouseout="c()"><title>.\~\d.js
Chunks:
1.output.js
2.output.js</title></circle><circle id="module4" cx="281.0628138830806" cy="25.514679490037032" r="6.378669872509258" fill="rgb(240,160,0)" stroke-width="1" onmouseover="a(4,1)" onmouseout="c()"><title>.\~\c.js
Chunks:
2.output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -163,7 +163,7 @@ output.js
```
Hash: e4f892229bbb95c564b7d14805cc0c12
Compile Time: 122ms
Compile Time: 120ms
Chunks: 1
Modules: 6
Modules including duplicates: 6
@ -187,6 +187,10 @@ output.js
context from .\example.js
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)
# Code Splitting
See [this example combined with code splitting](/sokra/modules-webpack/tree/master/examples/code-splitted-require.context)

View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="318.937656311407" height="300"><line class="" x1="39.33173017194616" y1="17.711036047426994" x2="105.03094798738954" y2="67.70825111697043" style="stroke-width:1"/><line class="" x1="147.27474640876167" y1="147.87995049442972" x2="105.03094798738954" y2="67.70825111697043" style="stroke-width:1"/><line class="" x1="17.711036047426994" y1="229.70337209776102" x2="147.27474640876167" y2="147.87995049442972" style="stroke-width:0.5"/><line class="" x1="174.4081089057929" y1="282.288963952573" x2="147.27474640876167" y2="147.87995049442972" style="stroke-width:0.5"/><line class="" x1="301.22662026398" y1="171.55124333397927" x2="147.27474640876167" y2="147.87995049442972" style="stroke-width:0.5"/><line class="req" id="module0link0" x1="105.03094798738954" y1="67.70825111697043" x2="39.33173017194616" y2="17.711036047426994"/><line class="req" id="module0link1" x1="105.03094798738954" y1="67.70825111697043" x2="147.27474640876167" y2="147.87995049442972"/><line class="dep" id="module1link0" x1="39.33173017194616" y1="17.711036047426994" x2="105.03094798738954" y2="67.70825111697043"/><line class="dep" id="module2link0" x1="147.27474640876167" y1="147.87995049442972" x2="105.03094798738954" y2="67.70825111697043"/><line class="req" id="module2link1" x1="147.27474640876167" y1="147.87995049442972" x2="17.711036047426994" y2="229.70337209776102"/><line class="req" id="module2link2" x1="147.27474640876167" y1="147.87995049442972" x2="174.4081089057929" y2="282.288963952573"/><line class="req" id="module2link3" x1="147.27474640876167" y1="147.87995049442972" x2="301.22662026398" y2="171.55124333397927"/><line class="dep" id="module3link0" x1="17.711036047426994" y1="229.70337209776102" x2="147.27474640876167" y2="147.87995049442972"/><line class="dep" id="module4link0" x1="174.4081089057929" y1="282.288963952573" x2="147.27474640876167" y2="147.87995049442972"/><line class="dep" id="module5link0" x1="301.22662026398" y1="171.55124333397927" x2="147.27474640876167" y2="147.87995049442972"/><circle id="module0" cx="105.03094798738954" cy="67.70825111697043" r="4.4277590118567485" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,2)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="39.33173017194616" cy="17.711036047426994" r="4.4277590118567485" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,1)" onmouseout="c()"><title>(webpack)\buildin\__webpack_console.js
Chunks:
output.js</title></circle><circle id="module2" cx="147.27474640876167" cy="147.87995049442972" r="4.4277590118567485" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(2,4)" onmouseout="c()"><title>.\templates
Chunks:
output.js</title></circle><circle id="module3" cx="17.711036047426994" cy="229.70337209776102" r="4.4277590118567485" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(3,1)" onmouseout="c()"><title>.\templates\a.js
Chunks:
output.js</title></circle><circle id="module4" cx="174.4081089057929" cy="282.288963952573" r="4.4277590118567485" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(4,1)" onmouseout="c()"><title>.\templates\b.js
Chunks:
output.js</title></circle><circle id="module5" cx="301.22662026398" cy="171.55124333397927" r="4.4277590118567485" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(5,1)" onmouseout="c()"><title>.\templates\c.js
Chunks:
output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -38,6 +38,10 @@ module.exports = function() {
{{min:stdout}}
```
## Graph
![webpack-graph](https://raw.github.com/webpack/webpack/master/examples/require.context/graph.svg)
# Code Splitting
See [this example combined with code splitting](/sokra/modules-webpack/tree/master/examples/code-splitted-require.context)

View File

@ -86,7 +86,7 @@ module.exports = Math.random();
```
Hash: 1ba7e12ebb3bc92128a6075ee0c8ddd5
Compile Time: 21ms
Compile Time: 22ms
Chunks: 1
Modules: 2
Modules including duplicates: 2
@ -107,7 +107,7 @@ output.js
```
Hash: be6434e486f1bd019d86a6d85591298e
Compile Time: 90ms
Compile Time: 88ms
Chunks: 1
Modules: 2
Modules including duplicates: 2

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="93.28742594369686" height="300"><line class="" x1="46.64371297184843" y1="253.35628702815157" x2="46.64371297184843" y2="46.64371297184842" style="stroke-width:1"/><line class="req" id="module0link0" x1="46.64371297184843" y1="46.64371297184842" x2="46.64371297184843" y2="253.35628702815157"/><line class="dep" id="module1link0" x1="46.64371297184843" y1="253.35628702815157" x2="46.64371297184843" y2="46.64371297184842"/><circle id="module0" cx="46.64371297184843" cy="46.64371297184842" r="11.660928242962108" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,1)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="46.64371297184843" cy="253.35628702815157" r="11.660928242962108" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,1)" onmouseout="c()"><title>.\a.js
Chunks:
output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -157,7 +157,7 @@ module.exports = amdRequire;
```
Hash: 9a3fb6bf1155fd1c85b5a003f0e9fe77
Compile Time: 72ms
Compile Time: 68ms
Chunks: 1
Modules: 2
Modules including duplicates: 2
@ -176,7 +176,7 @@ output.js
Embedded Stats
.\worker.js
Hash: 6ce2177a70a0741653c759ba5e3e684f
Compile Time: 25ms
Compile Time: 26ms
Chunks: 2
Modules: 6
Modules including duplicates: 6
@ -204,7 +204,7 @@ Embedded Stats
```
Hash: 7c6135cf8b61087ca531a96e890b8f01
Compile Time: 302ms
Compile Time: 178ms
Chunks: 1
Modules: 2
Modules including duplicates: 2
@ -223,7 +223,7 @@ output.js
Embedded Stats
.\worker.js
Hash: 32b01b30a4148ab0f233c37f6b7dcbc9
Compile Time: 143ms
Compile Time: 116ms
Chunks: 2
Modules: 6
Modules including duplicates: 6

View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="93.28742594369686" height="300"><line class="" x1="46.64371297184843" y1="253.35628702815157" x2="46.64371297184843" y2="46.64371297184842" style="stroke-width:1"/><line class="req" id="module0link0" x1="46.64371297184843" y1="46.64371297184842" x2="46.64371297184843" y2="253.35628702815157"/><line class="dep" id="module1link0" x1="46.64371297184843" y1="253.35628702815157" x2="46.64371297184843" y2="46.64371297184842"/><circle id="module0" cx="46.64371297184843" cy="46.64371297184842" r="11.660928242962108" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(0,1)" onmouseout="c()"><title>.\example.js
Chunks:
output.js</title></circle><circle id="module1" cx="46.64371297184843" cy="253.35628702815157" r="11.660928242962108" fill="rgb(240,240,0)" stroke-width="1" onmouseover="a(1,1)" onmouseout="c()"><title>(webpack)\~\worker-loader
.\worker.js
Chunks:
output.js</title></circle><script type="text/ecmascript">function addHover(node) {node.setAttribute(&quot;class&quot;, node.getAttribute(&quot;class&quot;) + " hover")}function removeHover(node) {var className = node.getAttribute(&quot;class&quot;).split(" ");className.splice(className.indexOf(&quot;hover&quot;), 1);node.setAttribute(&quot;class&quot;, className.join(" "))}function a(node, links) {document.getElementById(&quot;module&quot; + node).setAttribute(&quot;class&quot;,&quot;hover&quot;);for(var i = 0; i &lt; links; i++) {var link = document.getElementById(&quot;module&quot; + node + &quot;link&quot; + i);
if(link) addHover(link);}}function c() {var elements = Array.prototype.slice.call(document.getElementsByClassName(&quot;hover&quot;));for(var i = 0; i &lt; elements.length; i++) removeHover(elements[i]);}</script><style type="text/css">line { stroke:black;}circle { stroke:black; stroke-width: 1}.dep, .req, .reqdep { stroke-width:0; }.async { stroke-dasharray: 4 4; }.reqdep.hover { stroke:#660; stroke-width: 3; }.req.hover { stroke:red; stroke-width: 3; }.dep.hover { stroke:green; stroke-width: 3; }circle.hover { stroke:blue; stroke-width: 1; }</style></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB