Merge pull request #222 from opensheetmusicdisplay/greenkeeper/webpack-4.2.0

Updated webpack, webpack-dev-server and webpack-html to latest version

.travis.yml

@@ -1,7 +1,7 @@
 sudo: false
 language: node_js
 node_js:
-- '5'
+- '6'
 notifications:
   email: false
   slack:

karma.conf.js

@@ -49,8 +49,9 @@ module.exports = function (config) {
 
             // copy parts of webpack configuration to use minimal effort here
             devtool: 'cheap-module-eval-source-map',
+            mode: 'production',
             module: {
-                loaders: common.module.loaders
+                rules: common.module.rules
             },
             resolve: common.resolve
         },

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",
@@ -82,22 +82,23 @@
     "karma-firefox-launcher": "^1.0.0",
     "karma-mocha": "^1.1.1",
     "karma-mocha-reporter": "^2.0.4",
-    "karma-webpack": "^2.0.9",
+    "karma-webpack": "^3.0.0",
     "karma-xml2js-preprocessor": "^0.0.3",
     "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",
-    "webpack": "^3.5.5",
-    "webpack-dev-server": "2.7.1",
-    "webpack-merge": "^4.1.1",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "underscore-template-loader": "^1.0.0",
+    "webpack": "^4.2.0",
+    "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'
             }
         ]
     },
@@ -53,13 +32,13 @@ module.exports = {
         }),
         new webpack.EnvironmentPlugin({
             STATIC_FILES_SUBFOLDER: false, // Set to other directory if NOT using webpack-dev-server
-            NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
             DEBUG: false,
             DRAW_BOUNDING_BOX_ELEMENT: false //  Specifies the element to draw bounding boxes for (e.g. 'GraphicalLabels'). If 'all', bounding boxes are drawn for all elements.
         }),
         // 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,15 @@ module.exports = merge(common, {
         filename: '[name].min.js',
         path: path.resolve(__dirname, 'build')
     },
+    mode: 'production',
+    optimization: {
+        minimize: true,
+        splitChunks: {
+            chunks: 'all',
+            name: false
+        }
+    },
     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,