├── .gitignore ├── README.md ├── dist ├── app.css ├── app.js ├── fonts │ └── opensans-regular-webfont.woff └── images │ └── icon-user.png ├── example └── index.html ├── package.json ├── src ├── components │ ├── ui-App │ │ ├── index.css │ │ └── index.js │ ├── ui-Avatar │ │ ├── index.css │ │ └── index.js │ └── ui-Profile │ │ ├── fonts │ │ └── opensans-regular-webfont.woff │ │ ├── images │ │ └── icon-user.png │ │ ├── index.css │ │ └── index.js └── styles │ ├── base.css │ └── theme.css └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React components and assets built with webpack 2 | 3 | Example code for my blog post - http://simonsmith.io/using-webpack-to-build-react-components-and-their-assets/ 4 | 5 | ## Usage 6 | 7 | npm install webpack -g 8 | npm install 9 | -------------------------------------------------------------------------------- /dist/app.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A thin layer on top of normalize.css that provides a starting point more 3 | * suitable for web applications. Removes the default spacing and border for 4 | * appropriate elements. 5 | */ 6 | 7 | blockquote, 8 | dl, 9 | dd, 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | h5, 15 | h6, 16 | figure, 17 | p, 18 | pre { 19 | margin: 0; 20 | } 21 | 22 | button { 23 | background: transparent; 24 | border: 0; 25 | padding: 0; 26 | } 27 | 28 | /** 29 | * Work around a Firefox/IE bug where the transparent `button` background 30 | * results in a loss of the default `button` focus styles. 31 | */ 32 | 33 | button:focus { 34 | outline: 1px dotted; 35 | outline: 5px auto -webkit-focus-ring-color; 36 | } 37 | 38 | fieldset { 39 | border: 0; 40 | margin: 0; 41 | padding: 0; 42 | } 43 | 44 | iframe { 45 | border: 0; 46 | } 47 | 48 | ol, 49 | ul { 50 | list-style: none; 51 | margin: 0; 52 | padding: 0; 53 | } 54 | 55 | /** 56 | * Suppress the focus outline on links that cannot be accessed via keyboard. 57 | * This prevents an unwanted focus outline from appearing around elements that 58 | * might still respond to pointer events. 59 | */ 60 | 61 | [tabindex="-1"]:focus { 62 | outline: none !important; 63 | } 64 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 65 | 66 | /** 67 | * 1. Set default font family to sans-serif. 68 | * 2. Prevent iOS and IE text size adjust after device orientation change, 69 | * without disabling user zoom. 70 | */ 71 | 72 | html { 73 | font-family: sans-serif; /* 1 */ 74 | -ms-text-size-adjust: 100%; /* 2 */ 75 | -webkit-text-size-adjust: 100%; /* 2 */ 76 | } 77 | 78 | /** 79 | * Remove default margin. 80 | */ 81 | 82 | body { 83 | margin: 0; 84 | } 85 | 86 | /* HTML5 display definitions 87 | ========================================================================== */ 88 | 89 | /** 90 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 91 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 92 | * and Firefox. 93 | * Correct `block` display not defined for `main` in IE 11. 94 | */ 95 | 96 | article, 97 | aside, 98 | details, 99 | figcaption, 100 | figure, 101 | footer, 102 | header, 103 | hgroup, 104 | main, 105 | menu, 106 | nav, 107 | section, 108 | summary { 109 | display: block; 110 | } 111 | 112 | /** 113 | * 1. Correct `inline-block` display not defined in IE 8/9. 114 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 115 | */ 116 | 117 | audio, 118 | canvas, 119 | progress, 120 | video { 121 | display: inline-block; /* 1 */ 122 | vertical-align: baseline; /* 2 */ 123 | } 124 | 125 | /** 126 | * Prevent modern browsers from displaying `audio` without controls. 127 | * Remove excess height in iOS 5 devices. 128 | */ 129 | 130 | audio:not([controls]) { 131 | display: none; 132 | height: 0; 133 | } 134 | 135 | /** 136 | * Address `[hidden]` styling not present in IE 8/9/10. 137 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 138 | */ 139 | 140 | [hidden], 141 | template { 142 | display: none; 143 | } 144 | 145 | /* Links 146 | ========================================================================== */ 147 | 148 | /** 149 | * Remove the gray background color from active links in IE 10. 150 | */ 151 | 152 | a { 153 | background-color: transparent; 154 | } 155 | 156 | /** 157 | * Improve readability of focused elements when they are also in an 158 | * active/hover state. 159 | */ 160 | 161 | a:active, 162 | a:hover { 163 | outline: 0; 164 | } 165 | 166 | /* Text-level semantics 167 | ========================================================================== */ 168 | 169 | /** 170 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 171 | */ 172 | 173 | abbr[title] { 174 | border-bottom: 1px dotted; 175 | } 176 | 177 | /** 178 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 179 | */ 180 | 181 | b, 182 | strong { 183 | font-weight: bold; 184 | } 185 | 186 | /** 187 | * Address styling not present in Safari and Chrome. 188 | */ 189 | 190 | dfn { 191 | font-style: italic; 192 | } 193 | 194 | /** 195 | * Address variable `h1` font-size and margin within `section` and `article` 196 | * contexts in Firefox 4+, Safari, and Chrome. 197 | */ 198 | 199 | h1 { 200 | font-size: 2em; 201 | margin: 0.67em 0; 202 | } 203 | 204 | /** 205 | * Address styling not present in IE 8/9. 206 | */ 207 | 208 | mark { 209 | background: #ff0; 210 | color: #000; 211 | } 212 | 213 | /** 214 | * Address inconsistent and variable font size in all browsers. 215 | */ 216 | 217 | small { 218 | font-size: 80%; 219 | } 220 | 221 | /** 222 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 223 | */ 224 | 225 | sub, 226 | sup { 227 | font-size: 75%; 228 | line-height: 0; 229 | position: relative; 230 | vertical-align: baseline; 231 | } 232 | 233 | sup { 234 | top: -0.5em; 235 | } 236 | 237 | sub { 238 | bottom: -0.25em; 239 | } 240 | 241 | /* Embedded content 242 | ========================================================================== */ 243 | 244 | /** 245 | * Remove border when inside `a` element in IE 8/9/10. 246 | */ 247 | 248 | img { 249 | border: 0; 250 | } 251 | 252 | /** 253 | * Correct overflow not hidden in IE 9/10/11. 254 | */ 255 | 256 | svg:not(:root) { 257 | overflow: hidden; 258 | } 259 | 260 | /* Grouping content 261 | ========================================================================== */ 262 | 263 | /** 264 | * Address margin not present in IE 8/9 and Safari. 265 | */ 266 | 267 | figure { 268 | margin: 1em 40px; 269 | } 270 | 271 | /** 272 | * Address differences between Firefox and other browsers. 273 | */ 274 | 275 | hr { 276 | box-sizing: content-box; 277 | height: 0; 278 | } 279 | 280 | /** 281 | * Contain overflow in all browsers. 282 | */ 283 | 284 | pre { 285 | overflow: auto; 286 | } 287 | 288 | /** 289 | * Address odd `em`-unit font size rendering in all browsers. 290 | */ 291 | 292 | code, 293 | kbd, 294 | pre, 295 | samp { 296 | font-family: monospace, monospace; 297 | font-size: 1em; 298 | } 299 | 300 | /* Forms 301 | ========================================================================== */ 302 | 303 | /** 304 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 305 | * styling of `select`, unless a `border` property is set. 306 | */ 307 | 308 | /** 309 | * 1. Correct color not being inherited. 310 | * Known issue: affects color of disabled elements. 311 | * 2. Correct font properties not being inherited. 312 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 313 | */ 314 | 315 | button, 316 | input, 317 | optgroup, 318 | select, 319 | textarea { 320 | color: inherit; /* 1 */ 321 | font: inherit; /* 2 */ 322 | margin: 0; /* 3 */ 323 | } 324 | 325 | /** 326 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 327 | */ 328 | 329 | button { 330 | overflow: visible; 331 | } 332 | 333 | /** 334 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 335 | * All other form control elements do not inherit `text-transform` values. 336 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 337 | * Correct `select` style inheritance in Firefox. 338 | */ 339 | 340 | button, 341 | select { 342 | text-transform: none; 343 | } 344 | 345 | /** 346 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 347 | * and `video` controls. 348 | * 2. Correct inability to style clickable `input` types in iOS. 349 | * 3. Improve usability and consistency of cursor style between image-type 350 | * `input` and others. 351 | */ 352 | 353 | button, 354 | html input[type="button"], /* 1 */ 355 | input[type="reset"], 356 | input[type="submit"] { 357 | -webkit-appearance: button; /* 2 */ 358 | cursor: pointer; /* 3 */ 359 | } 360 | 361 | /** 362 | * Re-set default cursor for disabled elements. 363 | */ 364 | 365 | button[disabled], 366 | html input[disabled] { 367 | cursor: default; 368 | } 369 | 370 | /** 371 | * Remove inner padding and border in Firefox 4+. 372 | */ 373 | 374 | button::-moz-focus-inner, 375 | input::-moz-focus-inner { 376 | border: 0; 377 | padding: 0; 378 | } 379 | 380 | /** 381 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 382 | * the UA stylesheet. 383 | */ 384 | 385 | input { 386 | line-height: normal; 387 | } 388 | 389 | /** 390 | * It's recommended that you don't attempt to style these elements. 391 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 392 | * 393 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 394 | * 2. Remove excess padding in IE 8/9/10. 395 | */ 396 | 397 | input[type="checkbox"], 398 | input[type="radio"] { 399 | box-sizing: border-box; /* 1 */ 400 | padding: 0; /* 2 */ 401 | } 402 | 403 | /** 404 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 405 | * `font-size` values of the `input`, it causes the cursor style of the 406 | * decrement button to change from `default` to `text`. 407 | */ 408 | 409 | input[type="number"]::-webkit-inner-spin-button, 410 | input[type="number"]::-webkit-outer-spin-button { 411 | height: auto; 412 | } 413 | 414 | /** 415 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 416 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 417 | */ 418 | 419 | input[type="search"] { 420 | -webkit-appearance: textfield; /* 1 */ 421 | box-sizing: content-box; /* 2 */ 422 | } 423 | 424 | /** 425 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 426 | * Safari (but not Chrome) clips the cancel button when the search input has 427 | * padding (and `textfield` appearance). 428 | */ 429 | 430 | input[type="search"]::-webkit-search-cancel-button, 431 | input[type="search"]::-webkit-search-decoration { 432 | -webkit-appearance: none; 433 | } 434 | 435 | /** 436 | * Define consistent border, margin, and padding. 437 | */ 438 | 439 | fieldset { 440 | border: 1px solid #c0c0c0; 441 | margin: 0 2px; 442 | padding: 0.35em 0.625em 0.75em; 443 | } 444 | 445 | /** 446 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 447 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 448 | */ 449 | 450 | legend { 451 | border: 0; /* 1 */ 452 | padding: 0; /* 2 */ 453 | } 454 | 455 | /** 456 | * Remove default vertical scrollbar in IE 8/9/10/11. 457 | */ 458 | 459 | textarea { 460 | overflow: auto; 461 | } 462 | 463 | /** 464 | * Don't inherit the `font-weight` (applied by a rule above). 465 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 466 | */ 467 | 468 | optgroup { 469 | font-weight: bold; 470 | } 471 | 472 | /* Tables 473 | ========================================================================== */ 474 | 475 | /** 476 | * Remove most spacing between table cells. 477 | */ 478 | 479 | table { 480 | border-collapse: collapse; 481 | border-spacing: 0; 482 | } 483 | 484 | td, 485 | th { 486 | padding: 0; 487 | } 488 | /** 489 | * Contain floats 490 | * 491 | * Make an element expand to contain floated children. 492 | * Uses pseudo-elements (micro clearfix). 493 | * 494 | * 1. The space content is one way to avoid an Opera bug when the 495 | * `contenteditable` attribute is included anywhere else in the document. 496 | * Otherwise it causes space to appear at the top and bottom of the 497 | * element. 498 | * 2. The use of `table` rather than `block` is only necessary if using 499 | * `:before` to contain the top-margins of child elements. 500 | */ 501 | 502 | .u-cf:before, 503 | .u-cf:after { 504 | content: " "; /* 1 */ 505 | display: table; /* 2 */ 506 | } 507 | 508 | .u-cf:after { 509 | clear: both; 510 | } 511 | 512 | /** 513 | * New block formatting context 514 | * 515 | * This affords some useful properties to the element. It won't wrap under 516 | * floats. Will also contain any floated children. 517 | 518 | * N.B. This will clip overflow. Use the alternative method below if this is 519 | * problematic. 520 | */ 521 | 522 | .u-nbfc { 523 | overflow: hidden !important; 524 | } 525 | 526 | /** 527 | * New block formatting context (alternative) 528 | * 529 | * Alternative method when overflow must not be clipped. 530 | * 531 | * 1. Create a new block formatting context (NBFC). 532 | * 2. Avoid shrink-wrap behaviour of table-cell. 533 | * 534 | * N.B. This breaks down in some browsers when elements within this element 535 | * exceed its width. 536 | */ 537 | 538 | .u-nbfcAlt { 539 | display: table-cell !important; /* 1 */ 540 | width: 10000px !important; /* 2 */ 541 | } 542 | 543 | /** 544 | * Floats 545 | */ 546 | 547 | .u-floatLeft { 548 | float: left !important; 549 | } 550 | 551 | .u-floatRight { 552 | float: right !important; 553 | } 554 | /** @define App */ 555 | 556 | .App-item { 557 | width: 300px; 558 | padding: 30px; 559 | } 560 | /** @define Avatar */ 561 | 562 | .Avatar-img { 563 | border-radius: 10px; 564 | border: 1px solid #333; 565 | } 566 | /** @define Profile */ 567 | 568 | @font-face { 569 | font-family: "open_sansregular"; 570 | src: url(fonts/opensans-regular-webfont.woff) format("woff"); 571 | font-weight: normal; 572 | font-style: normal; 573 | } 574 | 575 | .Profile { 576 | background: url(images/icon-user.png) no-repeat right 10px top 10px; 577 | border: 1px solid #ddd; 578 | padding: 10px; 579 | font-family: "open_sansregular"; 580 | border-radius: 4px; 581 | } 582 | 583 | .Profile-wrapAvatar { 584 | text-align: center; 585 | } 586 | body { 587 | color: #333; 588 | } 589 | 590 | h2 { 591 | font-weight: 400; 592 | } 593 | -------------------------------------------------------------------------------- /dist/app.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("react")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["react"], factory); 6 | else if(typeof exports === 'object') 7 | exports["App"] = factory(require("react")); 8 | else 9 | root["App"] = factory(root["React"]); 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_1__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) 20 | /******/ return installedModules[moduleId].exports; 21 | 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ exports: {}, 25 | /******/ id: moduleId, 26 | /******/ loaded: false 27 | /******/ }; 28 | 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | 32 | /******/ // Flag the module as loaded 33 | /******/ module.loaded = true; 34 | 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | 39 | 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | 46 | /******/ // __webpack_public_path__ 47 | /******/ __webpack_require__.p = ""; 48 | 49 | /******/ // Load entry module and return exports 50 | /******/ return __webpack_require__(0); 51 | /******/ }) 52 | /************************************************************************/ 53 | /******/ ([ 54 | /* 0 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | 'use strict'; 58 | 59 | var _interopRequireDefault = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; 60 | 61 | Object.defineProperty(exports, '__esModule', { 62 | value: true 63 | }); 64 | 65 | __webpack_require__(2); 66 | 67 | __webpack_require__(6); 68 | 69 | __webpack_require__(4); 70 | 71 | var _React = __webpack_require__(1); 72 | 73 | var _React2 = _interopRequireDefault(_React); 74 | 75 | var _Profile = __webpack_require__(3); 76 | 77 | var _Profile2 = _interopRequireDefault(_Profile); 78 | 79 | exports['default'] = _React2['default'].createClass({ 80 | displayName: 'App', 81 | 82 | render: function render() { 83 | return _React2['default'].createElement( 84 | 'div', 85 | { className: 'App' }, 86 | _React2['default'].createElement( 87 | 'div', 88 | { className: 'App-item' }, 89 | _React2['default'].createElement(_Profile2['default'], { user: this.props.userData }) 90 | ) 91 | ); 92 | } 93 | }); 94 | module.exports = exports['default']; 95 | 96 | /***/ }, 97 | /* 1 */ 98 | /***/ function(module, exports, __webpack_require__) { 99 | 100 | module.exports = __WEBPACK_EXTERNAL_MODULE_1__; 101 | 102 | /***/ }, 103 | /* 2 */ 104 | /***/ function(module, exports, __webpack_require__) { 105 | 106 | __webpack_require__(16); 107 | __webpack_require__(9); 108 | 109 | 110 | /***/ }, 111 | /* 3 */ 112 | /***/ function(module, exports, __webpack_require__) { 113 | 114 | 'use strict'; 115 | 116 | var _interopRequireDefault = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; 117 | 118 | Object.defineProperty(exports, '__esModule', { 119 | value: true 120 | }); 121 | 122 | __webpack_require__(15); 123 | 124 | __webpack_require__(11); 125 | 126 | var _React = __webpack_require__(1); 127 | 128 | var _React2 = _interopRequireDefault(_React); 129 | 130 | var _Avatar = __webpack_require__(13); 131 | 132 | var _Avatar2 = _interopRequireDefault(_Avatar); 133 | 134 | exports['default'] = _React2['default'].createClass({ 135 | displayName: 'Profile', 136 | 137 | render: function render() { 138 | return _React2['default'].createElement( 139 | 'div', 140 | { className: 'Profile' }, 141 | _React2['default'].createElement( 142 | 'h2', 143 | { className: 'Profile-header' }, 144 | this.props.user.fullname 145 | ), 146 | _React2['default'].createElement( 147 | 'div', 148 | { className: 'Profile-wrapAvatar' }, 149 | _React2['default'].createElement( 150 | _Avatar2['default'], 151 | { src: this.props.user.avatar.src, 152 | width: '100', 153 | height: '100', 154 | alt: this.props.user.username }, 155 | _React2['default'].createElement( 156 | 'p', 157 | null, 158 | this.props.user.username 159 | ) 160 | ) 161 | ) 162 | ); 163 | } 164 | }); 165 | module.exports = exports['default']; 166 | 167 | /***/ }, 168 | /* 4 */ 169 | /***/ function(module, exports, __webpack_require__) { 170 | 171 | // removed by extract-text-webpack-plugin 172 | 173 | /***/ }, 174 | /* 5 */, 175 | /* 6 */ 176 | /***/ function(module, exports, __webpack_require__) { 177 | 178 | // removed by extract-text-webpack-plugin 179 | 180 | /***/ }, 181 | /* 7 */, 182 | /* 8 */, 183 | /* 9 */ 184 | /***/ function(module, exports, __webpack_require__) { 185 | 186 | // removed by extract-text-webpack-plugin 187 | 188 | /***/ }, 189 | /* 10 */, 190 | /* 11 */ 191 | /***/ function(module, exports, __webpack_require__) { 192 | 193 | // removed by extract-text-webpack-plugin 194 | 195 | /***/ }, 196 | /* 12 */, 197 | /* 13 */ 198 | /***/ function(module, exports, __webpack_require__) { 199 | 200 | 'use strict'; 201 | 202 | var _interopRequireDefault = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; 203 | 204 | Object.defineProperty(exports, '__esModule', { 205 | value: true 206 | }); 207 | 208 | __webpack_require__(18); 209 | 210 | var _React = __webpack_require__(1); 211 | 212 | var _React2 = _interopRequireDefault(_React); 213 | 214 | exports['default'] = _React2['default'].createClass({ 215 | displayName: 'Avatar', 216 | 217 | render: function render() { 218 | return _React2['default'].createElement( 219 | 'figure', 220 | { className: 'Avatar' }, 221 | _React2['default'].createElement('img', { className: 'Avatar-img', 222 | src: this.props.src, 223 | width: this.props.width, 224 | height: this.props.height, 225 | alt: this.props.alt }), 226 | _React2['default'].createElement( 227 | 'figcaption', 228 | { className: 'Avatar-caption' }, 229 | this.props.children 230 | ) 231 | ); 232 | } 233 | }); 234 | module.exports = exports['default']; 235 | 236 | /***/ }, 237 | /* 14 */, 238 | /* 15 */ 239 | /***/ function(module, exports, __webpack_require__) { 240 | 241 | __webpack_require__(20); 242 | 243 | 244 | /***/ }, 245 | /* 16 */ 246 | /***/ function(module, exports, __webpack_require__) { 247 | 248 | // removed by extract-text-webpack-plugin 249 | 250 | /***/ }, 251 | /* 17 */, 252 | /* 18 */ 253 | /***/ function(module, exports, __webpack_require__) { 254 | 255 | // removed by extract-text-webpack-plugin 256 | 257 | /***/ }, 258 | /* 19 */, 259 | /* 20 */ 260 | /***/ function(module, exports, __webpack_require__) { 261 | 262 | // removed by extract-text-webpack-plugin 263 | 264 | /***/ } 265 | /******/ ]) 266 | }); 267 | ; -------------------------------------------------------------------------------- /dist/fonts/opensans-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonsmith/react-component-assets-webpack/c59423f60b38482490140058bf32c5443db24585/dist/fonts/opensans-regular-webfont.woff -------------------------------------------------------------------------------- /dist/images/icon-user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonsmith/react-component-assets-webpack/c59423f60b38482490140058bf32c5443db24585/dist/images/icon-user.png -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 20 | 21 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-webpack-assets", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Simon Smith", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "autoprefixer-core": "^5.1.11", 13 | "babel-core": "^5.1.13", 14 | "babel-loader": "^5.0.0", 15 | "css-loader": "^0.12.0", 16 | "extract-text-webpack-plugin": "^0.7.0", 17 | "file-loader": "^0.8.1", 18 | "postcss": "^4.1.6", 19 | "postcss-bem-linter": "necolas/postcss-bem-linter", 20 | "postcss-custom-properties": "^3.3.0", 21 | "postcss-import": "^5.2.2", 22 | "postcss-loader": "^0.4.1", 23 | "style-loader": "^0.12.1", 24 | "url-loader": "^0.5.5", 25 | "webpack": "^1.8.10" 26 | }, 27 | "dependencies": { 28 | "react": "^0.13.2", 29 | "suitcss-base": "^0.8.0", 30 | "suitcss-utils-layout": "^0.4.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/ui-App/index.css: -------------------------------------------------------------------------------- 1 | /** @define App */ 2 | 3 | .App-item { 4 | width: 300px; 5 | padding: 30px; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/ui-App/index.js: -------------------------------------------------------------------------------- 1 | import "suitcss-base"; 2 | import 'styles/base.css'; 3 | import './index.css'; 4 | 5 | import React from 'react'; 6 | import Profile from 'components/ui-Profile'; 7 | 8 | export default React.createClass({ 9 | displayName: 'App', 10 | 11 | render() { 12 | return ( 13 |
14 |
15 | 16 |
17 |
18 | ) 19 | } 20 | }); 21 | -------------------------------------------------------------------------------- /src/components/ui-Avatar/index.css: -------------------------------------------------------------------------------- 1 | /** @define Avatar */ 2 | 3 | :root { 4 | --Avatar-img-borderColor: #333; 5 | } 6 | 7 | .Avatar-img { 8 | border-radius: 10px; 9 | border: 1px solid var(--Avatar-img-borderColor); 10 | } 11 | -------------------------------------------------------------------------------- /src/components/ui-Avatar/index.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | 3 | import React from 'react'; 4 | 5 | export default React.createClass({ 6 | displayName: 'Avatar', 7 | 8 | render() { 9 | return ( 10 |
11 | {this.props.alt} 16 |
17 | {this.props.children} 18 |
19 |
20 | ) 21 | } 22 | }); 23 | -------------------------------------------------------------------------------- /src/components/ui-Profile/fonts/opensans-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonsmith/react-component-assets-webpack/c59423f60b38482490140058bf32c5443db24585/src/components/ui-Profile/fonts/opensans-regular-webfont.woff -------------------------------------------------------------------------------- /src/components/ui-Profile/images/icon-user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonsmith/react-component-assets-webpack/c59423f60b38482490140058bf32c5443db24585/src/components/ui-Profile/images/icon-user.png -------------------------------------------------------------------------------- /src/components/ui-Profile/index.css: -------------------------------------------------------------------------------- 1 | /** @define Profile */ 2 | 3 | @font-face { 4 | font-family: "open_sansregular"; 5 | src: url("fonts/opensans-regular-webfont.woff") format("woff"); 6 | font-weight: normal; 7 | font-style: normal; 8 | } 9 | 10 | .Profile { 11 | background: url("images/icon-user.png") no-repeat right 10px top 10px; 12 | border: 1px solid #ddd; 13 | padding: 10px; 14 | font-family: "open_sansregular"; 15 | border-radius: 4px; 16 | } 17 | 18 | .Profile-wrapAvatar { 19 | text-align: center; 20 | } 21 | -------------------------------------------------------------------------------- /src/components/ui-Profile/index.js: -------------------------------------------------------------------------------- 1 | import 'suitcss-utils-layout'; 2 | import './index.css'; 3 | 4 | import React from 'react'; 5 | import Avatar from 'components/ui-Avatar'; 6 | 7 | export default React.createClass({ 8 | displayName: 'Profile', 9 | 10 | render() { 11 | return ( 12 |
13 |

{this.props.user.fullname}

14 |
15 | 19 |

{this.props.user.username}

20 | 21 |
22 |
23 | ) 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /src/styles/base.css: -------------------------------------------------------------------------------- 1 | @import "./theme.css"; 2 | 3 | body { 4 | color: var(--text-color); 5 | } 6 | 7 | h2 { 8 | font-weight: 400; 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/theme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --text-color: #333; 3 | } 4 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 2 | var webpack = require('webpack'); 3 | var atImport = require('postcss-import'); 4 | var customProperties = require('postcss-custom-properties'); 5 | var bemLinter = require('postcss-bem-linter'); 6 | var autoprefixer = require('autoprefixer-core'); 7 | 8 | module.exports = { 9 | entry: { 10 | homepage: './src/components/ui-App/', 11 | }, 12 | output: { 13 | path: './dist/', 14 | filename: 'app.js', 15 | 16 | // just for testing in the example page 17 | library: 'App', 18 | libraryTarget: 'umd' 19 | }, 20 | resolve: { 21 | modulesDirectories: ['node_modules', './src'], 22 | extensions: ['', '.js', '.jsx'] 23 | }, 24 | module: { 25 | loaders:[ 26 | { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader' }, 27 | { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') }, 28 | { test: /\.(png|jpg)$/, loader: 'file-loader?name=images/[name].[ext]' }, 29 | { test: /\.woff$/, loader: 'file-loader?name=fonts/[name].[ext]' } 30 | ] 31 | }, 32 | // just for testing in the example page 33 | externals: { 34 | 'react': { 35 | commonjs: 'react', 36 | commonjs2: 'react', 37 | amd: 'react', 38 | root: 'React' 39 | } 40 | }, 41 | postcss: [ 42 | atImport({ 43 | path: ['node_modules', './src'] 44 | }), 45 | autoprefixer(), 46 | bemLinter(), 47 | customProperties() 48 | ], 49 | plugins: [ 50 | new ExtractTextPlugin('app.css') 51 | ] 52 | }; 53 | --------------------------------------------------------------------------------