How do I use file-loader in Webpack?

How do I use file-loader in Webpack?

To use file-loader in Webpack, first install it using npm or yarn. You can run npm install file-loader --save-dev.

What do I need to add to my Webpack configuration?

In your Webpack configuration file, add a rule for file-loader in the module section like this:

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)$/,
      use: 'file-loader',
    },
  ],
},

Can I customize the output path for the files?

Yes, you can customize the output path by adding an options object to the file-loader rule. For example:

use: {
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
    outputPath: 'images/',
  },
},

What types of files can I use file-loader with?

File-loader can be used with various file types, including images (png, jpg, gif), fonts, and other assets. Just adjust the test regex accordingly.