No documented replacement / upgrade path for `htmlWebpackPluginAlterChunks` removed in 4.0.0

Author: OliverJEvansCreated May 18, 2022Updated Jan 2, 2026

Labelswontfix

Current behaviour

In v4.0.0. removed a hook called htmlWebpackPluginAlterChunks but without any reasoning or documented replacement (https://github.com/jantimon/html-webpack-plugin/commit/342867e1edb7c2a8748b0aca396f160f0b13d42e).

I've picked up an old project and I'm rying to use this hook in a plugin pulled from a (now archived) Shopify Slate theme tool. However without any documented upgrade path I've hit a dead end.

I understand that its been missing for years now, but if theres any documentaiton or thoughts on how it can replaced, I'd be greatly appreciative.

Expected behaviour ☀️

To have a documented replacement for htmlWebpackPluginAlterChunks

Reproduction Example

https://github.com/Shopify/slate/blob/master/packages/slate-tools/tools/webpack/html-webpack-include-chunks.js

class

  constructor(options) {
    this.options = options;
    this.files = [];
  }

  apply(compiler) {
    compiler.hooks.compilation.tap(
      'htmlWebpackIncludeChunksPlugin',
      this.onCompilation.bind(this),
    );
  }

  onCompilation(compilation) {
    this.compilation = compilation;

    compilation.hooks.htmlWebpackPluginAlterChunks.tap(
      'htmlWebpackIncludeChunksPlugin',
      this.onAlterChunks.bind(this),
    );

    compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tap(
      'htmlWebpackIncludeChunksPlugin',
      this.onBeforeHtmlGeneration.bind(this),
    );
  }

  onAlterChunks(chunks) {
    this.chunks = chunks;
  }

  onBeforeHtmlGeneration(htmlPluginData) {
    const assets = htmlPluginData.assets;
    const publicPath = assets.publicPath;

    this.chunks.forEach((chunk) => {
      const name = chunk.names[0];
      const chunkFiles = []
        .concat(chunk.files)
        .map((chunkFile) => publicPath + chunkFile);

      const css = chunkFiles
        .filter((chunkFile) => /.(css|scss)\.liquid($|\?)/.test(chunkFile))
        .map((chunkFile) => chunkFile.replace(/(\.css)?\.liquid$/, '.css'));

      assets.chunks[name].css = css;
      assets.css = assets.css.concat(css);
    });
  }
}

module.exports = HtmlWebpackIncludeLiquidStylesPlugin;

Environment

Node.js v16.15.0 darwin 21.5.0 8.5.5

├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ @webpack-cli/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└── [email protected]

└── [email protected]

Source: jantimon/html-webpack-plugin

View original on GitHub View discussion on GitHub