Integrated webpack with map.js

nodemon.json

@@ -1,7 +1,4 @@
 {
 	"verbose": true,
-	"ext": "html, js, json, css",
-	"events": {
-		"start": "npm run minify"
-	}
+	"ext": "html, js, json, css"
 }

package.json

@@ -12,6 +12,7 @@
     "debug": "^2.6.6",
     "express": "^4.15.2",
     "express-validator": "^3.1.3",
+    "jquery": "^3.2.1",
     "kerberos": "0.0.17",
     "mellt": "^1.0.0",
     "minifier": "^0.8.1",
@@ -31,7 +32,8 @@
     "passport-twitter-token": "^1.3.0",
     "request": "^2.81.0",
     "slug": "^0.9.1",
-    "socket.io": "^1.4.4",
+    "socket.io": "^1.7.4",
+    "socket.io-client": "^2.0.3",
     "xss": "^0.3.3"
   },
   "devDependencies": {
@@ -53,7 +55,7 @@
     "nodemon": "nodemon --ignore 'static/**/*.min.*' server.js",
     "minify": "minify --template .{{filename}}.min.{{ext}} --clean static",
     "update": "sudo n stable && sudo npm update --save && sudo npm prune",
-    "pack": "webpack --config webpack.config.js"
+    "pack": "./node_modules/.bin/webpack --config webpack.config.js"
   },
   "repository": "Tracman-org/Server",
   "keywords": [

static/js/src/map.js

@@ -1,6 +1,9 @@
 'use strict';
-/* global $ io google mapuser userid disp noHeader */
+/* global google mapuser userid disp noHeader */
 
+// Webpack imports
+import io from 'socket.io-client';
+import $ from 'jquery';
 
 // Variables
 var map, pano, marker, elevator, newLoc;

views/map.html

@@ -95,14 +95,13 @@
 {% block javascript %}
 {{super()}}
 	
-	<!-- require.js -->
-	<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js" integrity="sha256-4FF6zC8o0//sei6CJUD+MJIhewXKgcrV/iA/4HD4A8c=" crossorigin="anonymous"></script>
 	<!-- socket.io -->
-	<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js" integrity="sha256-WKvqiY0jZHWQZIohYEmr9KUC5rEaYEOFTq+ByllJK8w=" crossorigin="anonymous"></script>
+	<!--<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js" integrity="sha256-WKvqiY0jZHWQZIohYEmr9KUC5rEaYEOFTq+ByllJK8w=" crossorigin="anonymous"></script>-->
 	<!-- google maps API -->
 	<script type="application/javascript" src="https://maps.googleapis.com/maps/api/js?key={{mapApi}}&callback=gmapsCb" async defer></script>
 	<!-- client-side javascript -->
-	<script type="application/javascript" src="/static/js/.map.min.js"></script>
+	<script type="application/javascript" src="/static/js/dist/map.js"></script>
+	<!--<script type="application/javascript" src="/static/js/.map.min.js"></script>-->
 	{% if user.id == mapuser.id %}
 		<!-- client-side controls javascript -->
 		<script type="application/javascript" src="/static/js/.map-controls.min.js"></script>

webpack.config.js

@@ -0,0 +1,9 @@
+var path = require('path');
+
+module.exports = {
+	entry: './static/map.js',
+	output: {
+		filename: 'map.js',
+		path: path.resolve(__dirname, 'static/dist')
+	}
+};