如何使用Webpack來載入模組

這篇文章主要介紹了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__() 的引用，用來導入其它模組。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

基於webpack4搭建的react專案框架的方法

關於React建立元件的三種方式及其區別

以上是如何使用Webpack來載入模組的詳細內容。更多資訊請關注PHP中文網其他相關文章！