chore(package): update to webpack 4.0.0, lazy load visualizer

Author: christopherthielen

app/bootstrap/ngmodule.js

@@ -7,7 +7,6 @@ import * as angular from "angular";
 import uiRouter from "@uirouter/angularjs";
 import { StickyStatesPlugin } from '@uirouter/sticky-states';
 import { DSRPlugin } from '@uirouter/dsr';
-import { visualizer } from "@uirouter/visualizer";
 import ocLazyLoad from "oclazyload";
 
 import { MAIN_MODULE } from '../main/main.module';
@@ -34,5 +33,5 @@ ngmodule.config(['$uiRouterProvider', '$locationProvider', ($uiRouter, $location
   $uiRouter.plugin(StickyStatesPlugin);
   $uiRouter.plugin(DSRPlugin);
   // Show the UI-Router Visualizer
-  visualizer($uiRouter);
+  import("@uirouter/visualizer").then(module => $uiRouter.plugin(module.Visualizer));
 }]);

app/main/app.states.js

@@ -92,7 +92,7 @@ export const contactsFutureState = {
   url: '/contacts',
   lazyLoad: function(transition) {
     const $ocLazyLoad = transition.injector().get('$ocLazyLoad');
-    return System.import('../contacts/contacts.module').then(mod => $ocLazyLoad.load(mod.CONTACTS_MODULE))
+    return import('../contacts/contacts.module').then(mod => $ocLazyLoad.load(mod.CONTACTS_MODULE))
   }
 };
 
@@ -103,7 +103,7 @@ export const prefsFutureState = {
   url: '/prefs',
   lazyLoad: function(transition) {
     const $ocLazyLoad = transition.injector().get('$ocLazyLoad');
-    return System.import('../prefs/prefs.module').then(mod => $ocLazyLoad.load(mod.PREFS_MODULE))
+    return import('../prefs/prefs.module').then(mod => $ocLazyLoad.load(mod.PREFS_MODULE))
   }
 };
 
@@ -114,7 +114,7 @@ export const mymessagesFutureState = {
   url: '/mymessages',
   lazyLoad: function(transition) {
     const $ocLazyLoad = transition.injector().get('$ocLazyLoad');
-    return System.import('../mymessages/mymessages.module').then(mod => $ocLazyLoad.load(mod.MYMESSAGES_MODULE))
+    return import('../mymessages/mymessages.module').then(mod => $ocLazyLoad.load(mod.MYMESSAGES_MODULE))
   }
 };
 

package.json

@@ -33,14 +33,16 @@
   "devDependencies": {
     "babel-core": "6.26.0",
     "babel-loader": "7.1.3",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-es2015-ie": "6.7.0",
     "browser-sync": "2.23.6",
     "cypress": "2.0.4",
     "npm-run-all": "4.1.2",
     "source-map-loader": "0.2.3",
     "wait-on": "2.1.0",
-    "webpack": "3.11.0",
+    "webpack": "4.0.0",
+    "webpack-cli": "^2.0.9",
     "webpack-dev-server": "3.0.0"
   }
 }

webpack.config.js

@@ -4,29 +4,13 @@ var path = require('path');
 var DEV_SERVER = process.argv[1].indexOf('webpack-dev-server') !== -1;
 var DEV = DEV_SERVER || process.env.DEV;
 
-var plugins = [];
-if (!DEV) {
-  // plugins.push(new webpack.optimize.UglifyJsPlugin({ sourceMap: true, }));
-}
-plugins.push(new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }));
-
-
 module.exports = {
+  mode: DEV ? 'development' : 'production',
   entry: {
     "sampleapp": "./app/bootstrap/bootstrap.js",
-
-    "vendor": [
-      'angular',
-      'oclazyload',
-      '@uirouter/core',
-      '@uirouter/angularjs',
-      '@uirouter/visualizer',
-      '@uirouter/sticky-states',
-      '@uirouter/dsr',
-    ],
   },
 
-  devtool: DEV ? 'source-map' :'source-map',
+  devtool: DEV ? 'eval' :'source-map',
 
   output: {
     path: path.join(__dirname, "_bundles"),
@@ -38,8 +22,6 @@ module.exports = {
     extensions: ['.js']
   },
 
-  plugins: plugins,
-
   module: {
     rules: [
       {
@@ -51,7 +33,7 @@ module.exports = {
       {
         test: /\.js$/,
         exclude: /(node_modules)/,
-        use: { loader: 'babel-loader', options: { presets: ['es2015-ie'] } },
+        use: { loader: 'babel-loader' },
       }
     ]
   },