⬆️ Upgrade webpack

Author: Oskar Karlsson

example/boot.ts

@@ -7,16 +7,8 @@ function main() {
     platformBrowserDynamic().bootstrapModule(AppModule);
 }
 
-if (ENV === 'development' && HMR === true) {
-    // activate hot module reload
-    if (document.readyState === 'complete') {
-        console.clear();
-        main();
-    } else {
-        document.addEventListener('DOMContentLoaded', main);
-    }
-    module.hot.accept();
-} else {
+if (ENV !== 'development') {
     enableProdMode();
-    main();
 }
+
+document.addEventListener('DOMContentLoaded', main);

package.json

@@ -7,9 +7,9 @@
     "prepublish": "npm run build",
     "test": "karma start karma.local.js",
     "test:ci": "karma start karma.ci.js",
-    "start": "webpack-dev-server --inline --progress --profile --colors --watch --display-error-details --display-cached --hot",
+    "start": "webpack-dev-server --progress --profile --colors --watch",
     "build": "copyfiles -u 1 dist/package.json .backup && rimraf dist && tsc && ngc src && copyfiles LICENSE README.md dist && copyfiles -u 1 .backup/package.json dist && rimraf dist/example dist/test .backup",
-    "build:example": "rimraf example-dist && webpack --config webpack.prod.config.js --profile --display-error-details --display-cache && rimraf example-dist/example example-dist/src && copyfiles -u 1 example/style.css example/index.html example-dist",
+    "build:example": "rimraf example-dist && webpack --config webpack.prod.config.js --profile && rimraf example-dist/example example-dist/src && copyfiles -u 1 example/style.css example/index.html example-dist",
     "e2e": "protractor",
     "e2e:ci": "protractor protractor.ci.conf.js",
     "webdriver:update": "webdriver-manager update",
@@ -48,7 +48,7 @@
     "@types/core-js": "^0.9.32",
     "@types/mocha": "^2.2.39",
     "@types/node": "^7.0.5",
-    "awesome-typescript-loader": "^2.2.4",
+    "awesome-typescript-loader": "^3.0.3",
     "copyfiles": "^1.2.0",
     "core-js": "^2.4.1",
     "electron-prebuilt": "^1.4.13",
@@ -68,8 +68,8 @@
     "source-map-loader": "^0.1.6",
     "typescript": "2.0.10",
     "wallaby-webpack": "^0.0.32",
-    "webpack": "^1.13.3",
-    "webpack-dev-server": "^1.16.2",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
     "zone.js": "^0.7.6"
   },
   "greenkeeper": {

webpack.config.js

@@ -1,14 +1,11 @@
 const path = require('path');
 const webpack = require('webpack');
-const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
 
 const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
-const HMR = true;
 
 module.exports = {
     devtool: 'inline-source-map',
     cache: true,
-    debug: false,
 
     entry: {
         'polyfills': './example/polyfills.ts',
@@ -17,18 +14,18 @@ module.exports = {
     },
 
     resolve: {
-        extensions: ['', '.ts', '.js']
+        extensions: ['.ts', '.js']
     },
 
     output: {
-        path: './example',
+        path: path.resolve(__dirname, './example'),
         filename: '[name].bundle.js',
         sourceMapFilename: '[name].js.map',
         chunkFilename: '[id].chunk.js'
     },
 
     module: {
-        preLoaders: [
+        rules: [
             {
                 test: /\.js$/,
                 loader: 'source-map-loader',
@@ -37,9 +34,7 @@ module.exports = {
                     path.resolve(__dirname, 'node_modules/rxjs'),
                     path.resolve(__dirname, 'node_modules/@angular')
                 ]
-            }
-        ],
-        loaders: [
+            },
             { test: /\.ts$/, loader: 'awesome-typescript-loader' },
 
             // Support for CSS as raw text
@@ -49,7 +44,7 @@ module.exports = {
 
             // support for .html as raw text
             { test: /\.html$/,  loader: 'raw-loader', exclude: [ './src/index.html' ] }
-        ]
+        ],
     },
 
     devServer: {
@@ -64,9 +59,7 @@ module.exports = {
     },
 
     plugins: [
-        new ForkCheckerPlugin(),
         new webpack.DefinePlugin({
-            HMR,
             ENV: JSON.stringify(ENV)
         }),
         new webpack.optimize.CommonsChunkPlugin({

webpack.prod.config.js

@@ -1,27 +1,23 @@
 const path = require('path');
 const webpack = require('webpack');
-const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
 const devWebpackConfig = require('./webpack.config');
 
 const ENV = process.env.ENV = process.env.NODE_ENV = 'production';
-const HMR = false;
 
 module.exports = Object.assign({}, devWebpackConfig, {
     devtool: 'source-map',
-    debug: false,
     cache: false,
 
     devServer: undefined,
     output: {
-        path: './example-dist',
+        path: path.resolve(__dirname, './example-dist'),
         filename: '[name].bundle.js',
         sourceMapFilename: '[name].js.map',
         chunkFilename: '[id].chunk.js'
     },
 
     plugins: [
-        new ForkCheckerPlugin(),
-        new webpack.optimize.OccurenceOrderPlugin(true),
+        new webpack.optimize.OccurrenceOrderPlugin(true),
         new webpack.optimize.DedupePlugin(),
         new webpack.optimize.UglifyJsPlugin({
             beautify: false,
@@ -36,7 +32,6 @@ module.exports = Object.assign({}, devWebpackConfig, {
         }),
         new webpack.optimize.CommonsChunkPlugin({ name: ['main', 'vendor', 'polyfills'], minChunks: Infinity }),
         new webpack.DefinePlugin({
-            HMR,
             ENV: JSON.stringify(ENV)
         })
     ]