plugins and loaders

app/index.js

@@ -1,13 +1,13 @@
 import Message from './model/message.model';
+import template from './messages.html';
 
 console.log('Index started');
 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) {

app/messages.html

@@ -0,0 +1 @@
+<li>${this.text} - ${this.created}</li>

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"
   }
 }

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;