Webpack 是如何加載模塊的

Webpack 在前端開發中做爲模塊打包工具很是受開發者的青睞，豐富的 loader 使它能夠實現各類各樣的功能。本文將經過 webpack 來打包一個 js 文件，看看 webpack 是如何加載各個模塊的。

兩個簡單的源文件

爲了方便分析 webpack 加載模塊的原理，咱們準備了兩個文件：

hello.js

const hello = {
    say: arg => {
        console.info('hello ' + arg || 'world');
    }
};

export default hello;

index.js

import Hello from './hello';

Hello.say('man');

index.js 做爲入口文件，引用了 hello.js 模塊。

Webpack 打包

在命令行執行 webpack index.js bundle.js 對入口文件進行打包，生成 bundle.js ，大致結構爲（爲了方便閱讀，我刪除了部分多餘的代碼）：

能夠看到，最終生成的文件以 (function (modules) {})([模塊1, 模塊2]) 的方式啓動，咱們定義的模塊被包裝成一個個匿名函數，而後以數組的形式傳遞個一個匿名函數 function (modules) {}，在這個匿名函數中定義了一個 __webpack_require__() 函數，用來加載模塊，最後，經過 return __webpack_require__(__webpack_require__.s = 0); 來加載第一個模塊 index.js

__webpack_require__() 函數

該函數接收一個 moduleId 做爲參數，這個參數就是各個模塊在數組中的索引，

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] = {
            /******/
            i: moduleId,
            /******/
            l: false,
            /******/
            exports: {}
            /******/
        };
        /******/
        /******/ // Execute the module function
        /******/
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        /******/
        /******/ // Flag the module as loaded
        /******/
        module.l = true;
        /******/
        /******/ // Return the exports of the module
        /******/
        return module.exports;
        /******/
    }

其中 installedModules 是用來緩存執行過的模塊。經過 modules[moduleId].call() 來執行模塊，最後返回模塊的 exports。

模塊接受的參數

以 hello.js 模塊爲例

(function (module, __webpack_exports__, __webpack_require__) {

        "use strict";
        const hello = {
            say: arg => {
                console.info('hello ' + arg || 'world');
            }
        };

        /* harmony default export */
        __webpack_exports__["a"] = (hello);

        /***/
    })

webpack 會向模塊傳遞 module, __webpack_exports__, __webpack_require__ 三個參數，前兩個是用來導出模塊內的變量，第三個參數爲前面介紹的 __webpack_require__() 的引用，用來導入其它模塊。