'Migrate rule containing multiple loaders from Webpack v4 to v5

I want to migrate this current rule from Webpack v4 to v5:

  rules: [
    {
      test: /\.twig$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            context: './src',
            name: '[path][name].[ext]',
          },
        },
        {loader: 'extract-loader'},
        {loader: 'html-loader'},
      ],
    },

    ...

The thing is that file-loader will be deprecated.

Source: https://webpack.js.org/migrate/5/#clean-up-configuration

If you have rules defined for loading assets using raw-loader, url-loader, or file-loader, please use Asset Modules instead as they're going to be deprecated in near future.

But this rule contains multiple loaders, and I don't know how to reorganize the code to use

type: 'asset/resource', 

Without breaking the chain of execution.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source