How to use Webpack to load modules

This article mainly introduces how Webpack loads modules. The content is quite good. I will share it with you now and give it as a reference.

Webpack is very popular among developers as a module packaging tool in front-end development. Its rich loaders enable it to implement a variety of functions. This article will use webpack to package a js file and see how webpack loads each module.

Two simple source files

In order to facilitate the analysis of the principle of webpack loading modules, we have prepared two files:

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 serves as the entry file and references the hello.js module.

Webpack packaging

Execute webpack index.js bundle.js on the command line to package the entry file and generate bundle.js , the general structure is (for the convenience of reading, I deleted some redundant code):

As you can see, the final generated file ends with (function (modules) {})([Module 1, Module 2]). The modules we define are packaged into anonymous functions, and then passed to an anonymous function function (modules) {} in the form of an array. In this anonymous function A __webpack_require__() function is defined to load the module. Finally, the first module index.js is loaded by return __webpack_require__(__webpack_require__.s = 0);

##__webpack_require__( ) Function

This function receives a moduleId as a parameter, which is the index of each module in the array,

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

The installedModules is used to cache executed modules. Execute the module through modules[moduleId].call(), and finally return the exports of the module.

Parameters accepted by the module

Take the hello.js module as an example

 (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 will pass

module, __webpack_exports__, __webpack_require__ to the module. The first two parameters are used to export variables in the module, and the third parameter is the one introduced earlier. __webpack_require__() reference, used to import other modules.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Methods for react project framework based on webpack4

Three ways to create components in React and their differences

The above is the detailed content of How to use Webpack to load modules. For more information, please follow other related articles on the PHP Chinese website!