Updated of version webpack

Author: bytesleo

README.md

@@ -1,44 +1,55 @@
 
 # react-webpack-component
 
-[![NPM version](https://badge.fury.io/js/react-webpack-component.svg)](https://npmjs.org/package/react-webpack-component) [![Build Status](https://travis-ci.org/kevoj/react-webpack-component.svg?branch=master)](https://travis-ci.org/kevoj/react-webpack-component) [![dependencies Status](https://david-dm.org/kevoj/react-webpack-component/status.svg)](https://david-dm.org/kevoj/react-webpack-component) [![devDependencies Status](https://david-dm.org/kevoj/react-webpack-component/dev-status.svg)](https://david-dm.org/kevoj/react-webpack-component?type=dev)
-[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](https://raw.githubusercontent.com/kevoj/role-calc/master/LICENSE)
+[![NPM version](https://badge.fury.io/js/react-webpack-component.svg)](https://npmjs.org/package/react-webpack-component) [![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](https://raw.githubusercontent.com/kevoj/role-calc/master/LICENSE)
 
-> Base structure in Webpack for the creation of npm modules in React
+> Base structure in Webpack 4 for the creation of npm modules in React
 
 ### Installation
 
-* **Clone**
+**1. Clone**
 
 ```bash
-git clone https://github.com/kevoj/react-webpack-component.git
-cd react-webpack-component
+git clone https://github.com/kevoj/react-webpack-component.git your-react-component-name
+cd [your-react-component-name]
 npm install
 ```
+**2. Set name of the library**
+Replace in **package.json**
 
-* **Create Link**
+```json
+{
+ "name": "your-react-component-name",
+ ...
+}
+```
+**3. Create Link**
 
 ```bash
 npm run build
 npm link
 ```
+## Development
 
 ### Start
 
+Watch changes in mode development
+
 ```bash
 npm start
 ```
 
 ### Build
 
+Compile in mode production
+
 ```bash
 npm run Build
 ```
-
 ### Structure
 
 <pre> 
-|-- build (Compiled)
+|-- dist (Compiled)
 | `-- index.js
 |-- src (Your code here, view example in code source...)
 | |-- components
@@ -49,16 +60,15 @@ npm run Build
 ### Test the component in a project
 
 ```bash
-mkdir new-project (React project)
-cd new-project
-npm link react-webpack-component
+cd Existing-React-Project
+npm link your-react-component-name
 ```
 
 ### At this point you can already use your component, usage:
 
 ```javascript
 import React, { Component } from 'react';
-import { Example } from 'react-webpack-component'
+import { Example } from 'your-npm-name'
 
 class HelloWorld extends Component {
  render() {
@@ -70,6 +80,38 @@ class HelloWorld extends Component {
 export default HelloWorld;
 ```
 
+## Production
+
+### Publish in NPM
+
+**1. Compile to production**
+
+```bash
+npm run build
+```
+
+**2. Login**
+
+```bash
+npm login
+# login with your credentials in https://www.npmjs.com/
+```
+
+**3. Upload package**
+
+**Note:** Verify your version of the component in **package.json**, you can not upload the same version twice
+
+```bash
+npm publish
+# Available in https://www.npmjs.com/package/your-react-component-name
+```
+Now, you can install your package with:
+
+```bash
+npm install your-react-component-name--save
+# :)
+```
+
 ## License
 
 MIT © [Leonardo Rico](https://github.com/kevoj/react-webpack-component/blob/master/LICENSE)

build/index.js

@@ -0,0 +1,110 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ // The module cache
+/******/ var installedModules = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/
+/******/ // Check if module is in cache
+/******/ if(installedModules[moduleId]) {
+/******/ return installedModules[moduleId].exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = installedModules[moduleId] = {
+/******/ i: moduleId,
+/******/ l: false,
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ // Flag the module as loaded
+/******/ module.l = true;
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = modules;
+/******/
+/******/ // expose the module cache
+/******/ __webpack_require__.c = installedModules;
+/******/
+/******/ // define getter function for harmony exports
+/******/ __webpack_require__.d = function(exports, name, getter) {
+/******/ if(!__webpack_require__.o(exports, name)) {
+/******/ Object.defineProperty(exports, name, {
+/******/ configurable: false,
+/******/ enumerable: true,
+/******/ get: getter
+/******/ });
+/******/ }
+/******/ };
+/******/
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = function(exports) {
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/
+/******/ // getDefaultExport function for compatibility with non-harmony modules
+/******/ __webpack_require__.n = function(module) {
+/******/ var getter = module && module.__esModule ?
+/******/ function getDefault() { return module['default']; } :
+/******/ function getModuleExports() { return module; };
+/******/ __webpack_require__.d(getter, 'a', getter);
+/******/ return getter;
+/******/ };
+/******/
+/******/ // Object.prototype.hasOwnProperty.call
+/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ // __webpack_public_path__
+/******/ __webpack_require__.p = "";
+/******/
+/******/
+/******/ // Load entry module and return exports
+/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./src/components/Example.js":
+/*!***********************************!*\
+ !*** ./src/components/Example.js ***!
+ \***********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar ExampleComponent = function (_Component) {\n _inherits(ExampleComponent, _Component);\n\n function ExampleComponent() {\n _classCallCheck(this, ExampleComponent);\n\n return _possibleConstructorReturn(this, (ExampleComponent.__proto__ || Object.getPrototypeOf(ExampleComponent)).apply(this, arguments));\n }\n\n _createClass(ExampleComponent, [{\n key: 'render',\n value: function render() {\n return _react2.default.createElement(\n 'div',\n null,\n 'This is so Example!'\n );\n }\n }]);\n\n return ExampleComponent;\n}(_react.Component);\n\nexports.default = ExampleComponent;\n\n//# sourceURL=webpack:///./src/components/Example.js?");
+
+/***/ }),
+
+/***/ "./src/index.js":
+/*!**********************!*\
+ !*** ./src/index.js ***!
+ \**********************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Example = undefined;\n\nvar _Example = __webpack_require__(/*! ./components/Example */ \"./src/components/Example.js\");\n\nvar _Example2 = _interopRequireDefault(_Example);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nexports.Example = _Example2.default;\n\n/**\n * Usage:\n * import { Example } from 'react-webpack-component'\n * import * as ReactWebpackComponent from 'react-webpack-component'\n */\n\n//# sourceURL=webpack:///./src/index.js?");
+
+/***/ }),
+
+/***/ "react":
+/*!************************!*\
+ !*** external "react" ***!
+ \************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+eval("module.exports = require(\"react\");\n\n//# sourceURL=webpack:///external_%22react%22?");
+
+/***/ })
+
+/******/ });