[解決済み] Webpackを理解しようとする

質問

私はHTML/CSS/PHP/MYSQLのプログラマーで、現在javascriptを学ぼうとしています。現在使用しているウェブメール（オープンソース）のコードを徹底的に調べ、それがどのように動作するかを理解しようとすることでそれを行っています。私は、ページのさまざまな部分がどのように読み込まれるのかを理解しようとしています（PHPで得られるページの再読み込みなしで）。私が間違っていなければ、それを行うためにwebpackを使用しています。間違っていなければ、ページのすべての部分はモジュールとして読み込まれます。

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    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] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.loaded = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "webmail/v/0.0.0/static/js/";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })

これは、その魔法を可能にするコードの（一部）であるようです。さて、この後のコードでwebpackはこのように使われています。

AbstractSystemDropDownUserView.prototype.settingsClick = function ()
{
    __webpack_require__(/*! Knoin/Knoin */ 5).setHash(Links.settings());
};

もし私が正しければ、この関数はsettingsClickに気に入られたボタンをクリックすると、モジュールをロードします。しかし、モジュール番号はどこで定義/割り当てられるのでしょうか？

私の道を切り開くためのどんな助けでも、大いに感謝します

解決するには？

Webpack は、プライマリ JS ファイルと、設定されたアドオン (追加のリソースを要求することができる) から始まり、これらのリソースをマージされたスクリプトにコンパイルし、さらに JS や CSS の変更時にホットスワップ更新するためのウォッチャーも備えています。 プロジェクトのソースコードを見ると、多くのCommonJS/Node-Styleモジュールとしてセットアップされていることがわかるだろう。 require またはES6スタイルモジュールのインポート/エクスポートディレクティブを使用します。

いくつかの場所をご紹介します。

• WebPack ドキュメント -> モチベーション
• React/WebPack クックブック

も見ておくといいでしょう。

• NPMの紹介 - NPMは、あなたが使いたいと思うほとんどのモジュールが存在する場所です。
• NodeJS - サーバーサイドのJS環境で、これらのツールの多くはnodeを介して動作します。
• ブラウザ化 - Webpackはbrowserifyとほぼ同じですが、より直接的なアプローチを好むかもしれません。
• ガルプ - Gulpはストリームベースのビルドツールです。webpackには独自のものがありますが、追加のアイデアを得るために見ておく価値があります。
• バベルJS - 旧6to5 - 現在のブラウザで最新のJS機能を使用できるようにします。
• ES5シム - IE8をサポートする必要がある場合は、これらが必要です。

Webpackはモジュールとnode/iojsのツールに依存し、extrasを使ったbrowserifyにも似ています。