codematix · May 8, 2018 12:57 · May 8, 2018
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "web-client",
+  "version": "1.0.0",
+  "description": "Web Client",
+  "main": "index.js",
+  "author": "[email protected]",
+  "license": "SEE LICENSE IN LICENSE",
+  "private": true,
+  "scripts": {
+    "build": "webpack --mode=development --env=development",
+    "build:prod": "webpack --mode=production --env=production -p",
+    "start": "webpack-dev-server --mode=development --env=development --content-base=public"
+  },
+  "devDependencies": {
+    "clean-webpack-plugin": "^0.1.19",
+    "copy-webpack-plugin": "^4.5.1",
+    "cpy-cli": "^1.0.1",
+    "css-loader": "^0.28.11",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.7.0",
+    "webpack-cli": "^2.1.2",
+    "webpack-dev-server": "^3.1.4"
+  }
+}
diff --git a/public-js-main.js b/public-js-main.js
diff --git a/src-index.html b/src-index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Web Client</title>
+  </head>
+  <body>
+    <div class="logo"></div>
+    <h1 class="title" id="js-title"></h1>
+    <ul class="alert-button-container">
+      <li><button class="alert-button">Success!</button></li>
+      <li><button class="alert-button">Information</button></li>
+      <li><button class="alert-button">Error</button></li>
+    </ul>
+    <textarea name="sourceContent" id="sourceContent" cols="30" rows="10"></textarea>
+    <textarea name="targetContent" id="targetContent" cols="30" rows="10"></textarea>
+    <script src="/js/main.js"></script>
+  </body>
+</html>
diff --git a/src-js-alertButtons.js b/src-js-alertButtons.js
@@ -0,0 +1,6 @@
+export const setupButtons = () => {
+  document.querySelector('.alert-button-container').addEventListener('click', evt => {
+    if (!evt.target.matches('.alert-button')) return false
+    alert(evt.target.innerText)
+  })
+}
diff --git a/src-js-echoText.js b/src-js-echoText.js
@@ -0,0 +1,5 @@
+export const setupEcho = (sourceEl, targetEl) => {
+  sourceEl.addEventListener('keypress', evt => {
+    targetEl.value = evt.target.value
+  })
+}
diff --git a/src-js-index.js b/src-js-index.js
@@ -0,0 +1,10 @@
+const alertButtons = require('./alertButtons')
+const echoText = require('./echoText')
+
+require('../scss/index.scss')
+
+document.addEventListener('DOMContentLoaded', () => {
+  alertButtons.setupButtons()
+  document.getElementById('js-title').innerText = 'Hello WebClient'
+  echoText.setupEcho(document.querySelector('#sourceContent'), document.querySelector('#targetContent'))
+})
diff --git a/src-scss-index.scss b/src-scss-index.scss
@@ -0,0 +1,17 @@
+body {
+  font-family: 'Helvetica Neue', 'Helvetica', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 14px;
+
+  .logo {
+    background: url('../images/box.png') no-repeat;
+    background-size: contain;
+    height: 50px;
+    width: 50px;
+    padding-right: 5px;
+    float: left;
+  }
+
+  .title {
+    padding: 10px;
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,43 @@
+const path = require('path')
+
+const CleanWebpackPlugin = require('clean-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+
+module.exports = env => {
+  console.warn(`env is '${env}'`)
+  const isDev = (env === 'development')
+
+  const outputFileName = isDev ? '[name].js' : '[name].[hash].js'
+
+  return [
+    {
+      mode: isDev ? 'development' : 'production',
+      entry: './src/js/index.js',
+      output: {
+        filename: `js/${outputFileName}`,
+        path: path.resolve(__dirname, './public')
+      },
+      devtool: isDev ? 'eval-source-map' : 'source-map',
+      module: {
+        rules: [
+          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+          { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
+          { test: /\.png$/, use: 'url-loader'}
+        ]
+      },
+      plugins: [
+        new CleanWebpackPlugin(['public']),
+        new CopyWebpackPlugin([
+          { from: 'src/index.html' }
+        ], { debug: true })
+      ],
+      devServer: {
+        contentBase: path.join(__dirname, "public"),
+        index: 'index.html',
+        lazy: false,
+        compress: true,
+        port: 8080
+      }
+    }
+  ]
+}