AngularJS和Webpack集成

我正在寻找一些帮助使用webpack的大型AngularJS应用程序。 我们正在使用基于function的文件夹结构（每个function/页面都有一个模块，它们有控制器，指令）。 我已成功配置webpack以使其与Grunt一起工作，Grunt生成一个单独的捆绑包。 我想创建一个块，因为它将成为一个大型应用程序，我们想异步加载模块（页面/function）工件。

我正在浏览一些webpack示例，使用require([deps],fn )语法来使用'code splitting' 。 但是我无法让懒人装满块。 首先，我不知道究竟在哪里，我需要在AngularJS将用户路由到下一页之前导入这些块。 我正在努力寻找明确的责任分离。

是否有人向我指出一个示例AngularJS应用程序，其中webpack用于在每个路由后异步加载控制器/指令/filter？

我关注的链接很少： 我应该使用Browserify或Webpack来延迟加载1.x https://github.com/petehunt/webpack-howto#9-async-loading http://dontkry.com中 的依赖项 /posts/code/single-page-modules-with-webpack.html

Answer 1

Sagar Ganatra写了一篇关于代码分割的有用博客文章 。

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

[…]当Angular初始化或引导应用程序，function – 控制器，服务等时。 在模块实例上可用。 在这里，我们延迟加载组件，稍后无法使用这些function; 因此，我们必须使用各种提供程序函数并注册这些组件。 提供程序仅在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'); 

懒洋洋地定义你的新控制器。

如果您想延迟加载模板，我建议使用ui-router 。 在那里你可以指定一个templateProvider ，它基本上是一个加载模板异步的函数

Answer 2

这是来自https://github.com/webpack/webpack/issues/150的引用

webpack是一个模块捆绑器而不是javascript加载器。 它从本地磁盘打包文件，不从Web加载文件（除了自己的块）。

使用javascript加载器，即script.js

 var $script = require("scriptjs"); $script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js", function() { // ... });