jantimon / jantimon/html-webpack-plugin
No documented replacement / upgrade path for `htmlWebpackPluginAlterChunks` removed in 4.0.0
- 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