建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了Webpack加載模塊的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)武陵免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
Webpack 在前端開(kāi)發(fā)中作為模塊打包工具非常受開(kāi)發(fā)者的青睞，豐富的 loader 使它可以實(shí)現(xiàn)各種各樣的功能。本文將通過(guò) webpack 來(lái)打包一個(gè) js 文件，看看 webpack 是如何加載各個(gè)模塊的。
兩個(gè)簡(jiǎn)單的源文件
為了方便分析 webpack 加載模塊的原理，我們準(zhǔn)備了兩個(gè)文件：
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 打包
在命令行執(zhí)行 webpack index.js bundle.js 對(duì)入口文件進(jìn)行打包，生成 bundle.js ，大體結(jié)構(gòu)為（為了方便閱讀，我刪除了部分多余的代碼）：
可以看到，最終生成的文件以 (function (modules) {})([模塊1, 模塊2]) 的方式啟動(dòng)，我們定義的模塊被包裝成一個(gè)個(gè)匿名函數(shù)，然后以數(shù)組的形式傳遞個(gè)一個(gè)匿名函數(shù) function (modules) {}，在這個(gè)匿名函數(shù)中定義了一個(gè) __webpack_require__() 函數(shù)，用來(lái)加載模塊，最后，通過(guò) return __webpack_require__(__webpack_require__.s = 0); 來(lái)加載第一個(gè)模塊 index.js
__webpack_require__() 函數(shù)
該函數(shù)接收一個(gè) moduleId 作為參數(shù)，這個(gè)參數(shù)就是各個(gè)模塊在數(shù)組中的索引，
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 是用來(lái)緩存執(zhí)行過(guò)的模塊。通過(guò) modules[moduleId].call() 來(lái)執(zhí)行模塊，最后返回模塊的 exports。
模塊接受的參數(shù)
以 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 會(huì)向模塊傳遞 module, __webpack_exports__, __webpack_require__ 三個(gè)參數(shù)，前兩個(gè)是用來(lái)導(dǎo)出模塊內(nèi)的變量，第三個(gè)參數(shù)為前面介紹的 __webpack_require__() 的引用，用來(lái)導(dǎo)入其它模塊。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Webpack加載模塊的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
本文名稱：Webpack加載模塊的示例分析
URL分享：http://www.dlmjj.cn/article/jdephi.html
