問題タブ [splitchunksplugin]

index.htmlスクリプト src を適切に設定するために内部で使用できるように、webpack4 によって生成されたチャンクハッシュ値を取得するにはどうすればよいですか?

簡単なコンテキスト: 私は webpack の完全な初心者であり、今日学び始めたので、愚かな質問ではないことを願っています。構成、js、css の抽出、それらの縮小、およびおそらくすべての非常に基本的な操作の方法を知っています。

これは私のwebpack.config.jsです：

関連する部分は、filename: '[chunkhash].bundle.js'のようなファイル名を生成するもの6f9e5dd33686783a5ff8.bundle.jsです。

その名前をhtmlのように使用できますが<script src="dist/6f9e5dd33686783a5ff8.bundle.js"></script>、コードが更新/再生成されるたびに変更する必要があります。

filename: '[name].bundle.js'の代わりに使用できましたchunkhashが、ポルポスのキャッシングには適していません。

それで、プロジェクトをビルドするたびに、chunkhash値を取得してそれを使用してスクリプトのsrcファイル名を自動的に設定する方法はありますか?index.html

有効なアドバイスは大歓迎です！

反応アプリケーションを構築し、webpack を使用してアセットをバンドルしています。また、ファイル サイズが肥大化しないように、すべての node_module バンドルを分割しています。

目標は、ネットワーク リクエストを減らし、バンドル サイズを小さくすることです。そのため、サーバー側で jsx および js コードを事前に、babel を使用して commonjs モジュールに変換し、babel をブラウザーに送信する必要がなくなるようにするのが理想的だと思います。

これは、これまでのwebpack構成ファイルでの私のoptimization.splitChunksコードです。私はwebpackとbabelを初めて使用します。何かが明確に説明されていない場合はご容赦ください。

次に、これはchrome devtool elementsタブを表示したときに得た結果です