Skip to content

Commit cfb9942

Browse files
chrisbatemanchrisbateman
committed
beta-4
1 parent fdeb678 commit cfb9942

File tree

4 files changed

+57
-20
lines changed

4 files changed

+57
-20
lines changed

‎beta/build.js‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎beta/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="stylesheet" href="style.css"/>
88
</head>
99
<body>
10-
<div id="App"><div data-reactid=".qx01b9acu2" data-react-checksum="-686640898"><h1 data-reactid=".qx01b9acu2.0">Webpack Visualizer</h1><div class="chart chart--needsUpload" data-reactid=".qx01b9acu2.2"><div class="chart-uploadMessage" data-reactid=".qx01b9acu2.2.0"><p data-reactid=".qx01b9acu2.2.0.0">Drop JSON file here or click to choose.</p><small data-reactid=".qx01b9acu2.2.0.1">Files won&#x27;t be uploaded — your data stays in your browser.</small></div><div class="details" data-reactid=".qx01b9acu2.2.1"></div><noscript data-reactid=".qx01b9acu2.2.2"></noscript></div><input type="file" class="hiddenFileInput" data-reactid=".qx01b9acu2.3"/><button class="destyledButton" style="margin-top:0.5em;" data-reactid=".qx01b9acu2.4">Try a Demo</button><div class="breadcrumbs" data-reactid=".qx01b9acu2.5"></div><footer data-reactid=".qx01b9acu2.6"><h2 data-reactid=".qx01b9acu2.6.0:0">How do I get stats JSON from webpack?</h2><p data-reactid=".qx01b9acu2.6.0:1"><code data-reactid=".qx01b9acu2.6.0:1.0">webpack --json &gt; stats.json</code></p><p data-reactid=".qx01b9acu2.6.0:2"><span data-reactid=".qx01b9acu2.6.0:2.0">If you&#x27;re customizing your stats output or using webpack-stats-plugin, be sure to set </span><code data-reactid=".qx01b9acu2.6.0:2.1">chunkModules</code><span data-reactid=".qx01b9acu2.6.0:2.2"> to </span><code data-reactid=".qx01b9acu2.6.0:2.3">true</code><span data-reactid=".qx01b9acu2.6.0:2.4">.</span></p><h2 data-reactid=".qx01b9acu2.6.0:3">Try the Plugin!</h2><p data-reactid=".qx01b9acu2.6.0:4"><span data-reactid=".qx01b9acu2.6.0:4.0">This tool is also available as a webpack plugin. See </span><a href="https://github.com/chrisbateman/webpack-visualizer#plugin-usage" data-reactid=".qx01b9acu2.6.0:4.1">here</a><span data-reactid=".qx01b9acu2.6.0:4.2"> for usage details.</span></p><p data-reactid=".qx01b9acu2.6.0:5"><code data-reactid=".qx01b9acu2.6.0:5.0">npm install webpack-visualizer-plugin</code></p><h2 data-reactid=".qx01b9acu2.6.1">Disclaimer</h2><p data-reactid=".qx01b9acu2.6.2"> Webpack records the pre-minified size of each module (since minifying is done with a plugin rather than a loader). Since not all modules minify as efficiently as others, the perecentages displayed here are an approximation of the true, minfied numbers.</p><h2 data-reactid=".qx01b9acu2.6.3">Contribute!</h2><p data-reactid=".qx01b9acu2.6.4"><span data-reactid=".qx01b9acu2.6.4.0">This tool is still pretty new. Check it out on </span><a href="https://github.com/chrisbateman/webpack-visualizer" data-reactid=".qx01b9acu2.6.4.1">GitHub</a><span data-reactid=".qx01b9acu2.6.4.2">, and please </span><a href="https://github.com/chrisbateman/webpack-visualizer/issues" data-reactid=".qx01b9acu2.6.4.3">report issues or request features</a><span data-reactid=".qx01b9acu2.6.4.4">!</span></p><h2 data-reactid=".qx01b9acu2.6.5">Acknowledgements</h2><p data-reactid=".qx01b9acu2.6.6"><a href="https://github.com/hughsk/disc" data-reactid=".qx01b9acu2.6.6.0">Disc</a><span data-reactid=".qx01b9acu2.6.6.1"> for Browserify did this first. Thanks also to </span><a href="https://gist.github.com/kerryrodden/7090426" data-reactid=".qx01b9acu2.6.6.2">this example</a><span data-reactid=".qx01b9acu2.6.6.3"> from the D3 gallery for demonstating how to create sunburst charts.</span></p><h2 data-reactid=".qx01b9acu2.6.7">Comments, questions</h2><p data-reactid=".qx01b9acu2.6.8"><span data-reactid=".qx01b9acu2.6.8.0">Let me know! </span><a href="https://twitter.com/batemanchris/" data-reactid=".qx01b9acu2.6.8.1">@batemanchris</a></p></footer></div></div>
10+
<div id="App"><div data-reactid=".26d9wbhv99a" data-react-checksum="-418800543"><h1 data-reactid=".26d9wbhv99a.0">Webpack Visualizer</h1><div class="uploadArea uploadArea--needsUpload" data-reactid=".26d9wbhv99a.2"><div class="uploadArea-uploadMessage" data-reactid=".26d9wbhv99a.2.0"><p data-reactid=".26d9wbhv99a.2.0.0">Drop JSON file here or click to choose.</p><small data-reactid=".26d9wbhv99a.2.0.1">Files won&#x27;t be uploaded — your data stays in your browser.</small></div><input type="file" class="hiddenFileInput" data-reactid=".26d9wbhv99a.2.1"/></div><button class="destyledButton" style="margin-top:0.5em;" data-reactid=".26d9wbhv99a.3">Try a Demo</button><noscript data-reactid=".26d9wbhv99a.4"></noscript><footer data-reactid=".26d9wbhv99a.6"><h2 data-reactid=".26d9wbhv99a.6.0:0">How do I get stats JSON from webpack?</h2><p data-reactid=".26d9wbhv99a.6.0:1"><code data-reactid=".26d9wbhv99a.6.0:1.0">webpack --json &gt; stats.json</code></p><p data-reactid=".26d9wbhv99a.6.0:2"><span data-reactid=".26d9wbhv99a.6.0:2.0">If you&#x27;re customizing your stats output or using webpack-stats-plugin, be sure to set </span><code data-reactid=".26d9wbhv99a.6.0:2.1">chunkModules</code><span data-reactid=".26d9wbhv99a.6.0:2.2"> to </span><code data-reactid=".26d9wbhv99a.6.0:2.3">true</code><span data-reactid=".26d9wbhv99a.6.0:2.4">.</span></p><h2 data-reactid=".26d9wbhv99a.6.0:3">Try the Plugin!</h2><p data-reactid=".26d9wbhv99a.6.0:4"><span data-reactid=".26d9wbhv99a.6.0:4.0">This tool is also available as a webpack plugin. See </span><a href="https://github.com/chrisbateman/webpack-visualizer#plugin-usage" data-reactid=".26d9wbhv99a.6.0:4.1">here</a><span data-reactid=".26d9wbhv99a.6.0:4.2"> for usage details.</span></p><p data-reactid=".26d9wbhv99a.6.0:5"><code data-reactid=".26d9wbhv99a.6.0:5.0">npm install webpack-visualizer-plugin</code></p><h2 data-reactid=".26d9wbhv99a.6.1">Disclaimer</h2><p data-reactid=".26d9wbhv99a.6.2"> Webpack records the pre-minified size of each module (since minifying is done with a plugin rather than a loader). Since not all modules minify as efficiently as others, the percentages displayed here are a close approximation of the true, minfied numbers.</p><h2 data-reactid=".26d9wbhv99a.6.3">Contribute!</h2><p data-reactid=".26d9wbhv99a.6.4"><span data-reactid=".26d9wbhv99a.6.4.0">This tool is still pretty new. Check it out on </span><a href="https://github.com/chrisbateman/webpack-visualizer" data-reactid=".26d9wbhv99a.6.4.1">GitHub</a><span data-reactid=".26d9wbhv99a.6.4.2">, and please </span><a href="https://github.com/chrisbateman/webpack-visualizer/issues" data-reactid=".26d9wbhv99a.6.4.3">report issues or request features</a><span data-reactid=".26d9wbhv99a.6.4.4">!</span></p><h2 data-reactid=".26d9wbhv99a.6.5">Acknowledgements</h2><p data-reactid=".26d9wbhv99a.6.6"><a href="https://github.com/hughsk/disc" data-reactid=".26d9wbhv99a.6.6.0">Disc</a><span data-reactid=".26d9wbhv99a.6.6.1"> for Browserify did this first. Thanks also to </span><a href="https://gist.github.com/kerryrodden/7090426" data-reactid=".26d9wbhv99a.6.6.2">this example</a><span data-reactid=".26d9wbhv99a.6.6.3"> from the D3 gallery for demonstating how to create sunburst charts.</span></p><h2 data-reactid=".26d9wbhv99a.6.7">Comments, questions</h2><p data-reactid=".26d9wbhv99a.6.8"><span data-reactid=".26d9wbhv99a.6.8.0">Let me know! </span><a href="https://twitter.com/batemanchris/" data-reactid=".26d9wbhv99a.6.8.1">@batemanchris</a></p></footer></div></div>
1111
<script src="build.js"></script>
1212
<script>
1313
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

‎beta/stats-demo.json‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,36 @@
2121
"emitted": true
2222
}
2323
],
24-
"chunks": [],
24+
"chunks": [
25+
{
26+
"id": 0,
27+
"rendered": true,
28+
"initial": true,
29+
"entry": true,
30+
"extraAsync": false,
31+
"size": 663484,
32+
"names": [
33+
"main"
34+
],
35+
"files": [
36+
"bundle.js",
37+
"styles.css"
38+
],
39+
"hash": "f7113ae1bdaa36ae48da",
40+
"parents": [],
41+
"origins": [
42+
{
43+
"moduleId": 0,
44+
"module": "multi main",
45+
"moduleIdentifier": "multi main",
46+
"moduleName": "multi main",
47+
"loc": "",
48+
"name": "main",
49+
"reasons": []
50+
}
51+
]
52+
}
53+
],
2554
"modules": [
2655
{
2756
"id": 0,

‎beta/style.css‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -47,42 +47,50 @@ code {
4747
margin: 1em 0;
4848
}
4949

50-
.chart {
50+
.uploadArea {
5151
position: relative;
5252
margin: 0 auto;
5353
min-height: 350px;
5454
}
55-
.chart--large {
56-
width: 950px;
57-
margin-left: -100px;
58-
}
59-
60-
.chart--needsUpload {
55+
.uploadArea--needsUpload {
6156
border: 2px dashed #AC9062;
6257
border-radius: 10px;
6358
cursor: pointer;
6459
}
6560

66-
.chart--dragging {
61+
.uploadArea--dragging {
6762
border-style: solid;
6863
background-color: #E6D4B6;
6964
}
7065

71-
.chart-uploadMessage {
66+
.uploadArea-uploadMessage {
7267
display: none;
7368
font-size: 1.9em;
7469
text-align: center;
7570
margin-top: 100px;
7671
pointer-events: none;
7772
}
78-
.chart--needsUpload .chart-uploadMessage {
73+
.uploadArea--needsUpload .uploadArea-uploadMessage {
7974
display: block;
8075
}
8176

82-
.chart-uploadMessage small {
77+
.uploadArea-uploadMessage small {
8378
font-size: 0.5em;
8479
}
8580

81+
82+
.chart {
83+
position: relative;
84+
margin: 0 auto;
85+
min-height: 350px;
86+
}
87+
.chart--large {
88+
width: 950px;
89+
margin-left: -100px;
90+
}
91+
92+
93+
8694
.hiddenFileInput {
8795
width: 0px;
8896
height: 0px;
@@ -128,7 +136,7 @@ code {
128136
}
129137

130138
.details-subText {
131-
min-height: 1em;
139+
min-height: 1.2em;
132140
}
133141

134142
.details-percentage {

0 commit comments

Comments
 (0)