So verwenden Sie Webpack zum Laden von Modulen

Dieser Artikel stellt hauptsächlich vor, wie Webpack Module lädt. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

Webpack erfreut sich bei Entwicklern als Modulpaketierungstool in der Frontend-Entwicklung großer Beliebtheit. Seine umfangreichen Loader ermöglichen die Implementierung einer Vielzahl von Funktionen. In diesem Artikel wird Webpack zum Packen einer JS-Datei verwendet und gezeigt, wie Webpack jedes Modul lädt.

Zwei einfache Quelldateien

Um die Analyse des Prinzips des Webpack-Lademoduls zu erleichtern, haben wir zwei Dateien vorbereitet :

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 dient als Eintragsdatei und referenziert das hello.js-Modul.

Webpack-Paketierung

Führen Sie webpack index.js bundle.js in der Befehlszeile aus, um die Eintragsdatei zu packen und ein Bundle zu generieren. js, die allgemeine Struktur ist (zur besseren Lesbarkeit habe ich etwas überflüssigen Code gelöscht):

Wie Sie sehen können, endet die endgültig generierte Datei mit ( Funktion (Module) {})([Modul 1, Modul 2]). Die von uns definierten Module werden in anonyme Funktionen gepackt und dann in Form eines Arrays an eine anonyme Funktion (Module) {} übergeben Funktion Eine __webpack_require__()-Funktion wird definiert, um das Modul index.js durch die Funktion return __webpack_require__(__webpack_require__.s = 0);

__webpack_require__( ) zu laden

Diese Funktion empfängt eine Modul-ID als Parameter, die der Index jedes Moduls im Array ist,

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 wird zum Zwischenspeichern ausgeführter Module verwendet. Führen Sie das Modul über module[moduleId].call() aus und geben Sie schließlich die Exporte des Moduls zurück.

Vom Modul akzeptierte Parameter

Nehmen Sie das hello.js-Modul als Beispiel

 (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 übergibt module, __webpack_exports__, __webpack_require__ drei Parameter an das Modul. Die ersten beiden werden zum Exportieren von Variablen im Modul verwendet, und der dritte Parameter ist die Referenz von __webpack_require__() , die zuvor eingeführt wurde Wird zum Importieren anderer Module verwendet.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So erstellen Sie ein React-Projekt-Framework basierend auf Webpack4

Drei Möglichkeiten, Komponenten in React zu erstellen und ihre Unterschiede

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Webpack zum Laden von Modulen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!