淺談Webpack 是如何加載模塊的

更新時(shí)間：2018年05月24日 09:46:56 作者：MockingBird

這篇文章主要介紹了Webpack 是如何加載模塊的，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

Webpack 在前端開發(fā)中作為模塊打包工具非常受開發(fā)者的青睞，豐富的 loader 使它可以實(shí)現(xiàn)各種各樣的功能。本文將通過 webpack 來打包一個(gè) js 文件，看看 webpack 是如何加載各個(gè)模塊的。

兩個(gè)簡單的源文件

為了方便分析 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 對入口文件進(jìn)行打包，生成 bundle.js ，大體結(jié)構(gòu)為（為了方便閱讀，我刪除了部分多余的代碼）：

可以看到，最終生成的文件以 (function (modules) {})([模塊1, 模塊2]) 的方式啟動，我們定義的模塊被包裝成一個(gè)個(gè)匿名函數(shù)，然后以數(shù)組的形式傳遞個(gè)一個(gè)匿名函數(shù) function (modules) {}，在這個(gè)匿名函數(shù)中定義了一個(gè) __webpack_require__() 函數(shù)，用來加載模塊，最后，通過 return __webpack_require__(__webpack_require__.s = 0); 來加載第一個(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 是用來緩存執(zhí)行過的模塊。通過 modules[moduleId].call() 來執(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 會向模塊傳遞 module, __webpack_exports__, __webpack_require__ 三個(gè)參數(shù)，前兩個(gè)是用來導(dǎo)出模塊內(nèi)的變量，第三個(gè)參數(shù)為前面介紹的 __webpack_require__() 的引用，用來導(dǎo)入其它模塊。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: