How does using loaders in webpack affect your build file?

Question

When I write a traditional web-app (MVC-type), assets are served from the public folder (usually) but I notice in React there is not public folder (using create-react-app)... Instead I have use loaders.

Are the loaded files included as part of the bundle file that Webpack generates for React once you do a build? Does that mean it's best if I use a CDN for for static assets instead of using image loaders because it'll increase the size of my builds?

Or what are just some best-practices when handling static assets when using create-react-app?

Thanks ahead if you have any input! Just trying to understand better...

loaders just build static assets, and in production, you load those static assets normally. suggested reading: blog.andrewray.me/webpack-when-to-use-and-why — Andy Ray
– Andy Ray, Commented Nov 18, 2017 at 20:46

Christian Santos · Accepted Answer · 2017-11-18 23:25:51Z

1

If you are using create-react-app, and you import images into your JS files, those images will be loaded using the url-loader webpack module (link to its github), which either embeds your images directly into the HTML using DataURLs (more on that here) or the images are put into their own separate file if they are bigger than 10,000 bytes.

The relevant code is in webpack.config.prod.js:

{
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve('url-loader'),
    options: {
      limit: 10000,
      name: 'static/media/[name].[hash:8].[ext]',
    },
},

Per the configuration above, larger images (above 10,000 bytes) will be placed in the static/media folder.

This is the behavior if you import your images into your JS files like below:

import img from './file.png'

If you are not importing your images, then it is completely up to you to choose how organize your images. For example, you could place your images in a /static/images folder in your root directory, and reference those images like so:

<img src="/static/images/logo.png" />

In terms of best practice, you can make an argument either way. One key benefit of using url-loader is that smaller images are embedded into your HTML, which should help with performance. On the other hand, serving your images from a CDN can potentially serve your large images faster than your application's server.

edited Nov 18, 2017 at 23:25

answered Nov 18, 2017 at 23:08

Christian Santos

5,4551 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hackrnaut Over a year ago

Thanks so much for the nice explanation! This is the kind of detail I was looking for!

Collectives™ on Stack Overflow

How does using loaders in webpack affect your build file?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related