webpack - 複数のエントリポイントを持つ適切な webpack バンドルを含める方法は?

Question

マルチエントリ webpack セットアップのエントリ ポイントに使用するスクリプト タグの生成を自動化する (または手動で把握する) 最良の方法は何ですか?

膨大な数の javascript 依存ライブラリに webpack を使用するように MVC アプリケーションをセットアップしています。MVC アプリはルートごとに新しいページを読み込むため、多数のエントリ ポイントがあり、それぞれに独自のエントリ スクリプトがあります。

コード分​​割とハッシュ命名 (キャッシュバスティング用) を使用しています。

webpack は各エントリ ポイントの依存関係ツリーを作成しているため、再利用のためにコードをバンドルに分割するという素晴らしい仕事をしているようです。これが私の構成です（上部のコードとプラグインを除く）：

module.exports = {
    mode: "development",
    entry: {
        products_index: './Scripts/app/pages/Products/index.js',
        users_index: './Scripts/app/pages/Users/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash:8].js',
    },    
    node: {
        fs: 'empty',
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                        // get the name. E.g. node_modules/packageName/not/this/part.js
                        // or node_modules/packageName
                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                        // npm package names are URL-safe, but some servers don't like @ symbols
                        return `npm.${packageName.replace('@', '')}`;
                    },
                },
            },
        },
    },

この例ではエントリを 2 つに制限しましたが、さらに多くのエントリがあります。

distこのセットアップの出力は次のとおりです。

 index.html                               
 npm.accounting.acb8cd33.js               
 npm.dropzone.1dcac339.js                 
 npm.jquery.7fe2b020.js                   
 npm.knockout-amd-helpers.356a8521.js     
 npm.knockout-punches.efb33702.js         
 npm.knockout.eaf67101.js                 
 npm.knockout.mapping.e01549c3.js         
 npm.moment.0f7e6808.js                   
 npm.sprintf-js.82f89700.js               
 npm.toastr.c6448676.js                   
 npm.webpack.2aab6b7b.js                  
 runtime.acfdeda3.js                      
 products_index.8ef7831b.js             
 products_index~users_index.02e60e46.js 
 users_index.42c4b7af.js                  

このアプローチはここで説得力を持って提示されており、論理的であるように見えるので、私はそれを使用しました。

このモンスターのスクリプト タグを作成するまでは、すべて順調に進んでいるようです。

たとえば、/usersルート上で、これらのファイルのどれを含めるかをどのように知ることができますか? webpack がこのすべての依存関係マッピングを行ったようで、私は自分でやり直さなければなりませんでした!

これを行う最善の方法について言及しているWebpackドキュメントサイトには何も見つかりませんが、html-webpack-pluginの議論は、すべてのスクリプトタグを単一のファイル。

ここで明らかな何かが欠けているに違いありません。