この記事は主に 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__()
React でコンポーネントを作成する 3 つの方法とその違いについて
以上がWebpack を使用してモジュールをロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。