Migrate rule containing multiple loaders from Webpack v4 to v5

user_10716664 0
Viewed 39

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.

webpack
1 Answers

Possible duplicate: How to emit file with asset modules at the end of a loader chain?

If you add type: 'asset/resource' after test do the work:

rules: [
{
  test: /\.twig$/,
  type: 'asset/resource', // <-- here
  use: [
    {
      loader: 'file-loader',
      options: {
        context: './src',
        name: '[path][name].[ext]',
      },
    },
    {loader: 'extract-loader'},
    {loader: 'html-loader'},
  ],
},
user_15460120
Related