AngularJS 和 Webpack 集成

我正在寻找一些使用帮助webpack http://webpack.github.io/docs/对于大型 AngularJS 应用程序。我们使用基于功能的文件夹结构（每个功能/页面都有一个模块，并且它们有控制器、指令）。我已经成功配置了 webpack 使其与 Grunt 一起工作，它生成一个包。我想创建块，因为它将成为一个大型应用程序，我们希望异步加载模块（页面/功能）工件。

我正在浏览一些要使用的 webpack 示例'code splitting' using require([deps],fn )句法。但是我无法延迟加载这些块。首先，我不知道具体在哪里，在 AngularJS 将用户路由到下一页之前，我需要导入这些块。我正在努力寻找明确的责任分离。

有人向我指出了一个示例 AngularJS 应用程序，其中使用 webpack 在每个路由之后异步加载控制器/指令/过滤器吗？

我关注的链接很少：我应该使用 Browserify 还是 Webpack 来延迟加载 Angular 1.x 中的依赖项 https://stackoverflow.com/questions/23605099/should-i-use-browserify-or-webpack-for-lazy-loading-of-dependancies-in-angular-1 https://github.com/petehunt/webpack-howto#9-async-loading https://github.com/petehunt/webpack-howto#9-async-loading http://dontkry.com/posts/code/single-page-modules-with-webpack.html http://dontkry.com/posts/code/single-page-modules-with-webpack.html

Sagar Ganatra 写了一篇很有帮助的文章博客文章 http://www.sagarganatra.com/2014/08/lazy-loading-angularjs-components-using-providers.html关于代码分割。

令人惊讶的是，Angular 的模块系统并不真正支持代码分割。然而，有一种方法可以通过在配置阶段保存对 Angular 特殊提供程序的引用来实现代码分割。

[...] 当 Angular 初始化或引导应用程序、功能 - 控制器、服务等时。在模块实例上可用。这里，我们是延迟加载组件，以后功能就无法使用了；因此我们必须使用各种提供程序函数并注册这些组件。这些提供程序仅在 config 方法中可用，因此当应用程序初始化时，我们必须在 config 函数中存储这些提供程序的引用。

window.app.config([
    '$routeProvider',
    '$controllerProvider',
    '$compileProvider',
    '$filterProvider',
    '$provide',
    function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {

        $routeProvider.when('/login', {
            templateUrl: 'components/login/partials/login.html',
            resolve: {
                load: ['$q', '$rootScope', function ($q, $rootScope) {

                    var deferred = $q.defer();

                    // lazy load controllers, etc.
                    require ([
                        'components/login/controllers/loginController',
                        'components/login/services/loginService'
                    ], function () {

                        $rootScope.$apply(function () {
                            deferred.resolve();
                        });

                    });

                    return deferred.promise;
                }]
            }
        });


        //store a reference to various provider functions
        window.app.components = {
            controller: $controllerProvider.register,
            service: $provide.service
        };

    }
]);

现在在你的loginController例如你写

app.components.controller('loginController');

延迟定义您的新控制器。

如果您也想延迟加载模板，我建议使用用户界面路由器 https://github.com/angular-ui/ui-router。在那里你可以指定一个templateProvider这是基本上是一个异步加载模板的函数 https://github.com/angular-ui/ui-router/wiki#templates