Updated build for production compilation

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "repository": "c-dante/three",
   "scripts": {
-    "compiler": "rm -rf bin && ./node_modules/webpack/bin/webpack.js",
+    "compiler": "rm -rf bin && NODE_ENV=production ./node_modules/webpack/bin/webpack.js",
     "aws-deploy": "aws s3 sync --acl public-read --delete ./bin",
     "linter": "./node_modules/eslint/bin/eslint.js --fix src/",
     "server": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --inline --progress",
@@ -39,6 +39,8 @@
     "pug-loader": "^2.3.0",
     "sass-loader": "^5.0.0",
     "style-loader": "^0.13.1",
+    "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony",
+    "uglifyjs-webpack-plugin": "^0.1.4",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0"
   },

src/index.pug

@@ -2,17 +2,12 @@ doctype
 html(lang="en")
 	head
 		meta(charset="UTF-8")
-		title Demo Page
+		title three experiments
 		link(
 			rel="stylesheet"
 			type="text/css"
 			href="./index.css"
 		)
-		link(
-			rel="shortcut icon"
-			type="image/x-icon"
-			href="./favicon.ico"
-		)
 	body
 		h1.hidden.content-loading Loading...
 

src/main.js

@@ -53,7 +53,7 @@ window.addEventListener('resize', () => {
 
 
 // Add a box to the scene
-new Array(10).fill(0).map(() => {
+const boxes = new Array(10).fill(0).map(() => {
 	const mesh = new Mesh(box, redWireMat);
 
 	mesh.position.x = fp.random(-500, 500);
@@ -76,19 +76,14 @@ const Controls = {
 	TurnDown: ['ArrowDown'],
 };
 const Settings = {
-	RunSpeed: 5,
+	RunSpeed: 10,
 	TurnSpeed: Math.PI / 180,
 };
 const State = {
 	camera,
 	scene,
 	renderer,
-	move: {
-		forward: new Vector3(),
-		back: new Vector3(),
-		left: new Vector3(),
-		right: new Vector3(),
-	},
+	boxes,
 };
 
 const moveTarget = (target, keyState) => {
@@ -119,34 +114,22 @@ const moveTarget = (target, keyState) => {
 	}
 };
 
-State.moveHelpers = fp.mapValues((x) => {
-	const h = new ArrowHelper(x, 50, 0xffffff);
-	// h.position.x = boxMesh.position.x;
-	// h.position.y = boxMesh.position.y;
-	// h.position.z = boxMesh.position.z;
-	scene.add(h);
-	return h;
-}, State.move);
-
 // Build render pipeline
 const pipeline = fp.flow(
 	() => moveTarget(State.camera, $.keys()),
-	() => fp.keys(State.move).forEach((key) => {
-		State.moveHelpers[key].setDirection(State.move[key]);
-	}),
 	() => State.renderer.render(State.scene, State.camera)
 );
 
 // Hook debug @todo: better debugging
-const debug = document.querySelector('.debug');
-$.interval(() => (debug.innerHTML = debugTpl({
-	obj: {
-		...fp.mapValues(
-			v => v.toArray().map(x => x.toFixed(3)),
-			State.move
-		),
-	},
-})), 250);
+// const debug = document.querySelector('.debug');
+// $.interval(() => (debug.innerHTML = debugTpl({
+// 	obj: {
+// 		...fp.mapValues(
+// 			v => v.toArray().map(x => x.toFixed(3)),
+// 			State.move
+// 		),
+// 	},
+// })), 250);
 
 // Init
 setTimeout(() => updateScreen(main, renderer, camera), 25);

src/main.scss

@@ -13,6 +13,8 @@
 }
 
 .debug {
+	display: none;
+
 	position: absolute;
 	top: 0;
 	right: 0;

webpack.config.js

@@ -1,6 +1,15 @@
 const path = require('path');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
+const plugins = [];
+if (process.env.NODE_ENV === 'production') {
+	plugins.push(
+		new UglifyJSPlugin()
+	);
+}
 
 module.exports = {
+	plugins,
 	module:	{
 		rules: [
 			{