Skip to content

Commit 1652493

Browse files
sokrasokra
committed
add multiple-entry-points example webpack#15 
1 parent 0b454de commit 1652493

File tree

9 files changed

+386
-2
lines changed

9 files changed

+386
-2
lines changed

‎examples/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,10 @@ example demonstrating creating WebWorkers with webpack and the worker-loader.
5656

5757
example demonstrating localization.
5858

59+
## multiple-entry-points
60+
61+
example demonstrating multiple entry points with Code Splitting.
62+
5963
# Requests
6064

6165
If you think a example is missing, please report it as issue. :)

‎examples/build-common.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ var path = require("path");
1111

1212
var extraArgs = "";
1313

14-
cp.exec("node ../../bin/webpack.js --display-reasons --display-chunks -p "+extraArgs+" ./example.js js/output.js", function (error, stdout, stderr) {
14+
var targetArgs = global.NO_TARGET_ARGS?"":" ./example.js js/output.js"
15+
cp.exec("node ../../bin/webpack.js --display-reasons --display-chunks -p "+extraArgs+targetArgs, function (error, stdout, stderr) {
1516
if(stderr)
1617
console.log(stderr);
1718
if (error !== null)
1819
console.log(error);
1920
var readme = tc(fs.readFileSync(require("path").join(process.cwd(), "template.md"), "utf-8"), process.cwd(), stdout.replace(/[\r\n]*$/, ""), "min");
20-
cp.exec("node ../../bin/webpack.js --display-reasons --display-chunks --optimize-occurence-order --output-pathinfo "+extraArgs+" ./example.js js/output.js", function (error, stdout, stderr) {
21+
cp.exec("node ../../bin/webpack.js --display-reasons --display-chunks --optimize-occurence-order --output-pathinfo "+extraArgs+targetArgs, function (error, stdout, stderr) {
2122
console.log(stdout);
2223
if(stderr)
2324
console.log(stderr);

‎examples/multiple-entry-points/README.md‎

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
# pageA.js
2+
3+
``` javascript
4+
require(["./shared"], function(shared) {
5+
shared("This is page A");
6+
});
7+
```
8+
9+
# pageB.js
10+
11+
``` javascript
12+
require.ensure(["./shared"], function(require) {
13+
var shared = require("./shared");
14+
shared("This is page B");
15+
});
16+
```
17+
18+
# webpack.config.js
19+
20+
``` javascript
21+
var path = require("path");
22+
module.exports = {
23+
entry: {
24+
pageA: "./pageA",
25+
pageB: "./pageB"
26+
},
27+
output: {
28+
path: path.join(__dirname, "js"),
29+
filename: "[name].bundle.js",
30+
chunkFilename: "[id].chunk.js"
31+
}
32+
}
33+
```
34+
35+
# js/pageA.bundle.js
36+
37+
``` javascript
38+
/******/ (function(modules) { // webpackBootstrap
39+
/******/ // The module cache
40+
/******/ var installedModules = {};
41+
/******/
42+
/******/ // object to store loaded and loading chunks
43+
/******/ // "0" means "already loaded"
44+
/******/ // Array means "loading", array contains callbacks
45+
/******/ var installedChunks = {0:0};
46+
/******/
47+
/******/ // The require function
48+
/******/ function require(moduleId) {
49+
/******/ // Check if module is in cache
50+
/******/ if(installedModules[moduleId])
51+
/******/ return installedModules[moduleId].exports;
52+
/******/
53+
/******/ // Create a new module (and put it into the cache)
54+
/******/ var module = installedModules[moduleId] = {
55+
/******/ exports: {},
56+
/******/ id: moduleId,
57+
/******/ loaded: false
58+
/******/ };
59+
/******/
60+
/******/ // Execute the module function
61+
/******/ modules[moduleId].call(module.exports, module, module.exports, require);
62+
/******/
63+
/******/ // Flag the module as loaded
64+
/******/ module.loaded = true;
65+
/******/
66+
/******/ // Return the exports of the module
67+
/******/ return module.exports;
68+
/******/ }
69+
/******/
70+
/******/ // This file contains only the entry chunk.
71+
/******/ // The chunk loading function for additional chunks
72+
/******/ require.e = function requireEnsure(chunkId, callback) {
73+
/******/ // "0" is the signal for "already loaded"
74+
/******/ if(installedChunks[chunkId] === 0)
75+
/******/ return callback.call(null, require);
76+
/******/
77+
/******/ // an array means "currently loading".
78+
/******/ if(installedChunks[chunkId] !== undefined) {
79+
/******/ installedChunks[chunkId].push(callback);
80+
/******/ } else {
81+
/******/ // start chunk loading
82+
/******/ installedChunks[chunkId] = [callback];
83+
/******/ var head = document.getElementsByTagName('head')[0];
84+
/******/ var script = document.createElement('script');
85+
/******/ script.type = 'text/javascript';
86+
/******/ script.charset = 'utf-8';
87+
/******/ script.src = modules.c + "" + chunkId + ".chunk.js";
88+
/******/ head.appendChild(script);
89+
/******/ }
90+
/******/ };
91+
/******/
92+
/******/ // expose the modules object (__webpack_modules__)
93+
/******/ require.modules = modules;
94+
/******/
95+
/******/ // expose the module cache
96+
/******/ require.cache = installedModules;
97+
/******/
98+
/******/ // install a JSONP callback for chunk loading
99+
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
100+
/******/ // add "moreModules" to the modules object,
101+
/******/ // then flag all "chunkIds" as loaded and fire callback
102+
/******/ var moduleId, chunkId, callbacks = [];
103+
/******/ while(chunkIds.length) {
104+
/******/ chunkId = chunkIds.shift();
105+
/******/ if(installedChunks[chunkId])
106+
/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);
107+
/******/ installedChunks[chunkId] = 0;
108+
/******/ }
109+
/******/ for(moduleId in moreModules) {
110+
/******/ modules[moduleId] = moreModules[moduleId];
111+
/******/ }
112+
/******/ while(callbacks.length)
113+
/******/ callbacks.shift().call(null, require);
114+
/******/ };
115+
/******/
116+
/******/ // Load entry module and return exports
117+
/******/ return require(0);
118+
/******/ })
119+
/************************************************************************/
120+
/******/ ({
121+
/******/ // __webpack_public_path__
122+
/******/ c: "",
123+
124+
/***/ 0:
125+
/*!******************!*\
126+
!*** ./pageA.js ***!
127+
\******************/
128+
/***/ function(module, exports, require) {
129+
130+
require.e/* require */(1, function(require) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [(require(/*! ./shared */ 1))]; (function(shared) {
131+
shared("This is page A");
132+
}.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});
133+
134+
/***/ }
135+
/******/ })
136+
```
137+
138+
# js/pageB.bundle.js
139+
140+
``` javascript
141+
/******/ (function(modules) { // webpackBootstrap
142+
/******/ // The module cache
143+
/******/ var installedModules = {};
144+
/******/
145+
/******/ // object to store loaded and loading chunks
146+
/******/ // "0" means "already loaded"
147+
/******/ // Array means "loading", array contains callbacks
148+
/******/ var installedChunks = {0:0};
149+
/******/
150+
/******/ // The require function
151+
/******/ function require(moduleId) {
152+
/******/ // Check if module is in cache
153+
/******/ if(installedModules[moduleId])
154+
/******/ return installedModules[moduleId].exports;
155+
/******/
156+
/******/ // Create a new module (and put it into the cache)
157+
/******/ var module = installedModules[moduleId] = {
158+
/******/ exports: {},
159+
/******/ id: moduleId,
160+
/******/ loaded: false
161+
/******/ };
162+
/******/
163+
/******/ // Execute the module function
164+
/******/ modules[moduleId].call(module.exports, module, module.exports, require);
165+
/******/
166+
/******/ // Flag the module as loaded
167+
/******/ module.loaded = true;
168+
/******/
169+
/******/ // Return the exports of the module
170+
/******/ return module.exports;
171+
/******/ }
172+
/******/
173+
/******/ // This file contains only the entry chunk.
174+
/******/ // The chunk loading function for additional chunks
175+
/******/ require.e = function requireEnsure(chunkId, callback) {
176+
/******/ // "0" is the signal for "already loaded"
177+
/******/ if(installedChunks[chunkId] === 0)
178+
/******/ return callback.call(null, require);
179+
/******/
180+
/******/ // an array means "currently loading".
181+
/******/ if(installedChunks[chunkId] !== undefined) {
182+
/******/ installedChunks[chunkId].push(callback);
183+
/******/ } else {
184+
/******/ // start chunk loading
185+
/******/ installedChunks[chunkId] = [callback];
186+
/******/ var head = document.getElementsByTagName('head')[0];
187+
/******/ var script = document.createElement('script');
188+
/******/ script.type = 'text/javascript';
189+
/******/ script.charset = 'utf-8';
190+
/******/ script.src = modules.c + "" + chunkId + ".chunk.js";
191+
/******/ head.appendChild(script);
192+
/******/ }
193+
/******/ };
194+
/******/
195+
/******/ // expose the modules object (__webpack_modules__)
196+
/******/ require.modules = modules;
197+
/******/
198+
/******/ // expose the module cache
199+
/******/ require.cache = installedModules;
200+
/******/
201+
/******/ // install a JSONP callback for chunk loading
202+
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
203+
/******/ // add "moreModules" to the modules object,
204+
/******/ // then flag all "chunkIds" as loaded and fire callback
205+
/******/ var moduleId, chunkId, callbacks = [];
206+
/******/ while(chunkIds.length) {
207+
/******/ chunkId = chunkIds.shift();
208+
/******/ if(installedChunks[chunkId])
209+
/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);
210+
/******/ installedChunks[chunkId] = 0;
211+
/******/ }
212+
/******/ for(moduleId in moreModules) {
213+
/******/ modules[moduleId] = moreModules[moduleId];
214+
/******/ }
215+
/******/ while(callbacks.length)
216+
/******/ callbacks.shift().call(null, require);
217+
/******/ };
218+
/******/
219+
/******/ // Load entry module and return exports
220+
/******/ return require(0);
221+
/******/ })
222+
/************************************************************************/
223+
/******/ ({
224+
/******/ // __webpack_public_path__
225+
/******/ c: "",
226+
227+
/***/ 0:
228+
/*!******************!*\
229+
!*** ./pageB.js ***!
230+
\******************/
231+
/***/ function(module, exports, require) {
232+
233+
require.e/*nsure*/(1/* duplicate */, function(require) {
234+
var shared = require(/*! ./shared */ 1);
235+
shared("This is page B");
236+
});
237+
238+
/***/ }
239+
/******/ })
240+
```
241+
242+
# js/1.chunk.js
243+
244+
``` javascript
245+
webpackJsonp([1],
246+
{
247+
248+
/***/ 1:
249+
/*!*******************!*\
250+
!*** ./shared.js ***!
251+
\*******************/
252+
/***/ function(module, exports, require) {
253+
254+
module.exports = function(msg) {
255+
console.log(msg);
256+
};
257+
258+
/***/ }
259+
260+
}
261+
)
262+
```
263+
264+
# Info
265+
266+
## Uncompressed
267+
268+
```
269+
Hash: 5a0cf79fbce895020932
270+
Version: webpack 0.11.6
271+
Time: 47ms
272+
Asset Size Chunks Chunk Names
273+
pageB.bundle.js 3551 0 [emitted] pageB
274+
pageA.bundle.js 3631 0 [emitted] pageA
275+
1.chunk.js 219 1 [emitted]
276+
chunk {0} pageB.bundle.js (pageB) 114 [rendered]
277+
[0] ./pageB.js 114 {0} [built]
278+
chunk {0} pageA.bundle.js (pageA) 71 [rendered]
279+
[0] ./pageA.js 71 {0} [built]
280+
chunk {1} 1.chunk.js 54 {0} {0} [rendered]
281+
[1] ./shared.js 54 {1} [built]
282+
require.ensure item ./shared [0] ./pageB.js 1:0-4:2
283+
cjs require ./shared [0] ./pageB.js 2:14-33
284+
amd require ./shared [0] ./pageA.js 1:0-3:2
285+
```
286+
287+
## Minimized (uglify-js, no zip)
288+
289+
```
290+
Hash: 19a8355b8a970c621db3
291+
Version: webpack 0.11.6
292+
Time: 168ms
293+
Asset Size Chunks Chunk Names
294+
pageB.bundle.js 722 0 [emitted] pageB
295+
pageA.bundle.js 753 0 [emitted] pageA
296+
1.chunk.js 73 1 [emitted]
297+
chunk {0} pageB.bundle.js (pageB) 114 [rendered]
298+
[0] ./pageB.js 114 {0} [built]
299+
chunk {0} pageA.bundle.js (pageA) 71 [rendered]
300+
[0] ./pageA.js 71 {0} [built]
301+
chunk {1} 1.chunk.js 54 {0} {0} [rendered]
302+
[1] ./shared.js 54 {1} [built]
303+
require.ensure item ./shared [0] ./pageB.js 1:0-4:2
304+
cjs require ./shared [0] ./pageB.js 2:14-33
305+
amd require ./shared [0] ./pageA.js 1:0-3:2
306+
```

‎examples/multiple-entry-points/build.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
global.NO_TARGET_ARGS = true;
2+
require("../build-common");

‎examples/multiple-entry-points/pageA.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
require(["./shared"], function(shared) {
2+
shared("This is page A");
3+
});

‎examples/multiple-entry-points/pageB.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
require.ensure(["./shared"], function(require) {
2+
var shared = require("./shared");
3+
shared("This is page B");
4+
});

‎examples/multiple-entry-points/shared.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = function(msg) {
2+
console.log(msg);
3+
};

0 commit comments

Comments
 (0)