title: Why is Dynamic require(expression) with webpack not working
body: <p>I'm trying to lazy load my routes state using below code </p>
  
  <pre><code>//router.js
  //usage
  $stateProvider
    .state('async', {
      url: '/async',
      templateUrl: require('!!file-loader?name=templates/[name].[ext]!./../../pages/somepage/page.html'),
      controller: 'asyncController',
      resolve: {
        deps: 
        asyncPreloading: resolverProvider.lazyload('../../pages/somepage/page.module.js')
      }
    })
  </code></pre>
  
  <p>the "resolverProvider.lazyload(path)" when tries to require(path) I get warning like </p>
  
  <blockquote>
    <p>Critical dependencies:
    30:34-55 the request of a dependency is an expression</p>
  </blockquote>
  
  <p>or</p>
  
  <blockquote>
    <p>Critical dependencies:
    30:34-41 require function is used in a way in which dependencies cannot be statically extracted</p>
  </blockquote>
  
  <p>resolverProvider code is below</p>
  
  <pre><code>//provider.js
  'use strict';
  export default function (app) {
    app.provider('resolver', resolverProvider);
  
    function resolverProvider() {
        this.$get = () =&gt; this;
        this.lazyload = lazyload;
    }
  
    function lazyload(module) {
      return (($q, $ocLazyLoad) =&gt; {
        "ngInject";
  
        const deferred = $q.defer();
  
        require.ensure([], function (require) {
            console.log(module);
            const asyncModule = require('../../pages/somepage/page.module.js'); // it works
            const asyncModule = require(module); // doesn't work
            $ocLazyLoad.load({
                name: asyncModule.name,
            });
            deferred.resolve(asyncModule.controller);
        });
        return deferred.promise;
      });
    }
  }
  </code></pre>
  
  <p>Does anyone have a solution for this problem of dynamically <strong>require(expression);</strong></p>