Comment utiliser Webpack pour charger des modules

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;

index.js

import Hello from './hello';

Hello.say('man');

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;
  /******/
 }

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);

  /***/
 })

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!