How do I use url-loader in Webpack?

How do I use url-loader in Webpack?

To use url-loader in Webpack, first install it via npm: npm install url-loader --save-dev. Then, configure it in your Webpack config file.

What should I add to my Webpack config?

In your Webpack config, add a rule for url-loader in the module section. For example:

module: {
  rules: [
    {
      test: /\.(png|jpg|gif|svg)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192,
          },
        },
      ],
    },
  ],
},

What does the 'limit' option do?

The 'limit' option specifies the maximum size (in bytes) for files to be inlined as data URLs. Files larger than this limit will be emitted as separate files.

Can I use url-loader with other loaders?

Yes, you can use url-loader alongside other loaders. Just ensure that the rules are properly defined in your Webpack config.