Webpackで出力したbundleのハッシュ値を抽出して使う

個人的に開発しているサイトではWordPressのPHP上にReactを載せており、そこではbundleのハッシュ値をPHP側で参照できるようにしています。extract-hash-webpack-pluginを使うと任意のテキスト形式でハッシュ値を含んだファイルを出力できます。今回はPHPから参照したいので.phpの形式で出力してみます。以下がwebpack.config.jsの例です。

var path = require('path');

var ExtractHashWebpackPlugin = require('extract-hash-webpack-plugin').default;
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const DIST_PATH = "theme/dist";

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "index.[hash].js",
        path: path.resolve(__dirname, DIST_PATH)
    },
    /* ... */
    plugins: [
        new ExtractHashWebpackPlugin({
            dest: DIST_PATH,
            filename: 'version.php',
            fn: hash => `<? $JS_HASH = '${hash}'; ?>`
        }),
        /* ... */
    ]
};

プラグインのfnオプションでハッシュ値を使った出力を定義できます。今回は変数$JS_HASHにハッシュ値を保存するPHPのコードを出力するようにしています。