webpack是如何實現前端模組化的

鬧鬧不愛鬧發表於2019-02-20
Web前端

前言

es6 module是js語言原生的模組化方案，但是由於瀏覽器的相容問題，需要webpack對我們寫好的模組程式碼進行處理，可以讓瀏覽器識別我們寫的模組程式碼。

因為瀏覽器端是沒有commonJS規範相關的module,exports,require變數，而且該規範是同步載入模組的，所以瀏覽器端不適用commonJs規範型別的模組化。

webpack通過模擬module，exports，require變數，將我們的模組程式碼打包成一個檔案，讓瀏覽器可以執行我們的模組程式碼。

那webpack是如何處理我們的模組程式碼的呢？

import * as _ from 'loadsh';

module.exports = {
    name: 'jack',
    age: 12
};複製程式碼

webpack會將上面的這個模組程式碼用一個函式包裝起來：

function(module, exports, require) { // 包裝函式
    const _ = require('loadsh');
    module.exports = {
        name: 'jack',
        age: 12
    }
}複製程式碼

那最終webpack是怎麼將所有模組化程式碼打包到一個檔案中，讓瀏覽器可以執行呢？

(function(modules) { // modules就是我們的模組程式碼集合，格式類似於{ 'module1': module1對應的模組程式碼包裝函式 }
    function require(name) { // webpack模擬的require變數
        const module = { exports: {} }; // webpack模擬的module，exports變數
        // require的作用就是在執行的時候將事先定義好的module，exports，require變數傳入當前模組對應
            的包裝函式並且執行。
        modules[name].call(module, module, module.exports, require);
        return module.exports; // module.exports變數被傳入包裝函式執行之後賦值。
    };
    require('入口檔案');
})(
    // 引數就是模組程式碼被包裝之後的集合
    {
        '模組程式碼1路徑': function(module, exports, require) {
                            // 程式碼主體
                        },
       '模組程式碼2路徑': function(module, exports, require) {
                            // 程式碼主體
                        },    }
)複製程式碼

這樣講所有模組程式碼打包到一個檔案中，瀏覽器一次性將所有資源載入到記憶體中，變向實現了瀏覽器端的模組化。


相關文章