`html-webpack-plugin`でReactをテンプレートに使う

2022-03-10 公開

テンプレートに指定したファイルからmodule.exportsでstringまたはそれを返す関数、Promiseを出力すればいいので、

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    // ...
    plugins: [
        // ...
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "src/index.html.tsx",
        }),
    ],
};

のように設定し、index.html.tsxで、

import React from "react"
import { renderToStaticMarkup } from "react-dom/server"

export default function () {
    return (
        `<!DOCTYPE html>` +
        renderToStaticMarkup(
            <html lang="en">
                <head>
                    <meta charSet="utf-8" />
                    <meta
                        name="viewport"
                        content="width=device-width,initial-scale=1.0"
                    />
                    <title>Title</title>
                </head>
                <body>
                    <p>Hello, html-webpack-plugin.</p>
                </body>
            </html>
        )
    )
}

のように、renderToStaticMarkupを使って文字列を返す関数をexportすればよい。