Question

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

lazyload.js：

＆＃13;

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;
}

＆＃13;

app.js：

＆＃13;

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'], {
  });
});

＆＃13;

Answer 1

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

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

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

如何使用webpack定义一个动态需要文件的函数

1 个答案: