摘要：基于構建的工程篇上一篇基于構建的工程一篇里我們已經成功構建了整個項目的打包配置。不同的模塊之間都會有標識來標志，所以不會說存在干擾和污染的問題。但是對于我這個重構的項目，就會有麻煩要改寫的文件有太多了。然而還有一種情況。

??上一篇基于webpack構建的angular 1.x 工程（一）webpack篇里我們已經成功構建了整個項目的打包配置。接下來我們要繼續讓angular在工程里跑起來。

之前的工程由于是用gulp打包的，具體原理我不太懂，不過貌似會把所有的js自動注入到index.html中。由于js很多，所以為了不互相干擾，產生全局變量污染的問題，它里面所有angular都是用立即執行函數表達式（IIFE）來寫的：

(function(){
    "use strict";

    angular.module("app.core",[ 
        "ngCookies",
        "angular-cache"
    ]);
})();

??這樣的寫法在webpack是不必要的了，webpack是根據js之間的依賴關系來加載打包項目的。不同的模塊之間webpack都會有標識來標志，所以不會說存在干擾和污染的問題。那我們應該怎么寫呢？要寫成AMD/CMD規范形式的。為了方便理解，我們把立即執行函數表達式去掉，改成這樣的：

const ngCookies = require("angular-cookies")
const ngCache = require("angular-cache")
module.exports = angular.module("app.core",[ 
                         ngCookies,
                         ngCache
                     ]);

??這個是符合webpack要求的寫法。首先先引入我們需要的模塊，然后編寫我們的模塊，最后輸出我們要暴露給外部調用的接口。于是我就把所有IIFE都改成了這種形式。

接下來問題就來了，在同一個angular應用模塊（module）中，各個控制器（controller）、過濾器（filters）、服務（services）等之間都是并列的兄弟關系，都是從屬于模塊。那我們應該來處理這些關系呢？經過查閱過別人的項目之后，我發現其實有兩種寫法：

把各個從屬的具體方法都寫成一個模塊，然后在模塊聲明時進行引入并聲明，就像這樣：

main.controller.js

module.exports =function mainCtrl($scope, $http, $stateParams, $state, $rootScope, $filter) {
    // your controller goes here
}

index.js

angular.module("app",[])
    .controller("mainCtrl",  [$scope, $http, $stateParams, $state, $rootScope, $filter,require("./main.controller")]);

??這樣的其實也可以輸出一個數組，像這樣：

main.controller.js

module.exports =[[$scope, $http, $stateParams, $state, $rootScope, $filter, function mainCtrl($scope, $http, $stateParams, $state, $rootScope, $filter) {
    // your controller goes here
}]

??相對應的，主要入口要這樣寫：

index.js

angular.module("app",[])
    .controller("mainCtrl",  require("./main.controller"));

??這樣的寫法適合從頭開始的項目，好處是分的比較清晰。
但是對于我這個重構的項目，就會有麻煩：要改寫的文件有太多了。
這么麻煩，我只能拋棄這種方式。

每個模塊都直接輸出的是模塊聲明，然后只要把這個文件引入即可。
??熟悉angular的都知道，angular在整個應用中其實一個全局定義的對象。

每個模塊在angular里注冊之后，都會在angular里找得到。
這樣的話，只要確保運行下面這段代碼即可：

angular.module("app")
    .controller("mainCtrl",  [$scope,mainCtrl($scope){
      // your controller goes here
    }]);

??也就是說，我只要引用了這段代碼，也算把這段代碼運行了。
那這樣的我就可以這樣寫：

main.controller.js

module.exports = angular.module("app")
    .controller("mainCtrl",  [$scope,mainCtrl($scope){
      // your controller goes here
    }]);

index.js

angular.module("app",[])
require("./main.controller")

??在main.controller.js我直接輸出的是angular聲明app模塊的controller，然后在index.js定義模塊之后,把這個文件引入之后，就相當于同時聲明了這個controller，免去大量改動代碼的麻煩。不過另一個問題出現了：我這里雖然免去了大量改動代碼的麻煩，但是我那么多的controller，真的要一一寫路徑來引用嗎？這樣還是麻煩啊。不要驚慌。webpack已經預想到你這有這個問題了，特意寫了一個可以引用大量文件的方法給你：require.context。這個方法可以讓你查詢指定路徑的指定文件類型，然后引用進來。我們這里由于已經分類放好了，所有的controller都放在/app/module目錄下面，因此查找也是輕而易舉的事。所以我們的index.js可以寫成這樣：

module.exports = angular.module("app",[]);

//把所有js文件引入
function importAll (r) {
    r.keys().forEach(r);
}
importAll(require.context("./", true, /.js$/));

??這樣就解決了那些controller，filters等的問題。具體require.context的用法[參考這里]()

??當我們往我們的模塊注入其他模塊（自己寫的或者angular插件）的時候，這個環節也有些要注意的地方。
??首先，我們知道，angular注入其他模塊的時候，其實只需要寫注入模塊的名字就可以了，angular可以自行去尋找相應的模塊。這樣的話，我們像上面那樣寫的模塊聲明，直接輸出其實會有問題：

app.core.module.js

module.exports = angular.module("app.core",[])

??這里其實輸出的是angular的模塊，并不是模塊的名字。如果我們直接引用的話，像這樣：

index.js

var appCore = require("./modules/appCore.module.js")
module.exports = angular.module("app",[appCore]);

??這樣的話，angular就會報錯：

Error: [ng:areq] Argument "module" is not a function, got Object

??要解決這個問題其實很簡單，只要調用angular的.name方法就可以了，所以上面可以改寫成這樣：

app.core.module.js

module.exports = angular.module("app.core",[]).name

??或者這樣改：

index.js

var appCore = require("./modules/appCore.module.js")
module.exports = angular.module("app",[appCore.name]);

??兩種方法選一個執行即可。

??其實如果是插件的話，你在npm安裝的插件一般都不用擔心這個問題，畢竟人家早就想到會有這個問題了。但是如果是其他途徑弄來的話，這個就復雜了。

??上面提到的是插件注入可能會遇到的問題之一。然而還有一種情況。
這種情況就是插件也使用了IIFE（立即執行函數表達式）。聽起來就很煩。自己的代碼，自己知道怎么寫的，所以改起來不會怎么出問題，但是別人的代碼的話就不一定了。為了避免錯誤，我選擇不改動插件的代碼。而是，直接在打包的時候分開打包，然后直接注入的時候寫上插件名字即可以注入成功。詳細可以看我的webpack配置。

以上就是用webpack打包angular 1.x 的時候寫angular所需要注意的地方。如果想看webpack的配置可以查看我前一篇文章：

基于webpack構建的angular 1.x 工程（一）webpack篇

用于參考的一位前輩的類似項目,讓大家也參考一下：
https://github.com/IamBusy/webpack-angular

想看詳細代碼，可以訪問我的項目地址
https://github.com/homerious/angular-ionic-webpack

有什么問題或者不對的地方歡迎指出，謝謝閱讀！

本文原創，未經授權請勿轉載。