Angular1中使用了oclazyload，每路由下的子模块如何打包？？

Question

1,使用了oclazyload做懒加载，但不知道如何在每个路由下打包子模块，如下app.js部分代码

angular.module('main', ['ui.router', 'oc.lazyLoad', 'CommonService'
    ])

.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
    function($stateProvider, $urlRouterProvider, $httpProvider) {
        $httpProvider.interceptors.push('HttpRequestInterceptor');
        $stateProvider
        .state('main', {
                url: '/',
                abstract: true,
                views: {
                  'lazyLoadView': {
                    controller: 'MainCtrl',
                    templateUrl: '/templates/layout.html',
                  }
                },
                resolve: {
                  loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        serie: true,
                        name: 'main',
                        files: ['/js/services/SystemUserService.js','/js/controllers/CommonController.js']
                    });
                  }]
                }
            })
        .state('login', {
            url: '/login',
            views: {
              'lazyLoadView': {
                controller: 'LoginCtrl',
                templateUrl: '/templates/page-login.html',
              }
            },
            resolve: {
              loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load({
                    name: 'main',
                    files: [
                    '/js/services/CommonService.js',
                     '/js/services/SystemUserService.js',
                      '/js/controllers/CommonController.js']
                });
              }]
            }
        })
            
     
            .state('main.map/show', {
                url: 'map/show',
                controller: 'MapCtrl',
                views: {
                  'layout': {
                    templateUrl: '/templates/page-map.html',
                  }
                },
                resolve: {
                  loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'main',
                        files: [
                        '/css/map.css',
                        '/js/services/StationService.js', 
                        '/js/services/DeviceService.js', 
                        '/js/controllers/MapController.js'
                        ]
                    });
                  }]
                }
            })

现在能按路由懒加载，但是，每个路由下要加载很多资源，想按照路由把资源打包下，这样进入该路由时，就不用发太多请求，有想过用webpack ,但不知道怎么做？？

Answer 1

我也是用ui-route管理路由，在合并压缩时采用的grunt，当然webpack应该也没问题。

建议：

1.按模块管理代码，将某view所需的js放到一个文件夹下，发布时只需合并当前文件夹下的所有js文件

2.你代码中的service因为多处使用，可以不用按需加载，单独压缩合并services/文件夹下js文件，在index.html中加载上即可。