jantimon / jantimon/html-webpack-plugin
Ability to pass extra plugins to the child compilation
- Dominant language
- JavaScript
- Stars
- 10.7k
- Forks
- 1.3k
- Avg merge
- 1m
- Merged PRs (30d)
- 1
Description
**Is your feature request related to a problem? Please describe.**
I want my template to be able to use `require("./file.css")`. My css-loader generates hashed classnames that i want to be able to reference in the html template.
However, this doesn't work when mini-css-extract-plugin is used:
```
Error: No module factory available for dependency type: CssDependency
```
**Describe the solution you'd like**
This can be fixed by passing `new MiniCssExtractPlugin()` to the child compiler:
```
const childCompiler = mainCompilation.createChildCompiler(compilerName, outputOptions, [
// Compile the template to nodejs javascript
new NodeTargetPlugin(),
new NodeTemplatePlugin(),
new LoaderTargetPlugin('node'),
new webpack.library.EnableLibraryPlugin('var'),
new (require("mini-css-extract-plugin"))({
filename: "../../tmp/wp-unused/html/[name].css",
chunkFilename: "../../tmp/wp-unused/html/[id].css",
}),
]);
```
So if html-webpack-plugin would allow me to pass additional webpack plugins for the child compilation, this scenario could be enabled without much issue. The css plugin does generate another copy of the extracted file, but as in the sample above, i can send that to some void location to avoid duplicates in the output. Or i could try and configure the plugin to actually write the .css output that is then used by the html page, but that is out of the scope of this ticket.
This would be a very generic, advanced-use-only feature that could potentially be used for many different purposes.
```
new HtmlWebpackPlugin({
filename: "index.html",
template: "index-generator.ts",
templateCompilerPlugins: [
new MiniCssExtractPlugin({}),
],
}),
```
Contributor guide
No contributing guide indexed for this repository
Research direction
The issue identifies the child compiler created by html-webpack-plugin; trace how that compiler is configured and how plugins are registered. Reproduce the templateCompilerPlugins example with mini-css-extract-plugin, then verify that the child compilation handles CssDependency without breaking generated HTML or introducing unwanted output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, webpack
- Domain
- build-system
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100