How to load images using webpack?

@scotty_walker 

To load images using webpack, you will need to use the file-loader or url-loader plugins. Here is a step-by-step guide on how to set it up in your webpack configuration:

1. Install the necessary loaders:

1

npm install file-loader url-loader --save-dev

1. Update your webpack configuration file to include the image loader rules. Here is an example of how to configure the loaders:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

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

1. Import your images in your JavaScript or CSS files:

1

import image from './image.png';

1. When you build your project using webpack, the images will be loaded and outputted into the specified outputPath.