A Webpack plugin to automatically generate Cloudflare Pages compatible _headers file to enable HTTP-2 Server Push

_headers

# Generated by ServerPushPlugin

/
  Link: <index.js>; rel=preload; as=script
  Link: <index.css>; rel=preload; as=stylesheet

server-push-plugin.js

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

const FilePrefix = "# Generated by ServerPushPlugin";

class ServerPushPlugin {
  constructor(options) {
    this.options = options;
  }

  apply(compiler) {
    compiler.hooks.compilation.tap("ServerPushPlugin", (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
        "ServerPushPlugin",
        (data, callback) => {
          const assets = data.assets;
          const source = this.generateAssetHeaders(assets);

          console.info(
            `Generated ${this.options.headersFile} file:\n${source}`
          );

          compilation.assets[`${this.options.headersFile}`] = {
            source: () => source,
            size: () => source.length,
          };

          callback(null, data);
        }
      );
    });
  }

  generateAssetHeaders(assets) {
    const scriptHeaders = assets.js.map(
      (path) => `  Link: <${path}>; rel=preload; as=script`
    );
    const styleHeaders = assets.css.map(
      (path) => `  Link: <${path}>; rel=preload; as=style`
    );
    return `${FilePrefix}\n\n/\n${scriptHeaders
      .concat(styleHeaders)
      .join("\n")}\n`;
  }
}

module.exports = ServerPushPlugin;

webpack.config.js

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