tl; dr;スクリプトタグでコードを捨てることなく、複数のWebpackバンドルをロードする方法複数のWebpackバンドルを正しくロードする

webpackを使用していますが、これまでにwebpackバンドルをロードするときに欠けているようですrequirejsを使用してコードをモジュールに分割することができます（これはwebpackのバンドルに相当します）requirejsを使用すると、コード内の名前でスクリプトを要求し、webpackのURLにマッピングされますページ上にスクリプトタグを追加するだけで、アプリケーションのビュー全体に散らばっているスクリプトで終わるようになり、管理者の手を煩わせることなく簡単にバンドルを切り替えることができますあなたは、そのURLのすべての出現を見つけて置き換える必要がありますが、世界の終わりではありませんが、私はどちらかこれをより簡単にするための機能や、requirejsとwebpackの間に受け入れられた違いがあるかもしれません。

webpackを追加することを検討しているコードベースについては言及していません。シングルページアプリケーションなので、webpackはこの種の環境には適していません。

それがこの

ページ骨格/レイアウト

<html> 
<head><!-- stuff here --></head> 
<body> 
    <!-- some included view here --> 
</body> 
</html>

次のようになりますので、ちょうど私が中に含まれるように、これをつもりだろうかにコンテキストを少し追加して、当社のサーバー側のコードは、MVCパターンを使用しています

図1

<div> 
    <!-- ... --> 

    <!-- Currently it has this --> 
    <script> 
     require(['something'], function(s){ /* new s(); */ /* s(); */ /* etc */ }); 
    </script> 
    <!-- and i'd imagine it would be like this with webpack --> 
    <script src="my_bundle.js"></script> 
</div>

図2

<div> 
    <!-- ... --> 

    <!-- Currently it has this --> 
    <script> 
     require(['something', 'another_thing'], function(s){ /* new s(); */ /* s(); */ /* etc */ }); 
    </script> 
    <!-- and i'd imagine it would be like this with webpack --> 
    <script src="my_bundle.js"></script> 
    <script src="my_bundle2.js"></script> 
</div>

出典

2017-12-15 Snipzwolf

私は完全にルータアプローチに満足していませんでした。なぜなら、私たちのURLをjavascriptで書き換えて、ページがコードを共有するimport文を複製することを意味していたからです。import docsは、インポートされたスクリプトは、ページの読み込み中に動的に読み込まれるのではなく、最終的なバンドルに含まれます。これは、ほとんどの時間使用されていないバンドル内に多くのコードが存在することを意味します。

バンドルファイルをロードするための簡単なバージョンのrequirejsを効率的に作成して、既存のコードと同様の構造を維持することができます。私自身のローダーを動かす代わりにライブラリを用意していますが、私はまだ決めていません。

ローダー

class Loader{ 

    constructor(config){ 
    this.config = config; 
    } 

    load(modName){ 
    if(this.config.debug)console.log('loader - ', 'load called', arguments); 

    if(!document.getElementById(modName)){ 
     if(this.config.debug)console.log('loader - ', 'loading new script', modName, this.config.map[modName]); 

     var script = document.createElement('script'); 
     script.id = modName; 
     script.type = 'text/javascript'; 
     script.src = this.config.map[modName]; 
     script.async = true; 
     document.head.appendChild(script); 
    } 
    } 

} 

export default Loader;

ローダーコンフィグ

window.loader = new Loader({ 
    'debug': true, 
    'map': { 
    'something': '/scripts/bundle.js', 
    'another_thing': '/scripts/bundle2.js' 
    } 
});

見るので、1

<div> 
    <!-- ... --> 

    <!-- Currently it has this --> 
    <script> 
     require(['something'], function(s){ /* new s(); */ /* s(); */ /* etc */ }); 
    </script> 
    <!-- which would change to (any of the callback code would be inside the bundle) --> 
    <script> 
     window.loader.load('something'); 
    </script> 
</div>

出典

2017-12-18 15:20:45 Snipzwolf

最近、webpackのcode splitting機能をシングルページアプリケーションで使用して、ルートに基づいてバンドルを動的にロードしました。これは、必ずしもアプリケーション全体にスクリプトタグを捨てる必要はありません。あなたを意味WebPACKので束ね依存関係ツリーのルート、すなわち

// Index 
router.on(() => { 

    import(/* webpackChunkName: "routeA" */ '../routes/routeA').then((module) => { 
    // do something with your loaded module 
    }).resolve(); 
});

Dynamically loadingこの「ルート」スタイルモジュール：あなたはどのような種類のルーティングメカニズムを使用する場合は、動的にそのルートはそうのようにアクセスされた依存関係をインポートすることができますあなたが必要なときにしかそれを取り出すことができません。つまり、このルートを実行すると、クライアントはこのbundle.jsのみを取得します。

編集：動的な輸入品を使用して

は、あなたのWebPACKの設定でchunkFilenameプロパティを追加する必要がありますがexpress.jsを使用している場合は、そのルーティングメカニズム以下同じ行うことができます。最善の策は、webpack（上記リンク先）が提供するコード分割ドキュメントを参照することです。

出典

2017-12-15 12:10:51

私が正しく理解していますすべてのあなたのルートを持つすべてのページに含まれているバンドルを持っているならば他の必要なバンドルをロードしますか？それが正しい場合は、Webpackに組み込まれているルーティング機能か、別のライブラリによって提供されている機能ですか？ – Snipzwolf

また、コンベンションを呼び出す際のコメントですか、それとも何らかの意味がありますか？私は怠惰な読み込みのために[docs]（https://webpack.js.org/guides/lazy-loading/）を読んだが、それはそれに対処していないようだ。 – Snipzwolf

コメントはバンドルされたチャンクに名前を割り当てるためにWeb Packのコード分割によって使用される特別なコメントです。空白の場合は、ランダムな名前が生成されます。アプリケーションでは何をサーバーとして使用していますか？ –

複数のWebpackバンドルを正しくロードする

ページ骨格/レイアウト

図1

図2

答えて

ローダー

ローダーコンフィグ

見るので、1

関連する問題