如何使用 webpack 定义一个函数来动态请求文件

Question

我编写了一个lazyLoadModule函数，用于loazyLoad angular.js模块。但是我发现webpack会要求'../modules/'目录下的所有文件，原因可能是var mod = require("../modules/" + module);执行了。在路由器解析中调用函数时，我想要需要文件。

lazyload.js：

exports.lazyLoadModule = function(module){
  var resolver = {
    'lazyLoad': ['$q', '$ocLazyLoad', function($q, $ocLazyLoad){
      var deferred = $q.defer();
      require.ensure([], function (require) {
        var mod = require("../modules/" + module);
        $ocLazyLoad.load({
          name: mod.name,
        });
        deferred.resolve();
      });
      return deferred.promise;
    }]
  }
  return resolver;
}

app.js：

var lazyLoadModule = require('../util/lazyLoad.js').lazyLoadModule;
angular.module('app', ['ui.router', 'oc.lazyLoad', 'ngMaterial']);
angular.module('app')
  .config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
    function($stateProvider, $urlRouterProvider, $locationProvider) {
      $stateProvider
        .state('home', {
          url: '/home',
          template: require('../modules/home/template/home.html'),
          resolve: lazyLoadModule('home/home.js')
        })
        .state('biz1', {
          url: '/biz1',
          template: require('../modules/biz1/template/biz1.html'),
          resolve: lazyLoadModule('biz1/biz1.js')
        })
      $urlRouterProvider.otherwise('home');
      $locationProvider.html5Mode(false);
      $locationProvider.hashPrefix('!');
    }
  ]);
angular.element(document).ready(function() {
  angular.bootstrap(document, ['app'], {
  });
});

Answer 1

您可以使用bundle-loader 来执行此操作：

(require('bundle?name=[path]!../modules/' + module))(function(mod) {
});

由于name=[path] 参数，这会将模块目录中的每个文件构建为单独的块。