dharness · heatherbooker · May 10, 2019 · Jul 19, 2019 · Jul 19, 2019 · Jul 19, 2019
diff --git a/.gitignore b/.gitignore
@@ -1,14 +1,13 @@
 coverage/
-demo/dist/
 
 # Generated build files
-es/
-lib/
-umd/
+dist/
+demo/dist/
 
 # Node
 node_modules/
 npm-debug.log*
 package-lock.json
 
+# Editors
 .DS_Store
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -8,11 +8,13 @@
 
 ## Demo Development Server
 
-- `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+- `npm start` will run a development server with the component's demo app at [http://localhost:8080](http://localhost:8080) with hot module reloading.
 
 ## Building
 
-- `npm run build` will build the component for publishing to npm and also bundle the demo app.
+- `npm run build` will build the component for publishing to npm.
+
+- `npm run build-demo` will build the demo for publishing to github-pages.
 
 - `npm run clean` will delete built resources.
 

diff --git a/demo/assets/index-template.html b/demo/assets/index-template.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>react-chat-window</title>
+  </head>
+  <body>
+    <div id="demo"></div>
+  </body>
+</html>
diff --git a/demo/src/index.js b/demo/src/index.js
@@ -8,8 +8,6 @@ import Footer from './Footer';
 import monsterImgUrl from './../assets/monster.png';
 import './../assets/styles';
 
-
-
 class Demo extends Component {
 
   constructor() {

diff --git a/package.json b/package.json
@@ -2,48 +2,59 @@
   "name": "react-chat-window",
   "version": "1.2.0",
   "description": "react-chat-window React component",
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "files": [
-    "css",
-    "es",
-    "lib",
-    "umd"
-  ],
+  "main": "dist/index.js",
   "scripts": {
-    "build": "nwb build-react-component --copy-files",
-    "clean": "nwb clean-module && nwb clean-demo",
+    "build": "webpack",
+    "build-demo": "npm run build && webpack --config webpack.config.dev.js",
     "lint": "eslint src demo/src",
-    "start": "nwb serve-react-demo",
-    "gh:publish": "nwb build-demo && gh-pages -d demo/dist"
+    "start": "npm run build && webpack-dev-server --config webpack.config.dev.js",
+    "prepublish": "npm run build",
+    "gh:publish": "npm run build-demo && gh-pages -d demo/dist",
+    "clean": "rm -rf demo/dist ; rm -rf dist"
   },
+  "author": "kingofthestack",
+  "homepage": "https://kingofthestack.github.io/react-chat-window/",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kingofthestack/react-chat-window.git"
+  },
+  "keywords": [
+    "react-component",
+    "react",
+    "messenger",
+    "chat"
+  ],
   "dependencies": {
     "emoji-js": "3.2.2",
-    "gh-pages": "^1.2.0",
-    "prop-types": "15.5.10",
-    "react-highlight.js": "1.0.5",
     "react-linkify": "^0.2.1",
     "socket.io-client": "2.0.3"
   },
   "peerDependencies": {
     "react": "15.x"
   },
   "devDependencies": {
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.4",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/polyfill": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
+    "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "eslint": "^5.13.0",
     "eslint-plugin-react": "^7.12.4",
-    "nwb": "^0.23.0",
-    "react": "15.6.1",
-    "react-dom": "15.6.1"
-  },
-  "author": "kingofthestack",
-  "homepage": "https://kingofthestack.github.io/react-chat-window/",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/kingofthestack/react-chat-window.git"
-  },
-  "keywords": [
-    "react-component"
-  ]
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "gh-pages": "^1.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.36.1",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.7.2"
+  }
 }
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -0,0 +1,40 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './demo/src/index.js',
+  mode: 'development',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'demo/dist')
+  },
+  module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env', '@babel/preset-react'],
+          plugins: ["@babel/plugin-proposal-class-properties"]
+        }
+      }
+    }, {
+      test: /\.css$/,
+      use: [
+        'style-loader',
+        'css-loader'
+      ]
+    }, {
+      test: /\.(png|svg|jpg|gif|mp3)$/,
+      use: [
+        'file-loader'
+      ]
+    }]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'demo/assets/index-template.html'
+    })
+  ]
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,34 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  mode: 'production',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env', '@babel/preset-react'],
+          plugins: ["@babel/plugin-proposal-class-properties"]
+        }
+      }
+    }, {
+      test: /\.css$/,
+      use: [
+        'style-loader',
+        'css-loader'
+      ]
+    }, {
+      test: /\.(png|svg|jpg|gif|mp3)$/,
+      use: [
+        'file-loader'
+      ]
+    }]
+  }
+}