Skip to content

Commit 4d25d52

Browse files
sokrasokra
committed
plugin to extract common modules
from multiple entry points webpack#128
1 parent fc157ae commit 4d25d52

File tree

11 files changed

+205
-147
lines changed

11 files changed

+205
-147
lines changed

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

Lines changed: 102 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# pageA.js
22

33
``` javascript
4+
var common = require("./common");
45
require(["./shared"], function(shared) {
56
shared("This is page A");
67
});
@@ -9,6 +10,7 @@ require(["./shared"], function(shared) {
910
# pageB.js
1011

1112
``` javascript
13+
var common = require("./common");
1214
require.ensure(["./shared"], function(require) {
1315
var shared = require("./shared");
1416
shared("This is page B");
@@ -19,6 +21,7 @@ require.ensure(["./shared"], function(require) {
1921

2022
``` javascript
2123
var path = require("path");
24+
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
2225
module.exports = {
2326
entry: {
2427
pageA: "./pageA",
@@ -27,12 +30,28 @@ module.exports = {
2730
output: {
2831
path: path.join(__dirname, "js"),
2932
filename: "[name].bundle.js",
30-
chunkFilename: "[id].chunk.js"
31-
}
33+
chunkFilename: "[id].chunk.js",
34+
namedChunkFilename: "[name].chunk.js"
35+
},
36+
plugins: [
37+
new CommonsChunkPlugin("commons")
38+
]
3239
}
3340
```
3441

35-
# js/pageA.bundle.js
42+
# pageA.html
43+
44+
``` html
45+
<html>
46+
<head></head>
47+
<body>
48+
<script src="js/commons.bundle.js" charset="utf-8"></script>
49+
<script src="js/pageA.chunk.js" charset="utf-8"></script>
50+
</body>
51+
</html>
52+
```
53+
54+
# js/commons.bundle.js
3655

3756
``` javascript
3857
/******/ (function(modules) { // webpackBootstrap
@@ -42,7 +61,7 @@ module.exports = {
4261
/******/ // object to store loaded and loading chunks
4362
/******/ // "0" means "already loaded"
4463
/******/ // Array means "loading", array contains callbacks
45-
/******/ var installedChunks = {0:0};
64+
/******/ var installedChunks = {0:[function(require){require(0);}]};
4665
/******/
4766
/******/ // The require function
4867
/******/ function require(moduleId) {
@@ -112,131 +131,69 @@ module.exports = {
112131
/******/ while(callbacks.length)
113132
/******/ callbacks.shift().call(null, require);
114133
/******/ };
115-
/******/
116-
/******/ // Load entry module and return exports
117-
/******/ return require(0);
118134
/******/ })
119135
/************************************************************************/
120136
/******/ ({
121137
/******/ // __webpack_public_path__
122138
/******/ c: "",
123139

140+
/***/ 1:
141+
/*!*******************!*\
142+
!*** ./common.js ***!
143+
\*******************/
144+
/***/ function(module, exports, require) {
145+
146+
module.exports = "Common";
147+
148+
/***/ }
149+
/******/ })
150+
```
151+
152+
# js/pageA.chunk.js
153+
154+
``` javascript
155+
webpackJsonp([0],
156+
{
157+
124158
/***/ 0:
125159
/*!******************!*\
126160
!*** ./pageA.js ***!
127161
\******************/
128162
/***/ function(module, exports, require) {
129163

130-
require.e/* require */(1, function(require) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [(require(/*! ./shared */ 1))]; (function(shared) {
164+
var common = require(/*! ./common */ 1);
165+
require.e/* require */(1/* duplicate */, function(require) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [(require(/*! ./shared */ 2))]; (function(shared) {
131166
shared("This is page A");
132167
}.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});
133168

134169
/***/ }
135-
/******/ })
170+
171+
}
172+
)
136173
```
137174

138-
# js/pageB.bundle.js
175+
# js/pageB.chunk.js
139176

140177
``` 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: "",
178+
webpackJsonp([0],
179+
{
226180

227181
/***/ 0:
228182
/*!******************!*\
229183
!*** ./pageB.js ***!
230184
\******************/
231185
/***/ function(module, exports, require) {
232186

233-
require.e/*nsure*/(1/* duplicate */, function(require) {
234-
var shared = require(/*! ./shared */ 1);
187+
var common = require(/*! ./common */ 1);
188+
require.e/*nsure*/(1, function(require) {
189+
var shared = require(/*! ./shared */ 2);
235190
shared("This is page B");
236191
});
237192

238193
/***/ }
239-
/******/ })
194+
195+
}
196+
)
240197
```
241198

242199
# js/1.chunk.js
@@ -245,7 +202,7 @@ module.exports = {
245202
webpackJsonp([1],
246203
{
247204

248-
/***/ 1:
205+
/***/ 2:
249206
/*!*******************!*\
250207
!*** ./shared.js ***!
251208
\*******************/
@@ -266,41 +223,57 @@ webpackJsonp([1],
266223
## Uncompressed
267224

268225
```
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]
226+
Hash: 5c54ce5e4829d6200e83
227+
Version: webpack 0.11.9
228+
Time: 51ms
229+
Asset Size Chunks Chunk Names
230+
pageB.chunk.js 323 0 [emitted] pageB
231+
pageA.chunk.js 432 0 [emitted] pageA
232+
commons.bundle.js 3389 0 [emitted] commons
233+
1.chunk.js 219 1 [emitted]
234+
chunk {0} pageB.chunk.js (pageB) 152 {0} [rendered]
235+
[0] ./pageB.js 152 {0} [built]
236+
chunk {0} pageA.chunk.js (pageA) 108 {0} [rendered]
237+
[0] ./pageA.js 108 {0} [built]
238+
chunk {0} commons.bundle.js (commons) 26 [rendered]
239+
[1] ./common.js 26 {0} [built]
240+
cjs require ./common [0] ./pageA.js 1:13-32
241+
cjs require ./common [0] ./pageB.js 1:13-32
280242
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
243+
[2] ./shared.js 54 {1} [built]
244+
amd require ./shared [0] ./pageA.js 2:0-4:2
245+
require.ensure item ./shared [0] ./pageB.js 2:0-5:2
246+
cjs require ./shared [0] ./pageB.js 3:14-33
285247
```
286248

287249
## Minimized (uglify-js, no zip)
288250

289251
```
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]
252+
Hash: 26bb5b48d267eb86b55c
253+
Version: webpack 0.11.9
254+
Time: 125ms
255+
Asset Size Chunks Chunk Names
256+
pageB.chunk.js 95 0 [emitted] pageB
257+
pageA.chunk.js 126 0 [emitted] pageA
258+
commons.bundle.js 692 0 [emitted] commons
259+
1.chunk.js 73 1 [emitted]
260+
chunk {0} pageB.chunk.js (pageB) 152 {0} [rendered]
261+
[0] ./pageB.js 152 {0} [built]
262+
chunk {0} pageA.chunk.js (pageA) 108 {0} [rendered]
263+
[0] ./pageA.js 108 {0} [built]
264+
chunk {0} commons.bundle.js (commons) 26 [rendered]
265+
[1] ./common.js 26 {0} [built]
266+
cjs require ./common [0] ./pageB.js 1:13-32
267+
cjs require ./common [0] ./pageA.js 1:13-32
301268
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
269+
[2] ./shared.js 54 {1} [built]
270+
require.ensure item ./shared [0] ./pageB.js 2:0-5:2
271+
cjs require ./shared [0] ./pageB.js 3:14-33
272+
amd require ./shared [0] ./pageA.js 2:0-4:2
273+
274+
WARNING in pageB.chunk.js from UglifyJs
275+
Side effects in initialization of unused variable common [./pageB.js:1,0]
276+
277+
WARNING in pageA.chunk.js from UglifyJs
278+
Side effects in initialization of unused variable common [./pageA.js:1,0]
306279
```

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = "Common";

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<html>
2+
<head></head>
3+
<body>
4+
<script src="js/commons.bundle.js" charset="utf-8"></script>
5+
<script src="js/pageA.chunk.js" charset="utf-8"></script>
6+
</body>
7+
</html>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
var common = require("./common");
12
require(["./shared"], function(shared) {
23
shared("This is page A");
34
});

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

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

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,28 @@
1616
{{webpack.config.js}}
1717
```
1818

19-
# js/pageA.bundle.js
19+
# pageA.html
20+
21+
``` html
22+
{{pageA.html}}
23+
```
24+
25+
# js/commons.bundle.js
26+
27+
``` javascript
28+
{{js/commons.bundle.js}}
29+
```
30+
31+
# js/pageA.chunk.js
2032

2133
``` javascript
22-
{{js/pageA.bundle.js}}
34+
{{js/pageA.chunk.js}}
2335
```
2436

25-
# js/pageB.bundle.js
37+
# js/pageB.chunk.js
2638

2739
``` javascript
28-
{{js/pageB.bundle.js}}
40+
{{js/pageB.chunk.js}}
2941
```
3042

3143
# js/1.chunk.js

0 commit comments

Comments
 (0)