Skip to content

Commit 6447bae

Browse files
sokrasokra
committed
updated extract-text-plugin examples
1 parent 9efa756 commit 6447bae

6 files changed

Lines changed: 214 additions & 150 deletions

File tree

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

Lines changed: 59 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,18 @@ module.exports = {
3737
loaders: [
3838
{
3939
test: /\.css$/,
40-
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
40+
loader: ExtractTextPlugin.extract({
41+
notExtractLoader: "style-loader",
42+
loader: "css-loader"
43+
})
4144
},
4245
{ test: /\.png$/, loader: "file-loader" }
4346
]
4447
},
4548
plugins: [
46-
new ExtractTextPlugin("style.css")
49+
new ExtractTextPlugin({
50+
filename: "style.css"
51+
})
4752
]
4853
};
4954
```
@@ -61,36 +66,38 @@ body {
6166
## Uncompressed
6267

6368
```
64-
Hash: 798f77cd46cc3238c154
65-
Version: webpack 2.1.0-beta.11
66-
Time: 796ms
69+
Hash: dd83e57a15cc19a4c17b
70+
Version: webpack 2.1.0-beta.17
71+
Time: 1112ms
6772
Asset Size Chunks Chunk Names
6873
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
69-
output.js 14.3 kB 0 [emitted] main
70-
1.js 2.06 kB 1 [emitted]
71-
style.css 71 bytes 0 [emitted] main
72-
chunk {0} output.js, style.css (main) 8.81 kB [rendered]
73-
> main [2] ./example.js
74-
[0] ./style.css 41 bytes {0} [built]
75-
cjs require ./style.css [2] ./example.js 1:0-22
76-
[2] ./example.js 48 bytes {0} [built]
77-
[3] (webpack)/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
78-
cjs require ./../../node_modules/css-loader/lib/css-base.js [5] (webpack)/~/css-loader!./style2.css 1:27-85
79-
cjs require ./../../node_modules/css-loader/lib/css-base.js [8] (webpack)/~/css-loader!./style.css 1:27-85
80-
[4] (webpack)/~/style-loader/addStyles.js 7.21 kB {0} [built]
81-
cjs require !./../../node_modules/style-loader/addStyles.js [6] ./style2.css 7:13-71
82-
chunk {1} 1.js 1.26 kB {0} [rendered]
74+
0.js 2.03 kB 0 [emitted]
75+
output.js 14.4 kB 1 [emitted] main
76+
style.css 71 bytes 1 [emitted] main
77+
Entrypoint main = output.js style.css
78+
chunk {0} 0.js 1.26 kB {1} [rendered]
8379
> [2] ./example.js 2:0-20
84-
[1] ./chunk.js 26 bytes {1} [built]
80+
[1] ./chunk.js 26 bytes {0} [built]
8581
amd require ./chunk [2] ./example.js 2:0-20
86-
[5] (webpack)/~/css-loader!./style2.css 229 bytes {1} [built]
87-
cjs require !!./../../node_modules/css-loader/index.js!./style2.css [6] ./style2.css 4:14-80
88-
[6] ./style2.css 922 bytes {1} [built]
82+
[5] ./style2.css 922 bytes {0} [built]
8983
cjs require ./style2.css [1] ./chunk.js 1:0-23
90-
[7] ./image2.png 82 bytes {1} [built]
91-
cjs require ./image2.png [5] (webpack)/~/css-loader!./style2.css 6:58-81
84+
[6] (webpack)/~/css-loader!./style2.css 229 bytes {0} [built]
85+
cjs require !!./../../node_modules/css-loader/index.js!./style2.css [5] ./style2.css 4:14-80
86+
[7] ./image2.png 82 bytes {0} [built]
87+
cjs require ./image2.png [6] (webpack)/~/css-loader!./style2.css 6:58-81
88+
chunk {1} output.js, style.css (main) 8.75 kB [entry] [rendered]
89+
> main [2] ./example.js
90+
[0] ./style.css 41 bytes {1} [built]
91+
cjs require ./style.css [2] ./example.js 1:0-22
92+
[2] ./example.js 48 bytes {1} [built]
93+
[3] (webpack)/~/css-loader/lib/css-base.js 1.51 kB {1} [built]
94+
cjs require ./../../node_modules/css-loader/lib/css-base.js [6] (webpack)/~/css-loader!./style2.css 1:27-85
95+
cjs require ./../../node_modules/css-loader/lib/css-base.js [8] (webpack)/~/css-loader!./style.css 1:27-85
96+
[4] (webpack)/~/style-loader/addStyles.js 7.15 kB {1} [built]
97+
cjs require !./../../node_modules/style-loader/addStyles.js [5] ./style2.css 7:13-71
9298
Child extract-text-webpack-plugin:
93-
chunk {0} extract-text-webpack-plugin-output-filename 1.82 kB [rendered]
99+
Entrypoint undefined = extract-text-webpack-plugin-output-filename
100+
chunk {0} extract-text-webpack-plugin-output-filename 1.82 kB [entry] [rendered]
94101
> [2] (webpack)/~/css-loader!./style.css
95102
[0] (webpack)/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
96103
cjs require ./../../node_modules/css-loader/lib/css-base.js [2] (webpack)/~/css-loader!./style.css 1:27-85
@@ -102,36 +109,38 @@ Child extract-text-webpack-plugin:
102109
## Minimized (uglify-js, no zip)
103110

104111
```
105-
Hash: 0cf75f910a1d3f58460d
106-
Version: webpack 2.1.0-beta.11
107-
Time: 1451ms
112+
Hash: 746ad479dbd8e811a2fd
113+
Version: webpack 2.1.0-beta.17
114+
Time: 1133ms
108115
Asset Size Chunks Chunk Names
109116
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
110-
output.js 4.79 kB 0 [emitted] main
111-
1.js 309 bytes 1 [emitted]
112-
style.css 61 bytes 0 [emitted] main
113-
chunk {0} output.js, style.css (main) 8.81 kB [rendered]
114-
> main [2] ./example.js
115-
[0] ./style.css 41 bytes {0} [built]
116-
cjs require ./style.css [2] ./example.js 1:0-22
117-
[2] ./example.js 48 bytes {0} [built]
118-
[3] (webpack)/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
119-
cjs require ./../../node_modules/css-loader/lib/css-base.js [5] (webpack)/~/css-loader!./style2.css 1:27-85
120-
cjs require ./../../node_modules/css-loader/lib/css-base.js [8] (webpack)/~/css-loader!./style.css 1:27-85
121-
[4] (webpack)/~/style-loader/addStyles.js 7.21 kB {0} [built]
122-
cjs require !./../../node_modules/style-loader/addStyles.js [6] ./style2.css 7:13-71
123-
chunk {1} 1.js 1.24 kB {0} [rendered]
117+
0.js 309 bytes 0 [emitted]
118+
output.js 4.92 kB 1 [emitted] main
119+
style.css 61 bytes 1 [emitted] main
120+
Entrypoint main = output.js style.css
121+
chunk {0} 0.js 1.24 kB {1} [rendered]
124122
> [2] ./example.js 2:0-20
125-
[1] ./chunk.js 26 bytes {1} [built]
123+
[1] ./chunk.js 26 bytes {0} [built]
126124
amd require ./chunk [2] ./example.js 2:0-20
127-
[5] (webpack)/~/css-loader!./style2.css 212 bytes {1} [built]
128-
cjs require !!./../../node_modules/css-loader/index.js!./style2.css [6] ./style2.css 4:14-80
129-
[6] ./style2.css 922 bytes {1} [built]
125+
[5] ./style2.css 922 bytes {0} [built]
130126
cjs require ./style2.css [1] ./chunk.js 1:0-23
131-
[7] ./image2.png 82 bytes {1} [built]
132-
cjs require ./image2.png [5] (webpack)/~/css-loader!./style2.css 6:50-73
127+
[6] (webpack)/~/css-loader!./style2.css 212 bytes {0} [built]
128+
cjs require !!./../../node_modules/css-loader/index.js!./style2.css [5] ./style2.css 4:14-80
129+
[7] ./image2.png 82 bytes {0} [built]
130+
cjs require ./image2.png [6] (webpack)/~/css-loader!./style2.css 6:50-73
131+
chunk {1} output.js, style.css (main) 8.75 kB [entry] [rendered]
132+
> main [2] ./example.js
133+
[0] ./style.css 41 bytes {1} [built]
134+
cjs require ./style.css [2] ./example.js 1:0-22
135+
[2] ./example.js 48 bytes {1} [built]
136+
[3] (webpack)/~/css-loader/lib/css-base.js 1.51 kB {1} [built]
137+
cjs require ./../../node_modules/css-loader/lib/css-base.js [6] (webpack)/~/css-loader!./style2.css 1:27-85
138+
cjs require ./../../node_modules/css-loader/lib/css-base.js [8] (webpack)/~/css-loader!./style.css 1:27-85
139+
[4] (webpack)/~/style-loader/addStyles.js 7.15 kB {1} [built]
140+
cjs require !./../../node_modules/style-loader/addStyles.js [5] ./style2.css 7:13-71
133141
Child extract-text-webpack-plugin:
134-
chunk {0} extract-text-webpack-plugin-output-filename 1.8 kB [rendered]
142+
Entrypoint undefined = extract-text-webpack-plugin-output-filename
143+
chunk {0} extract-text-webpack-plugin-output-filename 1.8 kB [entry] [rendered]
135144
> [2] (webpack)/~/css-loader!./style.css
136145
[0] (webpack)/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
137146
cjs require ./../../node_modules/css-loader/lib/css-base.js [2] (webpack)/~/css-loader!./style.css 1:27-85

‎examples/code-splitted-css-bundle/webpack.config.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,17 @@ module.exports = {
44
loaders: [
55
{
66
test: /\.css$/,
7-
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
7+
loader: ExtractTextPlugin.extract({
8+
notExtractLoader: "style-loader",
9+
loader: "css-loader"
10+
})
811
},
912
{ test: /\.png$/, loader: "file-loader" }
1013
]
1114
},
1215
plugins: [
13-
new ExtractTextPlugin("style.css")
16+
new ExtractTextPlugin({
17+
filename: "style.css"
18+
})
1419
]
1520
};

‎examples/css-bundle/README.md‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,18 @@ module.exports = {
2222
loaders: [
2323
{
2424
test: /\.css$/,
25-
loader: ExtractTextPlugin.extract("css-loader")
25+
loader: ExtractTextPlugin.extract({
26+
loader: "css-loader"
27+
})
2628
},
2729
{ test: /\.png$/, loader: "file-loader" }
2830
]
2931
},
3032
plugins: [
31-
new ExtractTextPlugin("style.css", { allChunks: true })
33+
new ExtractTextPlugin({
34+
filename: "style.css",
35+
allChunks: true
36+
})
3237
]
3338
};
3439
```
@@ -74,6 +79,18 @@ module.exports = {
7479
/******/ // identity function for calling harmory imports with the correct context
7580
/******/ __webpack_require__.i = function(value) { return value; };
7681

82+
/******/ // define getter function for harmory exports
83+
/******/ __webpack_require__.d = function(exports, name, getter) {
84+
/******/ Object.defineProperty(exports, name, {
85+
/******/ configurable: false,
86+
/******/ enumerable: true,
87+
/******/ get: getter
88+
/******/ });
89+
/******/ };
90+
91+
/******/ // Object.prototype.hasOwnProperty.call
92+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
93+
7794
/******/ // __webpack_public_path__
7895
/******/ __webpack_require__.p = "js/";
7996

@@ -88,7 +105,7 @@ module.exports = {
88105
\*******************/
89106
/***/ function(module, exports) {
90107

91-
// removed by extract-text-webpack-plugin
108+
// removed by extract-text-webpack-plugin
92109

93110
/***/ },
94111
/* 1 */
@@ -97,7 +114,7 @@ module.exports = {
97114
\********************/
98115
/***/ function(module, exports, __webpack_require__) {
99116

100-
__webpack_require__(/*! ./style.css */ 0);
117+
__webpack_require__(/*! ./style.css */ 0);
101118

102119
/***/ }
103120
/******/ ]);
@@ -116,22 +133,24 @@ body {
116133
## Uncompressed
117134

118135
```
119-
Hash: efccfc86a9d3318458a7
120-
Version: webpack 2.1.0-beta.11
121-
Time: 655ms
136+
Hash: f8d8a115915513ecc64b
137+
Version: webpack 2.1.0-beta.17
138+
Time: 802ms
122139
Asset Size Chunks Chunk Names
123140
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
124-
output.js 1.87 kB 0 [emitted] main
141+
output.js 2.34 kB 0 [emitted] main
125142
style.css 69 bytes 0 [emitted] main
126-
chunk {0} output.js, style.css (main) 64 bytes [rendered]
143+
Entrypoint main = output.js style.css
144+
chunk {0} output.js, style.css (main) 64 bytes [entry] [rendered]
127145
> main [1] ./example.js
128146
[0] ./style.css 41 bytes {0} [built]
129147
cjs require ./style.css [1] ./example.js 1:0-22
130148
[1] ./example.js 23 bytes {0} [built]
131149
Child extract-text-webpack-plugin:
132150
Asset Size Chunks Chunk Names
133151
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
134-
chunk {0} extract-text-webpack-plugin-output-filename 1.81 kB [rendered]
152+
Entrypoint undefined = extract-text-webpack-plugin-output-filename
153+
chunk {0} extract-text-webpack-plugin-output-filename 1.81 kB [entry] [rendered]
135154
> [2] (webpack)/~/css-loader!./style.css
136155
[0] (webpack)/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
137156
cjs require ./../../node_modules/css-loader/lib/css-base.js [2] (webpack)/~/css-loader!./style.css 1:27-85
@@ -143,22 +162,24 @@ Child extract-text-webpack-plugin:
143162
## Minimized (uglify-js, no zip)
144163

145164
```
146-
Hash: 6f441b96253266f73216
147-
Version: webpack 2.1.0-beta.11
148-
Time: 676ms
165+
Hash: 3cde0f728f30b6d2657b
166+
Version: webpack 2.1.0-beta.17
167+
Time: 1130ms
149168
Asset Size Chunks Chunk Names
150169
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
151-
output.js 262 bytes 0 [emitted] main
170+
output.js 416 bytes 0 [emitted] main
152171
style.css 61 bytes 0 [emitted] main
153-
chunk {0} output.js, style.css (main) 64 bytes [rendered]
172+
Entrypoint main = output.js style.css
173+
chunk {0} output.js, style.css (main) 64 bytes [entry] [rendered]
154174
> main [1] ./example.js
155175
[0] ./style.css 41 bytes {0} [built]
156176
cjs require ./style.css [1] ./example.js 1:0-22
157177
[1] ./example.js 23 bytes {0} [built]
158178
Child extract-text-webpack-plugin:
159179
Asset Size Chunks Chunk Names
160180
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
161-
chunk {0} extract-text-webpack-plugin-output-filename 1.8 kB [rendered]
181+
Entrypoint undefined = extract-text-webpack-plugin-output-filename
182+
chunk {0} extract-text-webpack-plugin-output-filename 1.8 kB [entry] [rendered]
162183
> [2] (webpack)/~/css-loader!./style.css
163184
[0] (webpack)/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
164185
cjs require ./../../node_modules/css-loader/lib/css-base.js [2] (webpack)/~/css-loader!./style.css 1:27-85

‎examples/css-bundle/webpack.config.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,17 @@ module.exports = {
44
loaders: [
55
{
66
test: /\.css$/,
7-
loader: ExtractTextPlugin.extract("css-loader")
7+
loader: ExtractTextPlugin.extract({
8+
loader: "css-loader"
9+
})
810
},
911
{ test: /\.png$/, loader: "file-loader" }
1012
]
1113
},
1214
plugins: [
13-
new ExtractTextPlugin("style.css", { allChunks: true })
15+
new ExtractTextPlugin({
16+
filename: "style.css",
17+
allChunks: true
18+
})
1419
]
1520
};

0 commit comments

Comments
 (0)