Add utils file. Add html webpack file to autogenerate html.

christopher4lis · Jun 16, 2018 · 9821370 · 9821370
1 parent beaaec0
commit 9821370
Show file tree

Hide file tree

Showing 9 changed files with 375 additions and 88 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8">
-	<title>Canvas Template</title>
-	<style>
-		body {
-			margin: 0;
-		}
-	</style>
+    <meta charset="UTF-8">
+    <title>Canvas Template</title>
+    <style>
+        body {
+            margin: 0;
+        }
+    </style>
 </head>
 <body>
-	<canvas></canvas>
-	<script src="js/canvas.bundle.js"></script>
-</body>
+    <canvas></canvas>
+<script type="text/javascript" src="./js/canvas.bundle.js"></script></body>
 </html>
diff --git a/dist/js/canvas.bundle.js b/dist/js/canvas.bundle.js
diff --git a/dist/js/canvas.bundle.js.map b/dist/js/canvas.bundle.js.map
diff --git a/package.json b/package.json
@@ -10,16 +10,16 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "gsap": "^1.19.1",
-    "jquery": "^3.2.1",
-    "normalize-css": "^2.3.1"
+    "gsap": "^1.19.1"
   },
   "devDependencies": {
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-preset-env": "^1.4.0",
     "browser-sync": "^2.18.8",
     "browser-sync-webpack-plugin": "^1.1.4",
+    "html-webpack-plugin": "^3.2.0",
+    "prettier": "^1.13.5",
     "webpack": "^2.5.1"
   }
 }
diff --git a/src/canvas.js b/src/canvas.js
@@ -1,11 +1,11 @@
-// Initial Setup
+import utils from './utils'
+
 const canvas = document.querySelector('canvas')
 const c = canvas.getContext('2d')
 
 canvas.width = innerWidth
 canvas.height = innerHeight
 
-// Variables
 const mouse = {
     x: innerWidth / 2,
     y: innerHeight / 2
@@ -26,22 +26,6 @@ addEventListener('resize', () => {
     init()
 })
 
-// Utility Functions
-function randomIntFromRange(min, max) {
-    return Math.floor(Math.random() * (max - min + 1) + min)
-}
-
-function randomColor(colors) {
-    return colors[Math.floor(Math.random() * colors.length)]
-}
-
-function distance(x1, y1, x2, y2) {
-    const xDist = x2 - x1
-    const yDist = y2 - y1
-
-    return Math.sqrt(Math.pow(xDist, 2) + Math.pow(yDist, 2))
-}
-
 // Objects
 function Object(x, y, radius, color) {
     this.x = x

diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Canvas Template</title>
+    <style>
+        body {
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+    <canvas></canvas>
+</body>
+</html>
diff --git a/src/utils.js b/src/utils.js
@@ -0,0 +1,16 @@
+function randomIntFromRange(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+function randomColor(colors) {
+    return colors[Math.floor(Math.random() * colors.length)]
+}
+
+function distance(x1, y1, x2, y2) {
+    const xDist = x2 - x1
+    const yDist = y2 - y1
+
+    return Math.sqrt(Math.pow(xDist, 2) + Math.pow(yDist, 2))
+}
+
+module.exports = { randomIntFromRange, randomColor, distance }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,22 +1,25 @@
-const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
+const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
     entry: './src/canvas.js',
     output: {
-        path: __dirname + '/dist/js',
-        filename: 'canvas.bundle.js'
+        path: __dirname + '/dist/',
+        filename: './js/canvas.bundle.js'
     },
     module: {
-        loaders: [{
-            test: /\.js$/,
-            exclude: /(node_modules|bower_components)/,
-            use: {
-                loader: 'babel-loader',
-                options: {
-                    presets: ['env']
+        loaders: [
+            {
+                test: /\.js$/,
+                exclude: /(node_modules|bower_components)/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['env']
+                    }
                 }
             }
-        }]
+        ]
     },
     plugins: [
         new BrowserSyncPlugin({
@@ -25,7 +28,12 @@ module.exports = {
             server: { baseDir: ['dist'] },
             files: ['./dist/*']
         }),
+        new HtmlWebpackPlugin({
+            // Also generate a test.html
+            filename: 'index.html',
+            template: 'src/index.html'
+        })
     ],
     watch: true,
     devtool: 'source-map'
-};
+}