摘要：本文討論模塊化方案時，的打包工作。省略省略這部分是這部分是這部分是在上面代碼中，我們的和被放進了一個數(shù)組中。入口文件的依賴和，會根據(jù)依賴的情況往后排。第一個函數(shù)也就是執(zhí)行數(shù)組中的第二個函數(shù)。還有一個重要的變量。

注：本文重點不是怎樣配置webpack.config.js并實現(xiàn)相應(yīng)的功能，而是通過對比webpack編譯前和編譯后文件，探究webpack打包后的文件是怎樣加載執(zhí)行的。
本文討論commonJS模塊化方案時，webpack的打包工作。
為了便于討論，我們準(zhǔn)備了一個非常簡單的例子，涉及三個文件，分別是

文件a.js

module.exports ={
        say:function(){
            console.log("A is saying.");
        }
    }

文件b.js

module.exports ={
        say:function(){
            console.log("B is saying.");
        }
    }

文件index.js

var a = require("./a");
var b = require("./b");
a.say();
b.say();

依賴關(guān)系非常簡單，即index.js文件依賴a.js和b.js兩個文件。而且是采用commonJS方式來引用的。
我的config文件也貼一下。

var htmlPlugin = require("html-webpack-plugin");
module.exports = {
    entry:{
        index:"./src/index.js"
    },
    output:{
        path:"builds",
        filename:"[name].js",
        chunkFilename:"chunk.[name].js"
    },
    plugins:[
        new htmlPlugin({
            filename:__dirname+"/builds/index.html",
            template:"./index.html"
        })
    ],
    devServer:{
        contentBase:"./builds",
        inline:true
    }
}

還有一個非常簡單的index.html文件。

另外，本問的示例代碼已經(jīng)放到Github上，請 點擊這里查看。
我們在目錄下運行一下webpack命令，builds文件夾里的文件，就是被webpack處理過的文件，也是我們要討論的重點。
我們來看看文件目錄：

builds 里，是編譯后的文件，src里，是我們的原始文件。
那么a.js和b.js呢？打包進builds/index.js文件里面了。打包其實就是干這個的，把多個文件合并到一個或少數(shù)幾個文件里。
我們點開builds/index.js，發(fā)現(xiàn)我們的代碼被改的面目全非。大家點擊這里看完整的代碼，下面是部分片段。

(function(modules){
    var installedModules = {};
    function __webpack_require__(moduleId) {/*省略*/}
    /*省略*/
    
    return __webpack_require__(0);
})([
//這部分是index.js
function(module, exports, __webpack_require__){
    var a = __webpack_require__(1);
    var b = __webpack_require__(2);
    a.say();
    b.say();
},
//這部分是a.js
function(module, exports){
    module.exports ={
            say:function(){
                console.log("A is saying.");
            }
        }
},
//這部分是b.js
function(module, exports){
    module.exports ={
            say:function(){
                console.log("B is saying.");
            }
        }
}
])

在上面代碼中，我們的index.js、a.js和b.js被放進了一個數(shù)組中。入口文件（index.js）都是在數(shù)組的0的位置。入口文件的依賴（a.js和b.js），會根據(jù)依賴的情況往后排。
這個數(shù)組作為IIFE中函數(shù)的參數(shù)modules傳入function中。注意匿名函數(shù)中的return __webpack_require__(0);，這句調(diào)用將執(zhí)行數(shù)組中的第一個函數(shù)。

第一個函數(shù)：

   function(module, exports, __webpack_require__) {
    var a = __webpack_require__(1);
    var b = __webpack_require__(2);
    a.say();
    b.say();
 }

__webpack_require__(1)也就是執(zhí)行數(shù)組中的第二個函數(shù)。

第二個函數(shù)：

    function(module, exports) {
    
        module.exports ={
                say:function(){
                    console.log("A is saying.");
                }
            }
    
    }

第二個函數(shù)的執(zhí)行后的結(jié)果，就是把module.exports中的內(nèi)容賦給了變量a。到這里，大家對代碼的結(jié)構(gòu)有了了解，但是關(guān)鍵的__webpack_require__方法是怎樣工作的呢？我們來分析下代碼：

    
    function __webpack_require__(moduleId) {
    
             // Check if module is in cache
             if(installedModules[moduleId])
                 return installedModules[moduleId].exports;
    
             // Create a new module (and put it into the cache)
             var module = installedModules[moduleId] = {
                 exports: {},
                 id: moduleId,
                 loaded: false
             };
    
             // Execute the module function
             modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    
             // Flag the module as loaded
             module.loaded = true;
    
             // Return the exports of the module
             return module.exports;
         }

這里注意modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)這行代碼。其中的modules就是我們剛才講的數(shù)組（modules不是module）。module.exports是模塊的上下文，也就是this。所以，如果我們在index.js里加一句this.name="jack"，那么最終這個等價于module.exports.name="jack";
此外，我們還可以訪問到module.id這個屬性。這并沒有什么實際的作用，只是可以加深我們的理解。比如，我在a.js中：

    module.exports ={
            say:function(){
                console.log("A is saying.");
                console.log(module.id);
            }
        }

是可以輸出該模塊的id的。多說一句，如果你用webpack-dev-server，它會打包進去其他的文件，這個id會變的比較大（我測試的是75）。有一個可能會用到的module.loaded屬性。我們的模塊在第一次執(zhí)行的時候，module.loaded還是false，執(zhí)行過后才被設(shè)置為true。
比如下面的代碼：

index.js

if (module.loaded) {
    var a = require("./a");
    a.say();
} else {
    var b = require("./b");
    b.say();

}

在我們的例子中，這個是每次執(zhí)行的結(jié)果都是B is saying.因為每次執(zhí)行index.js模塊中的代碼都是第一次執(zhí)行。
在實際的開發(fā)中，有可能有要判斷當(dāng)前代碼是不是第一次執(zhí)行的需求。
還有一個重要的變量installedModules。我們加載過的模塊中的module.exports對象，會保存在installedModules[moduleId]中。這樣下次調(diào)用，就可以直接返回module.exports。
OK，這次就講到這里，希望對同學(xué)們學(xué)習(xí)理解webpack能有幫助。