javascript - HTML内のスクリプトsrcで使用するwebpack4チャンクハッシュ値を自動的に取得するには?

Question

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

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

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

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptmizerCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
    entry: './src/index.js',

    output: {
        path: path.resolve('dist'),
        filename: '[chunkhash].bundle.js' // <<<<<<
    },

    mode: 'development',

    optimization: {
        minimizer: [
            new TerserPlugin({}),
            new OptmizerCssAssetsPlugin({})
        ],
        splitChunks: {
            chunks: 'all'
        }
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    'css-loader'
                ]
            }
        ]
    },

    plugins: [
        new webpack.ProvidePlugin({
            cowsay: 'cowsay-browser'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ]
}

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

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

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

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

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