webpack打包編譯結果的原理分析

2021-10-07 15:23:23 字數 962 閱讀 8145

/**

* 這是webpack打包的編譯結果的原理,首先乙個立即執行函式,這樣使得呼叫js後立即執行

*/(function

(modules)

;function

__webpack_require

(modulepath)

// 獲取執行的結果函式

var func = modules[modulepath]

;var module =

}// 執行函式獲取結果

func

(module, module.exports, __webpack_require)

;var moduleresult = module.exports;

// 獲取模組匯出的結果

storeresult[modulepath]

= moduleresult;

return moduleresult;

}// 執行'./src/index.js' 這個函式,所有使用乙個函式來執行

return

__webpack_require

('./src/index.js')}

)(,'./src/a.js'

:function

(module, exports, __webpack_require)

,'./src/b.js'

:function

(module, exports, __webpack_require)

})

模組化**如下圖:

結果和webpack得出的一樣,如下:

《webpack的打包開發》

同時也在實戰中對於webpack進行了驗證 descripttion version v1.0 author linda date 2020 03 10 17 31 43 lasteditors linda lastedittime 2020 03 10 22 05 29 const path re...

webpack基本概念 打包流程和熱更新原理

webpack核心概念 entry 編譯入口 module 模組,在 webpack 中,一切皆為模組,乙個模組對應乙個檔案 chunk 塊,乙個 chunk 由多個模組組合而成,用於 的合併與分割 loader 模組轉換器,將非js模組轉化為webpack能識別的js模組 plugin 擴充套件外...

webpack不打包特定的檔案

使用vue webpack建立專案的時候會自動生成乙個static資料夾,在static資料夾裡面我們可以放一些會經常變化的檔案或者 啥的,但是用的時候需要寫上絕對路徑。由於專案需要,在開發時的介面位址跟部署的介面位址不一致,所以我們要弄成可配置的,即單獨出來乙個js檔案放我們的介面位址,然後希望該...