What are the methods for loading modules with Webpack?

This time I will bring you the methods of loading modules with Webpack, and the precautions for loading modules with Webpack. The following is a practical case, let's take a look.

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, as the

entry file, 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 As (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]) is started. The modules we define are packaged into

anonymous functions, and then pass 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() functionThis 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;
  /******/
 }

where 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 moduleTake 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 it to the module

module, webpack_exports, webpack_require

Three parameters, the first two are used to export variables in the module, the third parameter is the reference to the webpack_require() introduced earlier, used to import other I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Node.js deployment startup background running forever step-by-step explanation

\ in regular expressions Detailed explanation of the steps for using B and \b

The above is the detailed content of What are the methods for loading modules with Webpack?. For more information, please follow other related articles on the PHP Chinese website!