Skip to content

Commit e2f83e1

Browse files
sokrasokra
committed
add more complex css-bundle examples
add rebuild module add chunkName parameter to CommonsChunkPlugin fix bug in LimitChunkCountPlugin
1 parent 9d4cbb1 commit e2f83e1

29 files changed

Lines changed: 908 additions & 41 deletions

‎examples/code-splitted-css-bundle/README.md‎

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

‎examples/code-splitted-css-bundle/build.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require("../build-common");

‎examples/code-splitted-css-bundle/chunk.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require("./style2.css");

‎examples/code-splitted-css-bundle/example.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
require("./style.css");
2+
require(["./chunk"]);

‎examples/code-splitted-css-bundle/image.png‎

119 Bytes
Loading

‎examples/code-splitted-css-bundle/image2.png‎

119 Bytes
Loading

‎examples/code-splitted-css-bundle/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
background: url(image.png);
3+
}

‎examples/code-splitted-css-bundle/style2.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.xyz {
2+
background: url(image2.png);
3+
}

‎examples/code-splitted-css-bundle/template.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
2+
# example.js
3+
4+
``` javascript
5+
{{example.js}}
6+
```
7+
8+
# style.css
9+
10+
``` css
11+
{{style.css}}
12+
```
13+
14+
# chunk.js
15+
16+
``` javascript
17+
{{chunk.js}}
18+
```
19+
20+
# style2.css
21+
22+
``` css
23+
{{style2.css}}
24+
```
25+
26+
# webpack.config.js
27+
28+
``` javascript
29+
{{webpack.config.js}}
30+
```
31+
32+
# js/output.js
33+
34+
``` javascript
35+
{{js/output.js}}
36+
```
37+
38+
# js/0.output.js
39+
40+
``` javascript
41+
{{js/0.output.js}}
42+
```
43+
44+
# js/style.css
45+
46+
``` javascript
47+
{{js/style.css}}
48+
```
49+
50+
# Info
51+
52+
## Uncompressed
53+
54+
```
55+
{{stdout}}
56+
```
57+
58+
## Minimized (uglify-js, no zip)
59+
60+
```
61+
{{min:stdout}}
62+
```

0 commit comments

Comments
 (0)