Skip to content

Commit 31c4c87

Browse files
sokrasokra
committed
add component example for component-webpack-plugin
1 parent bcd7924 commit 31c4c87

File tree

15 files changed

+411
-1
lines changed

15 files changed

+411
-1
lines changed

‎examples/component/README.md‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
2+
# example.js
3+
4+
``` javascript
5+
console.log(require("a-component"));
6+
console.log(require("b-component"));
7+
console.log(require("c-component"));
8+
9+
```
10+
11+
# webpack.config.js
12+
13+
``` javascript
14+
var ComponentPlugin = require("component-webpack-plugin");
15+
module.exports = {
16+
module: {
17+
loaders: [
18+
{ test: /\.png$/, loader: "url-loader?limit=10000&minetype=image/png" }
19+
]
20+
},
21+
plugins: [
22+
new ComponentPlugin()
23+
]
24+
}
25+
```
26+
27+
# component.json
28+
29+
``` javascript
30+
{
31+
"name": "component-webpack-example",
32+
"repo": "webpack/webpack",
33+
"version": "0.0.1",
34+
"dependencies": {
35+
"webpack/a-component": "*",
36+
"webpack/c-component": "*"
37+
},
38+
"local": [
39+
"b-component"
40+
],
41+
"paths": [
42+
"my-component"
43+
],
44+
"scripts": ["example.js"],
45+
"license": "MIT"
46+
}
47+
```
48+
49+
# component/webpack-a-component/component.json
50+
51+
``` javascript
52+
{
53+
"name": "a-component",
54+
"repo": "webpack/a-component",
55+
"version": "0.0.1",
56+
"scripts": ["index.js"],
57+
"styles": ["style.css"],
58+
"images": ["image.png"],
59+
"license": "MIT"
60+
}
61+
```
62+
63+
# component/webpack-a-component/style.css
64+
65+
``` javascript
66+
.a-component {
67+
display: inline;
68+
background: url(image.png) repeat;
69+
}
70+
```
71+
72+
# js/output.js
73+
74+
``` javascript
75+
/******/ (function webpackBootstrap(modules) {
76+
/******/ var installedModules = {};
77+
/******/ function require(moduleId) {
78+
/******/ if(installedModules[moduleId])
79+
/******/ return installedModules[moduleId].exports;
80+
/******/ var module = installedModules[moduleId] = {
81+
/******/ exports: {},
82+
/******/ id: moduleId,
83+
/******/ loaded: false
84+
/******/ };
85+
/******/ modules[moduleId].call(null, module, module.exports, require);
86+
/******/ module.loaded = true;
87+
/******/ return module.exports;
88+
/******/ }
89+
/******/ require.e = function requireEnsure(chunkId, callback) {
90+
/******/ callback.call(null, require);
91+
/******/ };
92+
/******/ require.modules = modules;
93+
/******/ require.cache = installedModules;
94+
/******/ return require(0);
95+
/******/ })({
96+
/******/ c: "",
97+
98+
/***/ 0:
99+
/*!********************!*\
100+
!*** ./example.js ***!
101+
\********************/
102+
/***/ function(module, exports, require) {
103+
104+
console.log(require(/*! a-component */ 1));
105+
console.log(require(/*! b-component */ 9));
106+
console.log(require(/*! c-component */ 7));
107+
108+
109+
/***/ },
110+
111+
/***/ 1:
112+
/*!***************************************************!*\
113+
!*** ./component/webpack-a-component (component) ***!
114+
\***************************************************/
115+
/***/ function(module, exports, require) {
116+
117+
require(/*! style-loader!css-loader!./style.css */ 4);
118+
module.exports = require(/*! ./index.js */ 6);
119+
120+
/***/ },
121+
122+
/***/ 2:
123+
/*!*****************************************************************************************************************!*\
124+
!*** C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css ***!
125+
\*****************************************************************************************************************/
126+
/***/ function(module, exports, require) {
127+
128+
module.exports =
129+
".a-component {\n\tdisplay: inline;\n\tbackground: url("+require(/*! ./image.png */ 5)+") repeat;\n}";
130+
131+
/***/ },
132+
133+
/***/ 3:
134+
/*!*************************************************************************************!*\
135+
!*** C:/Users/Sokrates/Eigene Repos/webpack-development/~/style-loader/addStyle.js ***!
136+
\*************************************************************************************/
137+
/***/ function(module, exports, require) {
138+
139+
/*
140+
MIT License http://www.opensource.org/licenses/mit-license.php
141+
Author Tobias Koppers @sokra
142+
*/
143+
module.exports = function(cssCode) {
144+
var styleElement = document.createElement("style");
145+
styleElement.type = "text/css";
146+
if (styleElement.styleSheet) {
147+
styleElement.styleSheet.cssText = cssCode;
148+
} else {
149+
styleElement.appendChild(document.createTextNode(cssCode));
150+
}
151+
document.getElementsByTagName("head")[0].appendChild(styleElement);
152+
}
153+
154+
/***/ },
155+
156+
/***/ 4:
157+
/*!***********************************************************************************************************************************************************************************!*\
158+
!*** C:/Users/Sokrates/Eigene Repos/webpack-development/~/style-loader!C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css ***!
159+
\***********************************************************************************************************************************************************************************/
160+
/***/ function(module, exports, require) {
161+
162+
require(/*! C:/Users/Sokrates/Eigene Repos/webpack-development/~/style-loader/addStyle.js */ 3)(require(/*! !C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css */ 2))
163+
164+
/***/ },
165+
166+
/***/ 5:
167+
/*!*************************************************!*\
168+
!*** ./component/webpack-a-component/image.png ***!
169+
\*************************************************/
170+
/***/ function(module, exports, require) {
171+
172+
module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAIAAABGj2DjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACNSURBVChTlZC7FQAREEWFylCKEoS6EalBKNWZEoR2zrLrWbO/Gzjjc9/MIep/upNS8t63+pXukCAE33ON4/vgdo3j+6zvkNuLBybn409MDo4UY9Ra09q2CD9bCIFkQkpZSumnB8PBwZRSzbHWthNkODiYc45qY8zZBBP52Yicc692MPHqfPm6q4N5PLVunPxwQxP50QkAAAAASUVORK5CYII="
173+
174+
/***/ },
175+
176+
/***/ 6:
177+
/*!************************************************!*\
178+
!*** ./component/webpack-a-component/index.js ***!
179+
\************************************************/
180+
/***/ function(module, exports, require) {
181+
182+
module.exports = "A";
183+
184+
/***/ },
185+
186+
/***/ 7:
187+
/*!***************************************************!*\
188+
!*** ./component/webpack-c-component (component) ***!
189+
\***************************************************/
190+
/***/ function(module, exports, require) {
191+
192+
module.exports = require(/*! ./main.js */ 8);
193+
194+
/***/ },
195+
196+
/***/ 8:
197+
/*!***********************************************!*\
198+
!*** ./component/webpack-c-component/main.js ***!
199+
\***********************************************/
200+
/***/ function(module, exports, require) {
201+
202+
module.exports = "C" + require(/*! a-component */ 1);
203+
204+
/***/ },
205+
206+
/***/ 9:
207+
/*!**********************************************!*\
208+
!*** ./my-component/b-component (component) ***!
209+
\**********************************************/
210+
/***/ function(module, exports, require) {
211+
212+
module.exports = require(/*! ./main.js */ 10);
213+
214+
/***/ },
215+
216+
/***/ 10:
217+
/*!******************************************!*\
218+
!*** ./my-component/b-component/main.js ***!
219+
\******************************************/
220+
/***/ function(module, exports, require) {
221+
222+
module.exports = "B";
223+
224+
/***/ }
225+
/******/ })
226+
227+
```
228+
229+
# Info
230+
231+
## Uncompressed
232+
233+
```
234+
Hash: c5333db969c04ce8c2e232836957cc31
235+
Time: 132ms
236+
Asset Size Chunks Chunk Names
237+
output.js 5493 0 main
238+
chunk {0} output.js (main) 1661
239+
[0] ./example.js 111 [built] {0}
240+
[1] ./component/webpack-a-component (component) 88 [built] {0}
241+
cjs require a-component [0] ./example.js 1:12-34
242+
cjs require a-component [8] ./component/webpack-c-component/main.js 1:23-45
243+
[2] C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css 113 [built] {0}
244+
cjs require !!C:\Users\Sokrates\Eigene Repos\webpack-development\node_modules\css-loader\index.js!.\component\webpack-a-component\style.css [4] C:/Users/Sokrates/Eigene Repos/webpack-development/~/style-loader!C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css 1:108-353
245+
[3] C:/Users/Sokrates/Eigene Repos/webpack-development/~/style-loader/addStyle.js 458 [built] {0}
246+
cjs require !C:\Users\Sokrates\Eigene Repos\webpack-development\node_modules\style-loader\addStyle.js [4] C:/Users/Sokrates/Eigene Repos/webpack-development/~/style-loader!C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css 1:0-107
247+
[4] C:/Users/Sokrates/Eigene Repos/webpack-development/~/style-loader!C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css 354 [built] {0}
248+
cjs require !style-loader!css-loader!./style.css [1] ./component/webpack-a-component (component) 1:0-47
249+
[5] ./component/webpack-a-component/image.png 373 [built] {0}
250+
cjs require ./image.png [2] C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css 2:58-80
251+
[6] ./component/webpack-a-component/index.js 21 [built] {0}
252+
cjs require ./index.js [1] ./component/webpack-a-component (component) 2:17-38
253+
[7] ./component/webpack-c-component (component) 38 [built] {0}
254+
cjs require c-component [0] ./example.js 3:12-34
255+
[8] ./component/webpack-c-component/main.js 46 [built] {0}
256+
cjs require ./main.js [7] ./component/webpack-c-component (component) 1:17-37
257+
[9] ./my-component/b-component (component) 38 [built] {0}
258+
cjs require b-component [0] ./example.js 2:12-34
259+
[10] ./my-component/b-component/main.js 21 [built] {0}
260+
cjs require ./main.js [9] ./my-component/b-component (component) 1:17-37
261+
```
262+
263+
## Minimized (uglify-js, no zip)
264+
265+
```
266+
Hash: 6b5b7c195c4fbf887e901c245d918524
267+
Time: 203ms
268+
Asset Size Chunks Chunk Names
269+
output.js 1243 0 main
270+
chunk {0} output.js (main) 1640
271+
[0] ./example.js 111 [built] {0}
272+
[1] ./component/webpack-a-component (component) 88 [built] {0}
273+
cjs require a-component [0] ./example.js 1:12-34
274+
cjs require a-component [8] ./component/webpack-c-component/main.js 1:23-45
275+
[2] C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css 92 [built] {0}
276+
cjs require !!C:\Users\Sokrates\Eigene Repos\webpack-development\node_modules\css-loader\index.js!.\component\webpack-a-component\style.css [4] C:/Users/Sokrates/Eigene Repos/webpack-development/~/style-loader!C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css 1:108-353
277+
[3] C:/Users/Sokrates/Eigene Repos/webpack-development/~/style-loader/addStyle.js 458 [built] {0}
278+
cjs require !C:\Users\Sokrates\Eigene Repos\webpack-development\node_modules\style-loader\addStyle.js [4] C:/Users/Sokrates/Eigene Repos/webpack-development/~/style-loader!C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css 1:0-107
279+
[4] C:/Users/Sokrates/Eigene Repos/webpack-development/~/style-loader!C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css 354 [built] {0}
280+
cjs require !style-loader!css-loader!./style.css [1] ./component/webpack-a-component (component) 1:0-47
281+
[5] ./component/webpack-a-component/image.png 373 [built] {0}
282+
cjs require ./image.png [2] C:/Users/Sokrates/Eigene Repos/webpack-development/~/css-loader!./component/webpack-a-component/style.css 2:47-69
283+
[6] ./component/webpack-a-component/index.js 21 [built] {0}
284+
cjs require ./index.js [1] ./component/webpack-a-component (component) 2:17-38
285+
[7] ./component/webpack-c-component (component) 38 [built] {0}
286+
cjs require c-component [0] ./example.js 3:12-34
287+
[8] ./component/webpack-c-component/main.js 46 [built] {0}
288+
cjs require ./main.js [7] ./component/webpack-c-component (component) 1:17-37
289+
[9] ./my-component/b-component (component) 38 [built] {0}
290+
cjs require b-component [0] ./example.js 2:12-34
291+
[10] ./my-component/b-component/main.js 21 [built] {0}
292+
cjs require ./main.js [9] ./my-component/b-component (component) 1:17-37
293+
```

‎examples/component/build.js‎

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

‎examples/component/component.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "component-webpack-example",
3+
"repo": "webpack/webpack",
4+
"version": "0.0.1",
5+
"dependencies": {
6+
"webpack/a-component": "*",
7+
"webpack/c-component": "*"
8+
},
9+
"local": [
10+
"b-component"
11+
],
12+
"paths": [
13+
"my-component"
14+
],
15+
"scripts": ["example.js"],
16+
"license": "MIT"
17+
}

‎examples/component/component/webpack-a-component/component.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name": "a-component",
3+
"repo": "webpack/a-component",
4+
"version": "0.0.1",
5+
"scripts": ["index.js"],
6+
"styles": ["style.css"],
7+
"images": ["image.png"],
8+
"license": "MIT"
9+
}

‎examples/component/component/webpack-a-component/image.png‎

248 Bytes
Loading

‎examples/component/component/webpack-a-component/index.js‎

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

‎examples/component/component/webpack-a-component/style.css‎

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

‎examples/component/component/webpack-c-component/component.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "c-component",
3+
"repo": "webpack/c-component",
4+
"version": "0.0.1",
5+
"scripts": ["main.js"],
6+
"main": "main.js",
7+
"dependencies": {
8+
"webpack/a-component": "*"
9+
},
10+
"license": "MIT"
11+
}

‎examples/component/component/webpack-c-component/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = "C" + require("a-component");

‎examples/component/example.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
console.log(require("a-component"));
2+
console.log(require("b-component"));
3+
console.log(require("c-component"));

0 commit comments

Comments
 (0)