extract-text-webpack-plugin replacement in webpack 5

Question

I'm working on the project upgrading from webpack 3 to webpack 5. In the project, it was using raw-loader and extract-text-webpack-plugin to parse imported html file(angular component), then combine all html files and output one single html. Here is the webpack config snippet：

.
.
.
# initialize the extractText plugin
const extractHTML = new ExtractTextPlugin({
    filename: `${assetsPattern}.[contenthash].html`,
    allChunks: true
.
.
.
# setup the loader
{
    test: /\.html$/,
    loader: extractHTML.extract('raw-loader')
}
.
.
.

As it's customized application, I require the html as a single file.

But in webpack 5, the extract-text-webpack-plugin is deprecated. The recommanded replacement of this plugin is mini-css-extract-plugin, but it's specified for css, seems not work for other file types. By using asset module(asset/resource) from webpack 5, it will output multiple html files.

Currently I'm blocked by this, is there any replacement of extract-text-webpack-plugin can fulfill my requirement? or is there any other solutions for this?

Transformism

Answer 1

See the repo which says it's replaced with mini-css-extract-plugin

Adaminah