file-loader 6.2.0

File-loader is an npm package used in conjunction with Webpack. It essentially resolves import or require() on a file into a URL and emits the file into the output directory. This makes it extremely useful when you're dealing with assets like images, fonts, or other file types inside your JavaScript modules.

To utilize file-loader, start by installing it using npm via the command npm install file-loader --save-dev. Once the installation is complete, you can import the target file(s) within your bundle's files. For instance, if you want to import an image, your code will look something like this:

import img from './file.png';

You'll then need to add the file-loader to your Webpack configuration. An example is provided below:

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

In the above example, webpack will use the file-loader for any files that match the regular expression (png|jpe?g|gif)$, which covers any files with the extensions .png, .jpg, .jpeg, or .gif.

The extensive documentation for file-loader, including more detailed usage examples and configuration options, can be found on its GitHub repository at https://github.com/webpack-contrib/file-loader.