Webpack 5 asset modules

[nickovchinnikov]

Igal Kleiner:

Note about Webpack 5

As of Webpack 5, there's no need to install url-loader. Webpack 5 ships with Asset Modules, which replace url-loader, raw-loader and file-loader by adding 4 new module types - asset/resource, asset/inline, asset/source and asset. In my case, I wanted to copy all assets to the assets folder, so this was my configuration:

module.exports = {
      output: {
        // ...other output configurations
        assetModuleFilename: 'assets/[hash][ext][query]',
      },
      module: {
        rules: [
          // ...other rules,
          {
            test: /\.(png|jpg|gif|svg)$/i,
            type: 'asset/resource',
          },
        ],
      },
    }

And, of course, you can test it for .svg only:

test: /\.svg/,

Perhaps someone will find it helpful!

Cheers!