Separated webpack entries from chunks so the big chunks can be cached easily.

lib/roles/app.js

@@ -40,6 +40,9 @@ module.exports = function(options) {
     app.use('/static/build', webpack({
       debug: true
     , devtool: 'eval'
+    , stats: {
+        colors: true
+      }
     }))
   }
 

res/app/app.js

@@ -1,35 +1,40 @@
-require('angular')
-require('angular-route')
-require('angular-touch')
+require.ensure([], function (require) {
 
-require('angular-gettext')
-require('ng-file-upload')
-require('angular-hotkeys')
+  require('angular')
+  require('angular-route')
+  require('angular-touch')
 
-angular.module('app', [
-  'ngRoute',
-  'ngTouch',
-  'gettext',
-  'angularFileUpload',
-  'cfp.hotkeys',
-  require('./layout').name,
-  require('./device-list').name,
-  require('./control-panes').name,
-  require('./menu').name,
-  require('./settings').name,
-  require('./help').name,
-  require('./../common/lang').name,
-  require('./../test/samples/vs-repeat').name
-])
-  .config(['$routeProvider', '$locationProvider',
-    function ($routeProvider, $locationProvider) {
-      $locationProvider.hashPrefix('!');
-      $routeProvider
-        .otherwise({
-          redirectTo: '/devices'
-        })
-    }
+  require('angular-gettext')
+  require('ng-file-upload')
+  require('angular-hotkeys')
+
+  angular.module('app', [
+    'ngRoute',
+    'ngTouch',
+    'gettext',
+    'angularFileUpload',
+    'cfp.hotkeys',
+    require('./layout').name,
+    require('./device-list').name,
+    require('./control-panes').name,
+    require('./menu').name,
+    require('./settings').name,
+    require('./help').name,
+    require('./../common/lang').name,
+    require('./../test/samples/vs-repeat').name
   ])
-  .config(function(hotkeysProvider) {
-    hotkeysProvider.includeCheatSheet = false
-  })
+    .config(['$routeProvider', '$locationProvider',
+      function ($routeProvider, $locationProvider) {
+        $locationProvider.hashPrefix('!');
+        $routeProvider
+          .otherwise({
+            redirectTo: '/devices'
+          })
+      }
+    ])
+    .config(function (hotkeysProvider) {
+      hotkeysProvider.includeCheatSheet = false
+    })
+
+
+})

res/app/views/index.jade

@@ -23,5 +23,6 @@ html
           div(ng-view).fill-height
 
     script var APP = !{JSON.stringify(APP)}
-    script(src='/static/build/bundle.js')
+    script(src='/static/build/commons.entry.js')
+    script(src='/static/build/app.entry.js')
     script(src='/static/bower_components/stf-analytics/analytics.js')

res/auth-ldap/scripts/entry.js

@@ -0,0 +1,5 @@
+require.ensure([], function (require) {
+  require('angular')
+  require('angular-route')
+
+})

res/auth-mock/scripts/entry.js

@@ -0,0 +1,5 @@
+require.ensure([], function (require) {
+  require('angular')
+  require('angular-route')
+
+})

webpack.config.js

@@ -1,13 +1,19 @@
 var pathutil = require('./lib/util/pathutil')
 var webpack = require('webpack')
+var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin")
 
 module.exports = {
   cache: true
-, entry: pathutil.resource('app/app.js')
+, entry: {
+    app: pathutil.resource('app/app.js')
+  , authldap: pathutil.resource('auth-ldap/scripts/entry.js')
+  , authmock: pathutil.resource('auth-mock/scripts/entry.js')
+  }
 , output: {
     path: pathutil.resource('build')
   , publicPath: '/static/build/'
-  , filename: 'bundle.js'
+  , filename: 'entry/[name].entry.js'
+  , chunkFilename: '[id].[hash].chunk.js'
   }
 , stats: {
     colors: true
@@ -78,5 +84,6 @@ module.exports = {
       , ['main']
       )
     )
+  , new CommonsChunkPlugin("entry/commons.entry.js")
   ]
 }