chore(setup): update webpack to webpack 4

Author: frederikprijck

README.md

@@ -14,7 +14,7 @@ This is, by no means, ment to be used blindly in production.
 - [x] TypeScript 2
 - [x] TSLint
 - [x] @types
-- [x] Webpack 3 + Webpack dev server
+- [x] Webpack 4 + Webpack dev server
 - [x] Karma + Jasmine
 - [ ] Protractor
 - [x] Styling using SASS

package.json

@@ -35,16 +35,16 @@
     "@types/core-js": "^0.9.43",
     "@types/jasmine": "^2.8.2",
     "@types/node": "^9.3.0",
-    "@types/webpack-env": "^1.13.3",
+    "@types/webpack-env": "^1.13.5",
     "angular-mocks": "^1.6.7",
-    "awesome-typescript-loader": "^3.4.1",
+    "awesome-typescript-loader": "^4.0.0-0",
     "core-js": "^2.5.3",
     "coveralls": "^3.0.0",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.5",
-    "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^2.30.1",
+    "css-loader": "^0.28.11",
+    "extract-text-webpack-plugin": "v4.0.0-beta.0",
+    "file-loader": "^1.1.11",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.0.7",
     "http-server": "^0.11.0",
     "istanbul-instrumenter-loader": "^3.0.0",
     "jasmine-core": "^3.0.0",
@@ -54,24 +54,25 @@
     "karma-jasmine": "^1.1.1",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.9",
+    "karma-webpack": "v4.0.0-beta.0",
     "ng-annotate-loader": "^0.6.1",
     "node-sass": "^4.7.2",
-    "remap-istanbul": "^0.10.0",
+    "remap-istanbul": "^0.10.1",
     "rimraf": "^2.6.2",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.20.0",
-    "tslint": "^5.8.0",
-    "tslint-loader": "^3.5.3",
-    "typescript": "^2.6.2",
-    "uglifyjs-webpack-plugin": "^1.1.4",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.10.1",
-    "webpack-merge": "^4.1.1"
+    "sass-loader": "^6.0.7",
+    "style-loader": "^0.20.3",
+    "tslint": "^5.9.1",
+    "tslint-loader": "^3.6.0",
+    "typescript": "^2.7.2",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "webpack": "^4.2.0",
+    "webpack-cli": "^2.0.12",
+    "webpack-dev-server": "^3.1.1",
+    "webpack-merge": "^4.1.2"
   },
   "dependencies": {
     "@uirouter/angularjs": "1.0.14",
     "angular": "^1.6.7",
     "bootstrap": "^3.3.7"
   }
-}
+}

webpack-dev.config.js

@@ -5,7 +5,7 @@ const DESTINATION = path.resolve( __dirname, '.tmp' );
 
 module.exports = webpackMerge(commonConfig, {
     devtool: 'cheap-module-source-map',
-
+    mode: 'development',
     devServer: {
         contentBase: path.join(__dirname, ".tmp"),
         compress: true,

webpack-prd.config.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
 const commonConfig = require('./webpack.config.js');
 const DESTINATION = path.resolve( __dirname, 'public' );
@@ -10,22 +9,13 @@ const DESTINATION = path.resolve( __dirname, 'public' );
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 module.exports = webpackMerge(commonConfig, {
+    mode: 'production',
     output: {
         path: DESTINATION,
         filename: 'js/[name]-bundle-[chunkhash].js'
     },
 
     plugins: [
-        new UglifyJsPlugin(),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'vendor',
-            minChunks(module, count) {
-                var context = module.context;
-                return context && context.indexOf('node_modules') >= 0;
-            },
-        }),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'manifest'
-        }),
+        new UglifyJsPlugin()
     ]
 });

webpack-test.config.js

@@ -15,6 +15,8 @@ module.exports = {
         extensions: ['.ts', '.js']
     },
 
+    mode: 'development',
+
     module: {
         rules: [
             {

webpack.config.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const webpack = require('webpack');
 const ROOT = path.resolve( __dirname, 'src' );
 
 /**