Add HTML Reload

jcastano-xk · jcastano-xk · commit 8160f0872d4a · 2017-01-12T16:20:46.000-05:00
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title>get shit done =)</title>
+  </head>
+  <body>
+    
+  </body>
+</html>
diff --git a/app/index.js b/app/index.js
@@ -1,6 +1,12 @@
 // Entry point with ES6 support
 // Happy Coding!
-'use strict';
-
-const webpackReadyDebugMessage = '%cbundle ready, happy coding :)...';
-console.log(webpackReadyDebugMessage, "color: #ddd;font-style: italic;}");
+/* @jsx h*/
+module.hot.accept();
+const $ = require('jquery');
+$.fn.red = function() {
+  return this.each(function () {
+    $(this).css({
+      color: 'blue'
+    });
+  })
+}
diff --git a/package.json b/package.json
@@ -9,8 +9,14 @@
   },
   "author": "kmilov <kmilocv@icloud.com>",
   "devDependencies": {
+    "axios": "^0.15.2",
     "babel-core": "^6.1.2",
     "babel-loader": "^6.1.0",
+    "babel-preset-es2015": "^6.14.0",
+    "babel-preset-react": "^6.11.1",
+    "html-webpack-plugin": "^2.26.0",
+    "jquery": "^3.1.1",
+    "reload-html-webpack-plugin": "^0.1.2",
     "webpack": "^1.12.4",
     "webpack-dev-server": "^1.12.1"
   }
diff --git a/public/index.html b/public/index.html
diff --git a/server.js b/server.js
@@ -21,7 +21,7 @@ var bundler = new webpackDevServer(compiler, {
 
   // Webpack Dev Server takes this path to save the output file
   publicPath: '/',
-  
+
   hot: true,
   quite: false,
   noInfo: false,
@@ -30,6 +30,6 @@ var bundler = new webpackDevServer(compiler, {
   }
 })
 
-bundler.listen(8080, 'localhost', function() {
+bundler.listen(3000, 'localhost', function() {
   console.log("Bundling project, please wait...");
 })
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,32 +1,49 @@
 var webpack = require('webpack');
 var path = require('path');
 
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+var ReloadPlugin = require('reload-html-webpack-plugin');
+const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
+  template: 'app/index.html',
+  inject: 'body'
+});
+
 module.exports = {
   devtool: 'eval',
 
   entry: [
     'webpack/hot/dev-server',
-    'webpack-dev-server/client?http://localhost:8080',
+    'webpack-dev-server/client?http://localhost:3000',
     path.resolve(__dirname, 'app', 'index.js')
   ],
 
   output: {
     path: path.resolve(__dirname, 'public'),
     filename: 'bundle.js',
-    
+
     // We need to give Webpack a path. It does not actually need it,
     // because files are kept in memory in webpack-dev-server, but an
     // error will occur if nothing is specified.
-    publicPath: path.resolve(__dirname, 'public')
+    publicPath: '/'
   },
 
-  modules: {
+  module: {
     loaders: [
-      {test: /\.html$/, loader: 'babel-lader', exclude: [path.resolve(__dirname,'node_modules')]},
-      {test: /\.css$/, loader: 'style!css'}
+      {
+        test: /\.jsx?$/,
+        exclude: [path.resolve(__dirname,'node_modules')],
+        loader: 'babel-loader',
+        query: {
+          presets: ['es2015', 'react'],
+        }
+      }
     ]
   },
 
-  plugins: [new webpack.HotModuleReplacementPlugin()]
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    HTMLWebpackPluginConfig,
+    new ReloadPlugin()
+  ]
 
 }
