Heim > Web-Frontend > js-Tutorial > Hauptteil

Welche Methoden gibt es zum Laden von Modulen mit Webpack?

php中世界最好的语言
Freigeben: 2018-05-25 10:55:16
Original
1222 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Methoden zum Laden von Modulen mit Webpack und die Vorsichtsmaßnahmen zum Laden von Modulen mit Webpack vorstellen. Hier sind praktische Fälle, werfen wir einen Blick darauf.

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;
Nach dem Login kopieren

index.js

import Hello from './hello';
Hello.say('man');
Nach dem Login kopieren

index.js verweist als Eintragsdatei auf das hello.js-Modul.

Webpack-Paketierung

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

Wie Sie sehen können, endet die endgültig generierte Datei mit (function (modules) {} )([Modul 1, Modul 2]), die von uns definierten Module werden in anonyme Funktionen gepackt und übergeben dann eine anonyme Funktionsfunktion (Module) {} in Form eines Arrays in dieser anonymen Funktion Eine webpack_require()-Funktion wird definiert, um das Modul index.js

webpack_require()-FunktionDiese 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;
  /******/
 }
Nach dem Login kopieren

wo installModules verwendet wird Ausgeführte Module zwischenspeichern. Führen Sie das Modul über module[moduleId].call() aus und geben Sie schließlich die Exporte des Moduls zurück.

Vom Modul akzeptierte ParameterNehmen 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);
  /***/
 })
Nach dem Login kopieren

Webpack wird es weitergeben Das Modul

Drei Parameter, die ersten beiden werden zum Exportieren von Variablen innerhalb des Moduls verwendet, und der dritte Parameter ist der Verweis auf den zuvor eingeführten

, der meiner Meinung nach zum Importieren anderer module, webpack_exports, webpack_require webpack_require() verwendet wird Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

ausführliche Erläuterung der Schritte zum Start des Node.js-Bereitstellungsstarts, die für immer ausgeführt werden


B in regulären Ausdrücken Detailliert Erläuterung der Schritte zur Verwendung von heb

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Laden von Modulen mit Webpack?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!