CODEWITHSUNDEEP
javascriptwebpack
Shai UI
Shai UI

Reputation: 51898

How does webpack deal with images?

If it can't bundle images, where do the images go? Do you need another process aside from webpack to copy images to a certain directory (like Gulp)

Upvotes: 3

Views: 132

Answers (2)

Jason Allshorn
Jason Allshorn

Reputation: 1625

Images in many cases need to be imported. For example at the top of your app.js you can do 

import '../../../css/bb_client_flow.png';

Then in your code include a tag referencing the image in your assets folder. 

<img src="/assets/bb_client_flow.png" className="auth-flow"/>

This will put your images into the assets folder automatically. If you use a loader, and something like this in your webpack config. 

{
        test: /\.(png|jpg|gif|json|xml|ico|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'assets/',
              publicPath: '/'
            }
          }
        ]
      }

Finally I want to recommend the use of the picture tag and the use of different size images for different screen sizes as this will improve you load time and UX depending on the device. 

<figure>
    <picture>
    <source media="(min-width: 750px)"
            srcset="images/horses-1600_large_2x.jpg 2x,
                    images/horses-800_large_1x.jpg" />
    <source media="(min-width: 500px)"
            srcset="images/horses_medium.jpg" />
    <img src="images/horses_small.jpg" alt="Horses in Hawaii">
    </picture>
    <figcaption>Horses in Hawaii</figcaption>
</figure>

Upvotes: 0

Razvan Sandu
Razvan Sandu

Reputation: 81

In your webpack config, you'll need to add a rule for file-loader, as such:

module: {
  rules: [
    {test: /\.svg|\.png|\.jpg$/, use: ['file-loader']},
  ]
}

You can install file-loader from here

Upvotes: 2

Related Questions