Webpack を使用してモジュールをロードする方法

この記事は主に Webpack がモジュールをロードする方法を紹介します。内容は非常に優れているので、参考として共有します。

Webpack は、フロントエンド開発におけるモジュール パッケージ化ツールとして開発者の間で非常に人気があり、豊富なローダーによりさまざまな機能を実装できます。この記事では、webpack を使用して js ファイルをパッケージ化し、webpack が各モジュールをどのようにロードするかを確認します。

2つのシンプルなソースファイル

Webpackローディングモジュールの原理の分析を容易にするために、2つのファイルを用意しました:

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 はエントリ ファイルとして機能し、hello.js モジュールを参照します。

Webpackのパッケージ化

コマンドラインでwebpackのindex.jsbundle.jsを実行して、エントリファイルをパッケージ化し、bundle.jsを生成します。一般的な構造は次のとおりです（読みやすいように、いくつかの冗長な部分を削除しています。 code):

最終的に生成されたファイルは (function (modules) {})([module 1, module 2]) の形式で開始されることがわかります。定義したモジュールは匿名関数にパッケージ化されています。次に、匿名関数 function (modules) {} を配列の形式で渡します。この匿名関数には、モジュールをロードするための __webpack_require__() 関数が定義されています。最後に、__webpack_require__(__webpack_require__.s = 0) を返してモジュールをロードします。 ); モジュールの Index.js

__webpack_require__() 関数

この関数は、配列内の各モジュールのインデックスである moduleId を受け取ります。ここで、installedModules はused 実行されたモジュールをキャッシュします。 modules[moduleId].call() を通じてモジュールを実行し、最後にモジュールのエクスポートを返します。

モジュールによって受け入れられるパラメータ

hello.jsモジュールを例として取り上げます

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

webpackは、他のモジュールをインポートするために

参照をモジュールに渡します。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項: module, __webpack_exports__, __webpack_require__ 三个参数，前两个是用来导出模块内的变量，第三个参数为前面介绍的 __webpack_require__()

webpack4 に基づいて React プロジェクト フレームワークを構築する方法

React でコンポーネントを作成する 3 つの方法とその違いについて

以上がWebpack を使用してモジュールをロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。