Ability to pass extra plugins to the child compilation #1818
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({}),
],
}),