jantimon / jantimon/html-webpack-plugin

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

Open
#1,750 3 comments 1 reaction 0 assignees View on GitHub
wontfix
Dominant language
JavaScript
Stars
10.7k
Forks
1.3k
Avg merge
1m
Merged PRs (30d)
1

Description

## 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 HtmlWebpackIncludeLiquidStylesPlugin {
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
```
β”œβ”€β”¬ babel-loader@8.2.5
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ clean-webpack-plugin@4.0.0
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ css-loader@6.7.1
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ css-minimizer-webpack-plugin@3.4.1
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ eslint-webpack-plugin@3.1.1
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ html-webpack-plugin@5.5.0
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ mini-css-extract-plugin@2.6.0
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ postcss-loader@6.2.1
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ sass-loader@12.6.0
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ source-map-loader@3.0.1
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ stylelint-webpack-plugin@3.2.0
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ url-loader@4.1.1
β”‚ β”œβ”€β”¬ file-loader@6.2.0
β”‚ β”‚ └── webpack@5.72.1 deduped
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ vue-loader@16.8.3
β”‚ └── webpack@5.72.1 deduped
β”œβ”€β”¬ webpack-cli@4.9.2
β”‚ β”œβ”€β”¬ @webpack-cli/configtest@1.1.1
β”‚ β”‚ └── webpack@5.72.1 deduped
β”‚ └── webpack@5.72.1 deduped
└── webpack@5.72.1
```

```
└── html-webpack-plugin@5.5.0
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the Shopify Slate reproduction at packages/slate-tools/tools/webpack/html-webpack-include-chunks.js and the removal commit for htmlWebpackPluginAlterChunks. Trace the related html-webpack-plugin hooks used there and document a supported replacement for this chunk and asset handling. Done means the migration path and its limitations are explained for html-webpack-plugin 5.x.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js, webpack
Domain
build-system, documentation
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.