Skip to content

Commit 3be44fb

Browse files
sokrasokra
committed
updated examples
1 parent 1fa9169 commit 3be44fb

File tree

2 files changed

+410
-20
lines changed

2 files changed

+410
-20
lines changed

‎examples/multiple-commons-chunks/README.md‎

Lines changed: 390 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,390 @@
1+
# pageA.js
2+
3+
``` javascript
4+
require("./modules/a-b-c");
5+
require("./modules/a-b");
6+
require("./modules/a-c");
7+
8+
```
9+
10+
# adminPageA.js
11+
12+
``` javascript
13+
require("./modules/a-b-c");
14+
require("./modules/admin");
15+
```
16+
17+
# webpack.config.js
18+
19+
``` javascript
20+
var path = require("path");
21+
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
22+
module.exports = {
23+
entry: {
24+
pageA: "./pageA",
25+
pageB: "./pageB",
26+
pageC: "./pageC",
27+
adminPageA: "./adminPageA",
28+
adminPageB: "./adminPageB",
29+
adminPageC: "./adminPageC",
30+
},
31+
output: {
32+
path: path.join(__dirname, "js"),
33+
filename: "[name].js"
34+
},
35+
plugins: [
36+
new CommonsChunkPlugin("admin-commons.js", ["adminPageA", "adminPageB"]),
37+
new CommonsChunkPlugin("commons.js", ["pageA", "pageB", "admin-commons.js"], 2),
38+
new CommonsChunkPlugin("c-commons.js", ["pageC", "adminPageC"]),
39+
]
40+
}
41+
```
42+
43+
# pageA.html
44+
45+
``` html
46+
<html>
47+
<head></head>
48+
<body>
49+
<script src="js/commons.js" charset="utf-8"></script>
50+
<script src="js/pageA.js" charset="utf-8"></script>
51+
</body>
52+
</html>
53+
```
54+
55+
# adminPageA.html
56+
57+
``` html
58+
<html>
59+
<head></head>
60+
<body>
61+
<script src="js/commons.js" charset="utf-8"></script>
62+
<script src="js/admin-commons.js" charset="utf-8"></script>
63+
<script src="js/adminPageA.js" charset="utf-8"></script>
64+
</body>
65+
</html>
66+
```
67+
68+
# js/commons.js
69+
70+
``` javascript
71+
/******/ (function(modules) { // webpackBootstrap
72+
/******/ // The module cache
73+
/******/ var installedModules = {};
74+
/******/
75+
/******/ // object to store loaded and loading chunks
76+
/******/ // "0" means "already loaded"
77+
/******/ // Array means "loading", array contains callbacks
78+
/******/ var installedChunks = {0:[function(require){require(0);}]};
79+
/******/
80+
/******/ // The require function
81+
/******/ function require(moduleId) {
82+
/******/ // Check if module is in cache
83+
/******/ if(installedModules[moduleId])
84+
/******/ return installedModules[moduleId].exports;
85+
/******/
86+
/******/ // Create a new module (and put it into the cache)
87+
/******/ var module = installedModules[moduleId] = {
88+
/******/ exports: {},
89+
/******/ id: moduleId,
90+
/******/ loaded: false
91+
/******/ };
92+
/******/
93+
/******/ // Execute the module function
94+
/******/ modules[moduleId].call(module.exports, module, module.exports, require);
95+
/******/
96+
/******/ // Flag the module as loaded
97+
/******/ module.loaded = true;
98+
/******/
99+
/******/ // Return the exports of the module
100+
/******/ return module.exports;
101+
/******/ }
102+
/******/
103+
/******/ // This file contains only the entry chunk.
104+
/******/ // The chunk loading function for additional chunks
105+
/******/ require.e = function requireEnsure(chunkId, callback) {
106+
/******/ // "0" is the signal for "already loaded"
107+
/******/ if(installedChunks[chunkId] === 0)
108+
/******/ return callback.call(null, require);
109+
/******/
110+
/******/ // an array means "currently loading".
111+
/******/ if(installedChunks[chunkId] !== undefined) {
112+
/******/ installedChunks[chunkId].push(callback);
113+
/******/ } else {
114+
/******/ // start chunk loading
115+
/******/ installedChunks[chunkId] = [callback];
116+
/******/ var head = document.getElementsByTagName('head')[0];
117+
/******/ var script = document.createElement('script');
118+
/******/ script.type = 'text/javascript';
119+
/******/ script.charset = 'utf-8';
120+
/******/ script.src = modules.c + "" + chunkId + "..js";
121+
/******/ head.appendChild(script);
122+
/******/ }
123+
/******/ };
124+
/******/
125+
/******/ // expose the modules object (__webpack_modules__)
126+
/******/ require.modules = modules;
127+
/******/
128+
/******/ // expose the module cache
129+
/******/ require.cache = installedModules;
130+
/******/
131+
/******/ // install a JSONP callback for chunk loading
132+
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
133+
/******/ // add "moreModules" to the modules object,
134+
/******/ // then flag all "chunkIds" as loaded and fire callback
135+
/******/ var moduleId, chunkId, callbacks = [];
136+
/******/ while(chunkIds.length) {
137+
/******/ chunkId = chunkIds.shift();
138+
/******/ if(installedChunks[chunkId])
139+
/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);
140+
/******/ installedChunks[chunkId] = 0;
141+
/******/ }
142+
/******/ for(moduleId in moreModules) {
143+
/******/ modules[moduleId] = moreModules[moduleId];
144+
/******/ }
145+
/******/ while(callbacks.length)
146+
/******/ callbacks.shift().call(null, require);
147+
/******/ };
148+
/******/ })
149+
/************************************************************************/
150+
/******/ ({
151+
/******/ // __webpack_public_path__
152+
/******/ c: "",
153+
154+
/***/ 1:
155+
/*!**************************!*\
156+
!*** ./modules/a-b-c.js ***!
157+
\**************************/
158+
/***/ function(module, exports, require) {
159+
160+
161+
162+
/***/ },
163+
164+
/***/ 5:
165+
/*!************************!*\
166+
!*** ./modules/a-b.js ***!
167+
\************************/
168+
/***/ function(module, exports, require) {
169+
170+
171+
172+
/***/ }
173+
/******/ })
174+
```
175+
176+
# js/pageA.js
177+
178+
``` javascript
179+
webpackJsonp([0],
180+
{
181+
182+
/***/ 0:
183+
/*!******************!*\
184+
!*** ./pageA.js ***!
185+
\******************/
186+
/***/ function(module, exports, require) {
187+
188+
require(/*! ./modules/a-b-c */ 1);
189+
require(/*! ./modules/a-b */ 5);
190+
require(/*! ./modules/a-c */ 3);
191+
192+
193+
/***/ },
194+
195+
/***/ 3:
196+
/*!************************!*\
197+
!*** ./modules/a-c.js ***!
198+
\************************/
199+
/***/ function(module, exports, require) {
200+
201+
202+
203+
/***/ }
204+
205+
}
206+
)
207+
```
208+
209+
# js/admin-commons.js
210+
211+
``` javascript
212+
webpackJsonp([1],
213+
{
214+
215+
/***/ 2:
216+
/*!**************************!*\
217+
!*** ./modules/admin.js ***!
218+
\**************************/
219+
/***/ function(module, exports, require) {
220+
221+
222+
223+
/***/ }
224+
225+
}
226+
)
227+
```
228+
229+
# js/adminPageA.js
230+
231+
``` javascript
232+
webpackJsonp([0],
233+
{
234+
235+
/***/ 0:
236+
/*!***********************!*\
237+
!*** ./adminPageA.js ***!
238+
\***********************/
239+
/***/ function(module, exports, require) {
240+
241+
require(/*! ./modules/a-b-c */ 1);
242+
require(/*! ./modules/admin */ 2);
243+
244+
/***/ }
245+
246+
}
247+
)
248+
```
249+
250+
# Info
251+
252+
## Uncompressed
253+
254+
```
255+
Hash: 2123054f0cb0b4b6b02e
256+
Version: webpack 0.11.10
257+
Time: 98ms
258+
Asset Size Chunks Chunk Names
259+
pageC.js 577 0 [emitted] pageC
260+
pageB.js 422 0 [emitted] pageB
261+
pageA.js 422 0 [emitted] pageA
262+
adminPageC.js 409 0, 1 [emitted] adminPageC
263+
adminPageB.js 246 0 [emitted] adminPageB
264+
adminPageA.js 246 0 [emitted] adminPageA
265+
admin-commons.js 184 1 [emitted] admin-commons.js
266+
commons.js 3534 2, 3 [emitted] commons.js
267+
c-commons.js 3379 3 [emitted] c-commons.js
268+
chunk {0} pageC.js (pageC) 83 {3} [rendered]
269+
[0] ./pageC.js 83 {0} [built]
270+
[3] ./modules/a-c.js 0 {0} {0} [built]
271+
cjs require ./modules/a-c [0] ./pageA.js 3:0-24
272+
cjs require ./modules/a-c [0] ./pageC.js 3:0-24
273+
[4] ./modules/b-c.js 0 {0} {0} [built]
274+
cjs require ./modules/b-c [0] ./pageB.js 3:0-24
275+
cjs require ./modules/b-c [0] ./pageC.js 2:0-24
276+
chunk {0} pageB.js (pageB) 83 {2} [rendered]
277+
[0] ./pageB.js 83 {0} [built]
278+
[4] ./modules/b-c.js 0 {0} {0} [built]
279+
cjs require ./modules/b-c [0] ./pageB.js 3:0-24
280+
cjs require ./modules/b-c [0] ./pageC.js 2:0-24
281+
chunk {0} pageA.js (pageA) 83 {2} [rendered]
282+
[0] ./pageA.js 83 {0} [built]
283+
[3] ./modules/a-c.js 0 {0} {0} [built]
284+
cjs require ./modules/a-c [0] ./pageA.js 3:0-24
285+
cjs require ./modules/a-c [0] ./pageC.js 3:0-24
286+
chunk {0} adminPageC.js (adminPageC) 56 {3} [rendered]
287+
[0] ./adminPageC.js 56 {0} [built]
288+
[2] ./modules/admin.js 0 {0} {1} [built]
289+
cjs require ./modules/admin [0] ./adminPageA.js 2:0-26
290+
cjs require ./modules/admin [0] ./adminPageB.js 2:0-26
291+
cjs require ./modules/admin [0] ./adminPageC.js 2:0-26
292+
chunk {0} adminPageB.js (adminPageB) 56 {1} [rendered]
293+
[0] ./adminPageB.js 56 {0} [built]
294+
chunk {0} adminPageA.js (adminPageA) 56 {1} [rendered]
295+
[0] ./adminPageA.js 56 {0} [built]
296+
chunk {1} admin-commons.js (admin-commons.js) 0 {2} [rendered]
297+
[2] ./modules/admin.js 0 {0} {1} [built]
298+
cjs require ./modules/admin [0] ./adminPageA.js 2:0-26
299+
cjs require ./modules/admin [0] ./adminPageB.js 2:0-26
300+
cjs require ./modules/admin [0] ./adminPageC.js 2:0-26
301+
chunk {2} commons.js (commons.js) 0 [rendered]
302+
[1] ./modules/a-b-c.js 0 {2} {3} [built]
303+
cjs require ./modules/a-b-c [0] ./pageA.js 1:0-26
304+
cjs require ./modules/a-b-c [0] ./pageB.js 1:0-26
305+
cjs require ./modules/a-b-c [0] ./pageC.js 1:0-26
306+
cjs require ./modules/a-b-c [0] ./adminPageA.js 1:0-26
307+
cjs require ./modules/a-b-c [0] ./adminPageB.js 1:0-26
308+
cjs require ./modules/a-b-c [0] ./adminPageC.js 1:0-26
309+
[5] ./modules/a-b.js 0 {2} [built]
310+
cjs require ./modules/a-b [0] ./pageA.js 2:0-24
311+
cjs require ./modules/a-b [0] ./pageB.js 2:0-24
312+
chunk {3} c-commons.js (c-commons.js) 0 [rendered]
313+
[1] ./modules/a-b-c.js 0 {2} {3} [built]
314+
cjs require ./modules/a-b-c [0] ./pageA.js 1:0-26
315+
cjs require ./modules/a-b-c [0] ./pageB.js 1:0-26
316+
cjs require ./modules/a-b-c [0] ./pageC.js 1:0-26
317+
cjs require ./modules/a-b-c [0] ./adminPageA.js 1:0-26
318+
cjs require ./modules/a-b-c [0] ./adminPageB.js 1:0-26
319+
cjs require ./modules/a-b-c [0] ./adminPageC.js 1:0-26
320+
```
321+
322+
## Minimized (uglify-js, no zip)
323+
324+
```
325+
Hash: 2123054f0cb0b4b6b02e
326+
Version: webpack 0.11.10
327+
Time: 232ms
328+
Asset Size Chunks Chunk Names
329+
pageC.js 84 0 [emitted] pageC
330+
pageB.js 69 0 [emitted] pageB
331+
pageA.js 69 0 [emitted] pageA
332+
adminPageC.js 66 0, 1 [emitted] adminPageC
333+
adminPageB.js 49 0 [emitted] adminPageB
334+
adminPageA.js 49 0 [emitted] adminPageA
335+
admin-commons.js 35 1 [emitted] admin-commons.js
336+
commons.js 683 2, 3 [emitted] commons.js
337+
c-commons.js 668 3 [emitted] c-commons.js
338+
chunk {0} pageC.js (pageC) 83 {3} [rendered]
339+
[0] ./pageC.js 83 {0} [built]
340+
[3] ./modules/a-c.js 0 {0} {0} [built]
341+
cjs require ./modules/a-c [0] ./pageC.js 3:0-24
342+
cjs require ./modules/a-c [0] ./pageA.js 3:0-24
343+
[4] ./modules/b-c.js 0 {0} {0} [built]
344+
cjs require ./modules/b-c [0] ./pageB.js 3:0-24
345+
cjs require ./modules/b-c [0] ./pageC.js 2:0-24
346+
chunk {0} pageB.js (pageB) 83 {2} [rendered]
347+
[0] ./pageB.js 83 {0} [built]
348+
[4] ./modules/b-c.js 0 {0} {0} [built]
349+
cjs require ./modules/b-c [0] ./pageB.js 3:0-24
350+
cjs require ./modules/b-c [0] ./pageC.js 2:0-24
351+
chunk {0} pageA.js (pageA) 83 {2} [rendered]
352+
[0] ./pageA.js 83 {0} [built]
353+
[3] ./modules/a-c.js 0 {0} {0} [built]
354+
cjs require ./modules/a-c [0] ./pageC.js 3:0-24
355+
cjs require ./modules/a-c [0] ./pageA.js 3:0-24
356+
chunk {0} adminPageC.js (adminPageC) 56 {3} [rendered]
357+
[0] ./adminPageC.js 56 {0} [built]
358+
[2] ./modules/admin.js 0 {0} {1} [built]
359+
cjs require ./modules/admin [0] ./adminPageA.js 2:0-26
360+
cjs require ./modules/admin [0] ./adminPageB.js 2:0-26
361+
cjs require ./modules/admin [0] ./adminPageC.js 2:0-26
362+
chunk {0} adminPageB.js (adminPageB) 56 {1} [rendered]
363+
[0] ./adminPageB.js 56 {0} [built]
364+
chunk {0} adminPageA.js (adminPageA) 56 {1} [rendered]
365+
[0] ./adminPageA.js 56 {0} [built]
366+
chunk {1} admin-commons.js (admin-commons.js) 0 {2} [rendered]
367+
[2] ./modules/admin.js 0 {0} {1} [built]
368+
cjs require ./modules/admin [0] ./adminPageA.js 2:0-26
369+
cjs require ./modules/admin [0] ./adminPageB.js 2:0-26
370+
cjs require ./modules/admin [0] ./adminPageC.js 2:0-26
371+
chunk {2} commons.js (commons.js) 0 [rendered]
372+
[1] ./modules/a-b-c.js 0 {2} {3} [built]
373+
cjs require ./modules/a-b-c [0] ./pageB.js 1:0-26
374+
cjs require ./modules/a-b-c [0] ./pageC.js 1:0-26
375+
cjs require ./modules/a-b-c [0] ./adminPageA.js 1:0-26
376+
cjs require ./modules/a-b-c [0] ./adminPageB.js 1:0-26
377+
cjs require ./modules/a-b-c [0] ./pageA.js 1:0-26
378+
cjs require ./modules/a-b-c [0] ./adminPageC.js 1:0-26
379+
[5] ./modules/a-b.js 0 {2} [built]
380+
cjs require ./modules/a-b [0] ./pageB.js 2:0-24
381+
cjs require ./modules/a-b [0] ./pageA.js 2:0-24
382+
chunk {3} c-commons.js (c-commons.js) 0 [rendered]
383+
[1] ./modules/a-b-c.js 0 {2} {3} [built]
384+
cjs require ./modules/a-b-c [0] ./pageB.js 1:0-26
385+
cjs require ./modules/a-b-c [0] ./pageC.js 1:0-26
386+
cjs require ./modules/a-b-c [0] ./adminPageA.js 1:0-26
387+
cjs require ./modules/a-b-c [0] ./adminPageB.js 1:0-26
388+
cjs require ./modules/a-b-c [0] ./pageA.js 1:0-26
389+
cjs require ./modules/a-b-c [0] ./adminPageC.js 1:0-26
390+
```

0 commit comments

Comments
 (0)