What are the methods for loading modules with Webpack?-JS Tutorial-php.cn

What are the methods for loading modules with Webpack?

php中世界最好的语言

Release： 2018-05-25 10:55:16

Original

1107 people have browsed it

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;

Copy after login

index.js

import Hello from './hello';
Hello.say('man');

Copy after login

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

Copy after login

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

Copy after login

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!