Made webpack 4 work with current setup

package.json

@@ -55,7 +55,7 @@
     "loglevel": "^1.5.0",
     "shortid": "^2.2.6",
     "typescript-collections": "^1.1.2",
-    "vexflow": "^1.2.53"
+    "vexflow": "^1.2.84"
   },
   "devDependencies": {
     "@types/chai": "^4.0.3",
@@ -72,7 +72,7 @@
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-standard": "^3.0.1",
     "file-loader": "^1.1.8",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.1.0",
     "http-server": "^0.11.0",
     "jquery": "^3.2.1",
     "karma": "^2.0.0",
@@ -87,17 +87,18 @@
     "mocha": "^4.1.0",
     "npm-run-all": "^4.1.2",
     "pre-commit": "^1.2.2",
-    "ts-loader": "^3.0.0",
+    "ts-loader": "^4.1.0",
     "tsify": "^3.0.0",
     "tslint": "^5.8.0",
     "tslint-loader": "^3.5.3",
     "typedoc": "^0.10.0",
     "typescript": "^2.6.1",
-    "uglifyjs-webpack-plugin": "^1.0.1",
-    "underscore-template-loader": "^0.8.0",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "underscore-template-loader": "^1.0.0",
     "webpack": "^4.2.0",
-    "webpack-dev-server": "2.7.1",
-    "webpack-merge": "^4.1.1",
+    "webpack-cli": "^2.0.13",
+    "webpack-dev-server": "3.1.1",
+    "webpack-merge": "^4.1.2",
     "webpack-visualizer-plugin": "^0.1.11"
   },
   "config": {

webpack.common.js

@@ -13,36 +13,15 @@ module.exports = {
     },
     resolve: {
         // Add '.ts' and '.tsx' as a resolvable extension.
-        extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
+        extensions: ['.ts', '.tsx', '.js']
     },
     module: {
-        loaders: [
+        rules: [
             // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
             {
                 test: /\.ts$/,
                 loader: 'ts-loader',
                 exclude: /(node_modules|bower_components)/
-            },
-            // FIXME: TSLint loader is horribly slow therefore check only at beginning
-            // https://github.com/wbuchwalter/tslint-loader/issues/76
-            // // ts lint loader. will pre-lint the ts files
-            // {
-            //     test: /\.ts$/,
-            //     enforce: 'pre',
-            //     loader: 'tslint-loader',
-            //     options: {
-            //         typeCheck: true
-            //     }
-            // },
-            // For html loader generation
-            {
-                test: /\.html$/,
-                loader: 'underscore-template-loader'
-            },
-            {
-                test: /\.(jpg|jpeg|gif|png|ico)$/,
-                exclude: /node_modules/,
-                loader: 'file-loader?name=img/[path][name].[ext]&context=./app/images'
             }
         ]
     },
@@ -60,6 +39,7 @@ module.exports = {
         // add a demo page to the build folder
         new HtmlWebpackPlugin({
             template: 'demo/index.html',
+            favicon: 'demo/favicon.ico',
             title: 'OpenSheetMusicDisplay Demo'
         })
     ],

webpack.dev.js

@@ -2,5 +2,6 @@ var merge = require('webpack-merge')
 var common = require('./webpack.common.js')
 
 module.exports = merge(common, {
-    devtool: process.env.DEBUG ? false : 'source-map'
+    devtool: 'source-map',
+    mode: 'development'
 })

webpack.prod.js

@@ -15,15 +15,11 @@ module.exports = merge(common, {
         filename: '[name].min.js',
         path: path.resolve(__dirname, 'build')
     },
+    mode: 'production',
+    optimization: {
+        minimize: true
+    },
     plugins: [
-        new webpack.optimize.UglifyJsPlugin({
-            warnings: false,
-            beautify: false,
-            compress: true,
-            comments: false,
-            sourceMap: true,
-            parallel: true
-        }),
         // build optimization plugins
         new webpack.LoaderOptionsPlugin({
             minimize: true,