📱 Code cleanup, dependency upgrade, improved webpack config in web. (#7)

* Updated dependencies

* Moved style.styl to static directory

* Fixed es6 vs nodejs modules conflicts

* Added HtmlWebpackPlugin

* Added CommonsChunkPlugin to webpack config

* Modified accordingly to requests at pull request

* Changed tabs to spaces

.gitignore

@@ -0,0 +1,3 @@
+.idea
+
+*.iml

web/package.json

@@ -1,33 +1,35 @@
 {
-  "name": "mimic",
-  "version": "1.0.0",
-  "main": "index.js",
-  "license": "MIT",
-  "scripts": {
-    "watch": "webpack-dev-server --host 0.0.0.0",
-    "bundle": "webpack --progress --colors --env=prod --optimize-minimize -p"
-  },
-  "repository": {
-    "url": "https://github.com/molenzwiebel/mimic",
-    "type": "git"
-  },
-  "dependencies": {
-    "autoprefixer": "^6.7.7",
-    "css-loader": "^0.27.3",
-    "file-loader": "^0.10.1",
-    "style-loader": "^0.16.0",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.1",
-    "sw-precache-webpack-plugin": "^0.11.3",
-    "ts-loader": "^2.0.3",
-    "typescript": "^2.2.1",
-    "vue": "^2.2.5",
-    "vue-class-component": "^5.0.0",
-    "vue-loader": "^11.3.3",
-    "vue-property-decorator": "^4.0.0",
-    "vue-template-compiler": "^2.2.5",
-    "vue2-animate": "^1.0.4",
-    "webpack": "^2.3.2",
-    "webpack-dev-server": "^2.4.2"
-  }
-}
+    "name": "mimic",
+    "version": "1.0.0",
+    "main": "index.js",
+    "license": "MIT",
+    "scripts": {
+        "watch": "webpack-dev-server --host 0.0.0.0",
+        "bundle": "webpack --progress --colors --env=prod --optimize-minimize -p"
+    },
+    "repository": {
+        "url": "https://github.com/molenzwiebel/mimic",
+        "type": "git"
+    },
+    "dependencies": {
+        "autoprefixer": "7.1.6",
+        "css-loader": "0.28.7",
+        "file-loader": "1.1.5",
+        "style-loader": "0.19.0",
+        "stylus": "^0.54.5",
+        "stylus-loader": "^3.0.1",
+        "sw-precache-webpack-plugin": "^0.11.4",
+        "ts-loader": "3.0.5",
+        "typescript": "2.5.3",
+        "vue": "2.5.2",
+        "vue-class-component": "6.0.0",
+        "vue-loader": "13.3.0",
+        "vue-property-decorator": "6.0.0",
+        "vue-template-compiler": "2.5.2",
+        "vue2-animate": "^1.0.4",
+        "webpack": "3.8.1",
+        "webpack-dev-server": "2.9.3",
+        "html-webpack-plugin": "latest",
+        "friendly-errors-webpack-plugin": "latest"
+    }
+}

web/src/components/champ-select/champ-select.ts

@@ -3,13 +3,13 @@ import Root, { Result } from "../root/root";
 import { Component } from "vue-property-decorator";
 import { ddragon, mapBackground, Role } from "../../constants";
 
-import Timer = require("./timer.vue");
-import Members = require("./members.vue");
-import PlayerSettings = require("./player-settings.vue");
-import SummonerPicker = require("./summoner-picker.vue");
-import ChampionPicker = require("./champion-picker.vue");
+import Timer from "./timer.vue";
+import Members from "./members.vue";
+import PlayerSettings from "./player-settings.vue";
+import SummonerPicker from "./summoner-picker.vue";
+import ChampionPicker from "./champion-picker.vue";
 
-import MagicBackground = require("../../static/magic-background.jpg");
+import MagicBackground from "../../static/magic-background.jpg";
 
 export interface ChampSelectMember {
     assignedPosition: Role | ""; // blind pick has no role

web/src/components/champ-select/champ-select.vue

@@ -12,7 +12,7 @@
 <script lang="ts" src="./champ-select.ts"></script>
 
 <style lang="stylus" scoped>
-    @import "style.styl"
+    @import "../../variables.styl"
 
     .champ-select
         z-index 10000

web/src/components/champ-select/champion-picker.ts

@@ -9,10 +9,10 @@ export default class ChampionPicker extends Vue {
     $root: Root;
     $parent: ChampSelect;
 
-    @Prop
+    @Prop()
     state: ChampSelectState;
 
-    @Prop
+    @Prop()
     show: boolean;
 
     // List of champions that the current user can select. Includes banned champions.

web/src/components/champ-select/champion-picker.vue

@@ -18,7 +18,7 @@
 <script lang="ts" src="./champion-picker.ts"></script>
 
 <style lang="stylus" scoped>
-    @import "./style.styl"
+    @import "../../variables.styl"
 
     button.button
         margin 20px

web/src/components/champ-select/members.ts

@@ -7,7 +7,7 @@ import { ddragon, POSITION_NAMES } from "../../constants";
 export default class Members extends Vue {
     $parent: ChampSelect;
 
-    @Prop
+    @Prop()
     state: ChampSelectState;
 
     /**

web/src/components/champ-select/members.vue

@@ -33,7 +33,7 @@
 <script lang="ts" src="./members.ts"></script>
 
 <style lang="stylus" scoped>
-    @require "./style.styl"
+    @require "../../variables.styl"
 
     .scrollable-content
         // String interpolation is needed because variables are ignored in calc.

web/src/components/champ-select/player-settings.ts

@@ -9,7 +9,7 @@ export default class PlayerSettings extends Vue {
     $root: Root;
     $parent: ChampSelect;
 
-    @Prop
+    @Prop()
     state: ChampSelectState;
 
     // We assume that the summonerId of the user does not change while in champ select.

web/src/components/champ-select/player-settings.vue

@@ -29,7 +29,7 @@
 <script lang="ts" src="./player-settings.ts"></script>
 
 <style lang="stylus" scoped>
-    @require "./style.styl"
+    @require "../../variables.styl"
 
     .player-settings
         position relative

web/src/components/champ-select/summoner-picker.ts

@@ -9,13 +9,13 @@ export default class SummonerPicker extends Vue {
     $root: Root;
     $parent: ChampSelect;
 
-    @Prop
+    @Prop()
     state: ChampSelectState;
 
-    @Prop
+    @Prop()
     show: boolean;
 
-    @Prop
+    @Prop()
     first: boolean;
 
     // Loaded from LCU assets, contains information about which spells are available in which queues.

web/src/components/champ-select/summoner-picker.vue

@@ -20,7 +20,7 @@
 <script lang="ts" src="./summoner-picker.ts"></script>
 
 <style lang="stylus" scoped>
-    @import "./style.styl"
+    @import "../../variables.styl"
 
     .fadeInUp, .fadeOutDown
         animation-duration 0.4s !important

web/src/components/champ-select/timer.ts

@@ -7,7 +7,7 @@ import { ddragon } from "../../constants";
 export default class Timer extends Vue {
     $parent: ChampSelect;
 
-    @Prop
+    @Prop()
     state: ChampSelectState;
 
     currentTime = 0;

web/src/components/champ-select/timer.vue

@@ -25,7 +25,7 @@
 <script lang="ts" src="./timer.ts"></script>
 
 <style lang="stylus" scoped>
-    @require "./style.styl"
+    @require "../../variables.styl"
 
     .timer-state
         box-sizing border-box

web/src/components/lobby/lobby.ts

@@ -3,9 +3,9 @@ import Component from "vue-class-component";
 import Root, { Result } from "../root/root";
 import { mapBackground, MAPS, QUEUES, Role } from "../../constants";
 
-import LobbyMemberComponent = require("./lobby-member.vue");
-import RolePicker = require("./role-picker.vue");
-import InviteOverlay = require("./invite-overlay.vue");
+import LobbyMemberComponent from "./lobby-member.vue";
+import RolePicker from "./role-picker.vue";
+import InviteOverlay from "./invite-overlay.vue";
 import { QueueState } from "../queue/queue";
 
 /**

web/src/components/ready-check/ready-check.ts

@@ -2,7 +2,7 @@ import Vue from "vue";
 import Root, { Result } from "../root/root";
 import { Component } from "vue-property-decorator";
 
-import AudioPath = require("../../static/queue-pop.mp3");
+import AudioPath from "../../static/queue-pop.mp3";
 
 interface ReadyCheckState {
     timer: number;

web/src/components/root/root.ts

@@ -1,11 +1,11 @@
 import Vue from "vue";
 import Component from "vue-class-component";
 
-import Lobby = require("../lobby/lobby.vue");
-import Queue = require("../queue/queue.vue");
-import ReadyCheck = require("../ready-check/ready-check.vue");
-import ChampSelect = require("../champ-select/champ-select.vue");
-import Invites = require("../invites/invites.vue");
+import Lobby from "../lobby/lobby.vue";
+import Queue from "../queue/queue.vue";
+import ReadyCheck from "../ready-check/ready-check.vue";
+import ChampSelect from "../champ-select/champ-select.vue";
+import Invites from "../invites/invites.vue";
 
 // Represents a result from the LCU api.
 export interface Result {

web/src/index.html

@@ -62,7 +62,7 @@
 
 <body>
     <div id="root"></div>
-    <script src="bundle.js"></script>
+    <!-- built files will be auto injected -->
     <script>
         (function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

web/src/index.ts

@@ -1,9 +1,9 @@
 import Vue from "vue";
 
-import Root = require("./components/root/root.vue");
+import Root from "./components/root/root.vue";
 import "vue2-animate/dist/vue2-animate.min.css";
 
-import LcuButton = require("./components/common/lcu-button.vue");
+import LcuButton from "./components/common/lcu-button.vue";
 Vue.component("lcu-button", LcuButton);
 
 new (<any>Root)().$mount("#root");

web/webpack.config.js

@@ -4,6 +4,8 @@
 const path = require("path");
 const webpack = require("webpack");
 const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const FriendlyErrors = require('friendly-errors-webpack-plugin');
 
 module.exports = function(env) {
     return {
@@ -13,7 +15,7 @@ module.exports = function(env) {
             "./src/index.ts"
         ],
         output: {
-            filename: "bundle.js",
+            filename: "[name].js",
             path: path.resolve(__dirname, "dist")
         },
         module: {
@@ -59,7 +61,37 @@ module.exports = function(env) {
                 minify: true,
                 navigateFallback: "/index.html"
             }),
-            new webpack.HotModuleReplacementPlugin()
+            new webpack.HotModuleReplacementPlugin(),
+            new HtmlWebpackPlugin({
+                filename: "index.html",
+                template: path.resolve(__dirname, "src/index.html"),
+                inject: true,
+                minify: {
+                    removeComments: env === "prod",
+                    collapseWhitespace: env === "prod",
+                    removeAttributeQuotes: env === "prod"
+                },
+            }),
+            new FriendlyErrors(),
+            new webpack.optimize.CommonsChunkPlugin({
+                name: "common",
+                minChunks: function (module, count) {
+                    // any required modules inside node_modules are extracted to vendor
+                    return (
+                        module.resource &&
+                        /\.js$/.test(module.resource) &&
+                        module.resource.indexOf(
+                            path.join(__dirname, "../node_modules")
+                        ) === 0
+                    );
+                }
+            }),
+            // extract webpack runtime and module manifest to its own file in order to
+            // prevent commons hash from being updated whenever app bundle is updated
+            new webpack.optimize.CommonsChunkPlugin({
+                name: "common",
+                chunks: ["common"]
+            })
         ]
     };
 };