Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser Webpack pour charger des modules

不言
Libérer: 2018-07-04 10:03:04
original
1120 Les gens l'ont consulté

Cet article présente principalement comment Webpack charge les modules. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Webpack est très populaire parmi les développeurs en tant qu'outil de packaging de modules dans le développement front-end. Ses riches chargeurs lui permettent d'implémenter une variété de fonctions. Cet article utilisera webpack pour empaqueter un fichier js et verra comment webpack charge chaque module.

Deux fichiers sources simples

Afin de faciliter l'analyse du principe de chargement du module webpack, nous avons préparé deux fichiers :

bonjour.js

const hello = {
 say: arg => {
  console.info('hello ' + arg || 'world');
 }
};

export default hello;
Copier après la connexion

index.js

import Hello from './hello';

Hello.say('man');
Copier après la connexion

index.js sert de fichier d'entrée et fait référence au module hello.js.

Emballage Webpack

Exécutez webpack index.js bundle.js sur la ligne de commande pour empaqueter le fichier d'entrée et générer le bundle. js , la structure générale est (pour faciliter la lecture, j'ai supprimé du code redondant) :

Comme vous pouvez le voir, le fichier final généré se termine par ( function (modules) {})([Module 1, Module 2]). Les modules que nous définissons sont regroupés dans des fonctions anonymes, puis transmis à une fonction anonyme function (modules) {} sous la forme d'un tableau dans cet anonyme. function Une fonction __webpack_require__() est définie pour charger le module Enfin, le premier module index.js est chargé par return __webpack_require__(__webpack_require__.s = 0);

__webpack_require__( ) Function.

Cette fonction reçoit un moduleId en paramètre, qui est l'index de chaque module du tableau,

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;
  /******/
 }
Copier après la connexion

Les modules installés sont utilisés pour mettre en cache les modules exécutés. Exécutez le module via modules[moduleId].call(), et enfin renvoyez les exports du module.

Paramètres acceptés par le module

Prendre le module hello.js comme exemple

 (function (module, __webpack_exports__, __webpack_require__) {

  "use strict";
  const hello = {
   say: arg => {
    console.info('hello ' + arg || 'world');
   }
  };

  /* harmony default export */
  __webpack_exports__["a"] = (hello);

  /***/
 })
Copier après la connexion

webpack transmettra module, __webpack_exports__, __webpack_require__ trois paramètres au module. Les deux premiers sont utilisés pour exporter les variables dans le module, et le troisième paramètre est la référence de __webpack_require__() introduite plus tôt, qui est utilisé pour importer d’autres modules.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment créer un framework de projet React basé sur webpack4

Trois façons de créer des composants dans React et leurs différences

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal