Generate index.html while using custom webpack config

[huv1k]

• [x] I'd be willing to implement this feature (contributing guide)

Description

Currently, when using @nrwl/web:webpack with a custom config, there is no way how to generate a custom index.html, because there are two webpack configs. One is for es5 and second is for esm when using HtmlWebpackPlugin we are emitting these index.html for each config and it's really difficult to put their es5 and esm outputs from both processes ton single index.html Right now these two outputs are merged and then generate index.html if there is generateIndexHtml: true https://github.com/nrwl/nx/blob/0c614b2d6bf230b862423b0514edee636e3ea07a/packages/web/src/executors/webpack/webpack.impl.ts#L236-L249

There should be an option to provide a custom function that is going to work similarly to a custom webpack config. This would enable us to modify index.html depending on our use case.

Motivation

Currently, it's really difficult to get working CSP with both es5 and esm emitted assets inside index.html. This should simplify the process around it and provide the possibility to modify index.html for example minify output etc. There is a lot of use cases that could be useful with this solution.

Suggested Implementation

Provide a new option customHtml for @nrwl/web:webpack, that is going to work similar as webpackConfig. This function would be called instead of writeIndexHtml with same options. This would bring full control to users, who could implement their own function for generating HTML with all emited files etc.

Alternate Implementations

Another possible solution could create a postprocessor for already generated HTML, we could parse this and for example, inject CSP depending on already emitted HTML.

[tealang7012]

Any update on this feature?

[LongLiveCHIEF]

I'd also be willing to collaborate with this feature. If anyone is working on it already, please reach out. My thoughts are that we could alter the index option of this executor so that it takes < IndexLoader | string> with the interface of IndexLoader looking something like this:

interface IndexLoader {
  template: (path to template | template string)
  loader: (any webpack loader)
}

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[huv1k]

Can we reopen this issue? 🙏 Still a problem 🙈

[LongLiveCHIEF]

I think you'd have to create a new issue at this point.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.