From 4550487fa2b4d921e31fe16e00fa82ca0c9dcf81 Mon Sep 17 00:00:00 2001
From: Jozielio Santiago <jozieliosantiago@gmail.com>
Date: Wed, 24 Jan 2018 15:06:31 -0300
Subject: [PATCH] plugins and loaders

---
 app/index.js      |  4 ++--
 app/messages.html |  1 +
 package.json      | 22 +++++++++++-----------
 webpack.config.js | 21 ++++++++++++++++++---
 4 files changed, 32 insertions(+), 16 deletions(-)
 create mode 100644 app/messages.html

diff --git a/app/index.js b/app/index.js
index 1ba113c..16d64f3 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1,4 +1,5 @@
 import Message from './model/message.model';
+import template from './messages.html';
 
 console.log('Index started');
 console.dir(new Message());
@@ -6,8 +7,7 @@ console.dir(new Message());
 /* eslint no-undef: 0 */
 document.getElementById('send').onclick = () => {
   const m = new Message(document.getElementById('message').value);
-  document.getElementById('messages').innerHTML +=
-    `<li>${m.text} ${m.created}</li>`;
+  document.getElementById('messages').innerHTML += template(m);
 };
 
 if (module && module.hot) {
diff --git a/app/messages.html b/app/messages.html
new file mode 100644
index 0000000..17776e2
--- /dev/null
+++ b/app/messages.html
@@ -0,0 +1 @@
+<li>${this.text} - ${this.created}</li>
\ No newline at end of file
diff --git a/package.json b/package.json
index c921988..ee8e49c 100644
--- a/package.json
+++ b/package.json
@@ -33,16 +33,16 @@
   },
   "homepage": "https://github.com/Especializa/es6#readme",
   "devDependencies": {
-    "eslint": "^3.14.0",
-    "eslint-config-airbnb-base": "^11.0.1",
-    "eslint-plugin-import": "^2.2.0",
-    "express": "^4.14.1",
-    "html-es6-template-loader": "^1.0.1",
-    "html-webpack-plugin": "^2.28.0",
-    "http-server": "^0.9.0",
-    "nodemon": "^1.11.0",
-    "webpack": "^2.2.1",
-    "webpack-dev-middleware": "^1.10.0",
-    "webpack-dev-server": "^2.3.0"
+    "eslint": "^4.16.0",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-plugin-import": "^2.8.0",
+    "express": "^4.16.2",
+    "html-es6-template-loader": "^1.0.5",
+    "html-webpack-plugin": "^2.30.1",
+    "http-server": "^0.11.1",
+    "nodemon": "^1.14.11",
+    "webpack": "^3.10.0",
+    "webpack-dev-middleware": "^2.0.4",
+    "webpack-dev-server": "^2.11.1"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 4b6b939..5806491 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const config = {
   entry: './app/index.js',
@@ -8,6 +9,22 @@ const config = {
     filename: 'bundle.js',
     publicPath: '/',
   },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'app', 'index.html'),
+    }),
+  ],
+  module: {
+    loaders: [
+      {
+        loader: 'html-es6-template-loader',
+        test: /\.html$/,
+        query: {
+          transpile: true,
+        },
+      },
+    ],
+  },
 };
 
 if (process.env.NODE_ENV === 'development') {
@@ -18,9 +35,7 @@ if (process.env.NODE_ENV === 'development') {
   config.devServer = {
     hot: true,
   };
-  config.plugins = [
-    new webpack.HotModuleReplacementPlugin(),
-  ];
+  config.plugins.push(new webpack.HotModuleReplacementPlugin());
 }
 
 module.exports = config;