5

TL;DR: Webpack を使用したコード分割が必要な場合について説明していただけますか?bundle-loader

Backbone ベースのアプリを Require.js から Webpack に移行し始めたときrequire、ルーターに次のようなステートメントがあったことを覚えています。

someMatchedRoute: function () {
    require(['path-to-file'], function(module) {
        // doing something with the loaded module
        module();
    });
}

必要なコードを残りのコードと同じバンドルに配置し、特定のルートに切り替えるときに動的に必要となる別のファイルを生成するために、次のbundle-loaderように を使用する必要がありました。

// a function executed when the user’s profile route is matched
someMatchedRoute: function () {
    require('bundle!path-to-file')(function(module) {
        // doing something with the loaded module
        module();
    });
}

ここで、コードベースを ES6 モジュールに移行し、Webpack のドキュメントで説明さrequire.ensureれている構文を使用すると、次のようになります。

someMatchedRoute: function () {
    require.ensure(['path-to-file'], function(require) {
        var loadedModule = require('path-to-file');
        // doing something with the loaded module
        loadedModule();
    });
}

bundle-loader複数のチャンクを生成して動的にロードする必要があるかどうかはわかりません。そして、私がそうするなら、それはどのrequire呼び出しに行きますか —require.ensureまたはrequireコールバックの中ですか? それとも両方?それはすべてとても混乱しています。

4

0 に答える 0