jantimon / jantimon/html-webpack-plugin

Ability to pass extra plugins to the child compilation

Open
#1,818 6 comments 0 reactions 0 assignees View on GitHub
wontfix
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.