What files do webpack loaders work through?

Question

When you set the regex after the test key in a loader object, does that look through all files in your project and load them using the loader you've designated, even if those files weren't required by the file in your entry point? Does this then get placed in the bundle.js file?

Answer 1

No it will only include what is required by your script.

Answer 2

<img src={ require('../some/img.png') } /> is a way to tell Webpack that your source code needs this image to run.

In a production Webpack build, this will get compiled into something like <img src="http://yoursite/whatever/89de0f2.png" />. The require() statement is never executed, it's replaced with valid Javascript code. This replaced code is what's put in bundle.js.

The image is then put into whatever output folder you specify (like a local dist/ folder), and it's renamed to something unique, which is usually some hash of the file contents, resulting in 89de0f2.png. (I made up this name for the example, but it usually looks something like that).

Now when you upload that file, 89de0f2.png, your source code will reference 89de0f2.png exactly, so that version of the image is guaranteed to exist. This is how Webpack gives you production guaranteed asset loading.

Wepback will only put img.png in your dist/ folder as 89de0f2.png if you specifically require it. Any other images will not be put in that folder.

You may also be asking about base64 encoding images and putting them directly into your bundle.js file. In this case, no image is put into dist/, but all the other rules reply. The require() call is still replaced with valid Javascript.

There is one case where Webpack will require multiple assets. You can require patterns, like <img src={ require.context( './images', true, /\.png/ ) } /> and Webpack will build all png files in that directory into the dist/ folder. See this Stackoverflow question for more context.