html-webpack-pluginのchunksの動的な設定サンプル

2020-11-24-advent-calendar-2020-html-webpack-plugin-webpack-config-dynamic-chunks-implementation.ts

import { Configuration } from "webpack";
import glob from "glob";
import HtmlWebpackPlugin from "html-webpack-plugin";

const entries: string[] = glob.sync(
  "src/path/**/*.t+(s|x)"
);

const chunks = entries.map((entry) => [
  entry.replace(/^src\/path\//, "").replace(/\.tsx?$/, ""),
  `./${entry}`,
]);

const config: Configuration = {
  entry: Object.fromEntries(
    chunks.map(([chunk, entry]) => {
      return [
        chunk,
        [
          "./node_modules/formdata-polyfill/formdata.min.js",
          `./${entry}`,
        ],
      ];
    })
  ),
  plugins: [
    ...chunks.map(
      ([chunk]) =>
        new HtmlWebpackPlugin({
          filename: `./pages/${chunk}.html`,
          // TODO: ここは適当。後から作る
          template: "src/index.tsx",
          chunks: [chunk],
        })
    ),
  ],
}

export default config;