title: Webpack Angular Code Splitting
body: <p>I currently have a project set up like this: <a href="https://i.stack.imgur.com/6fIE6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6fIE6.png" alt="enter image description here"></a> Since angular material is a big download for my project,a white screen stays loading for about 45s. I am trying to do some code splitting to make my application load faster but I am getting errors. Code splitting does not seem to work for me.</p>
  
  <p><strong>core/app.module.js</strong></p>
  
  <pre><code>'use strict';
  
  require.ensure([], function (require) {
  
      require('angular/angular.min');
      require('angular-aria/angular-aria.min');
      require('angular-animate/angular-animate.min');
      require('angular-ui-router/release/angular-ui-router.min');
  
  }, 'common');
  
  var page1Module = require('./../page1/page1.module');
  var page2Module = require('./../page2/page2.module');
  var appRunBlock = require('./app.run');
  var appConfig = require('./app.config');
  
  var moduleName = 'app';
  
  var app = angular.module(moduleName, [
          'ui.router',
          page1Module,
          page2Module
      ])
      .config(appConfig)
      .run(appRunBlock);
  
  module.exports = moduleName;
  </code></pre>
  
  <p><strong>page1/page1.module.js</strong></p>
  
  <pre><code>'use strict';
  
  require.ensure([], function (require) {
  
      require('angular-material/modules/js/core/core.min.js');
      require('angular-material/modules/js/core/core.min.css');
      require('angular-material/modules/js/core/default-theme.js');
      require('angular-material/modules/js/button/button.min.js');
      require('angular-material/modules/js/button/button.min.css');
  
  }, 'page1');
  
  var page1Route = require('./page1.route');
  var page1Controller = require('./page1.controller');
  
  var moduleName = 'app.page1';
  
  angular.module(moduleName, [
          'material.components.button'
      ])
      .config(page1Route)
      .controller('Page1Controller', page1Controller);
  
  module.exports = moduleName;
  </code></pre>
  
  <p><strong>page2/page2.module.js</strong></p>
  
  <pre><code>'use strict';
  
  require.ensure([], function (require) {
  
      require('angular-material/modules/js/core/core.min.js');
      require.include('angular-material/modules/js/core/core.min.css');
      require.include('angular-material/modules/js/core/default-theme.js');
      require('angular-material/modules/js/toolbar/toolbar.min.js');
      require('angular-material/modules/js/toolbar/toolbar.min.css');
      require('angular-material/modules/js/content/content.min.js');
      require('angular-material/modules/js/content/content.min.css');
      require('angular-material/modules/js/input/input.min.js');
      require('angular-material/modules/js/input/input.min.css');
  
  }, 'page2');
  
  var page2Route = require('./page2.route');
  var page2Controller = require('./page2.controller');
  
  var moduleName = 'app.page2';
  
  angular.module(moduleName, [
          'material.components.toolbar',
          'material.components.content',
          'material.components.input'
      ])
      .config(page2Route)
      .controller('Page2Controller', page2Controller);
  
  module.exports = moduleName;
  </code></pre>
  
  <p>I have this <strong>webpack.config.js</strong></p>
  
  <pre><code>var webpack = require('webpack');
  var CopyWebpackPlugin = require('copy-webpack-plugin');
  var path = require('path');
  
  var webpack_config = {
      context: path.join(__dirname + '/app'),
      entry: {
          app: './core/app.module.js'
      },
      output: {
          path: path.join(__dirname + '/release'),
          publicPath: 'http://localhost:8080/',
          filename: '/js/[name].js',
          chunkFilename: '/js/[name].js'
      },
      module: {
          loaders: [
              {
                  test: /\.css$/,
                  exclude: 'node_modules',
                  loader: 'style!css'
              },
              {
                  test: /\.scss$/,
                  exclude: 'node_modules',
                  loader: 'style!css!sass'
              },
              {
                  test: /\.html$/,
                  exclude: 'node_modules',
                  loader: 'ngtemplate?relativeTo=' + (path.join(__dirname, './app')) + '/!html?' +
                  JSON.stringify({attrs: ['img:src', 'img:ng-src', 'md-icon:md-svg-src']})
              }
          ]
      },
      plugins: [
          new CopyWebpackPlugin([
              {from: './index.html', to: './index.html'}
          ])
      ],
      devServer: {
          contentBase: path.resolve('./release')
      },
      watch: true
  };
  
  module.exports = webpack_config;
  </code></pre>
  
  <p>I have tried to use require.include inside require.ensure to load my files as I need them and it does not work. I have put my libs path in the require.ensure([]) array and it does not work.  </p>
  
  <p>The only time it works if I put a second entry in webpack.config.js and put all my libs in a common chunk named 'vendor' or if I use require() not require.ensure(). </p>
  
  <p>Loading my angular material lib is about 1.5 MB and it takes about 30s or 1m.  When the app load it has a white screen until all libs load.  That is the reason I need to code split. I am using webpack-dev-server and it throws the following errors <a href="https://i.stack.imgur.com/mK9IL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mK9IL.png" alt="enter image description here"></a></p>
  
  <p>Please help.</p>