webpack file-loader load all files in a folder

Question

I have a bunch of images in a folder and webpack file-loader loads only those referenced inside the html or css files. thats's fine. But I want all the images in the folder to be loaded in the final dist/images folder as well, wheter they are addressed inside html or not.

The point is I want to load them by user click one after another

Thanksssssssss

score 3 · Accepted Answer · answered Jul 18 '17 at 12:18

3

You can force Webpack to require every asset from a certain folder.

Put following code inside the entry point of your application:

// load assets
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('images/', true));

answered Jul 18 '17 at 12:18

Tom Van Rompaey

3,556
20
22

how is the require imported? What is it? – Oliver Watkins Jan 26 '18 at 06:52

score 0 · Answer 2 · answered Feb 17 '21 at 16:09

I stumbled upon this problem today, and after some searching, I saw a lot of different answers.

The solution using require.context() to recognize images in a folder assumes you are running node on the server. In our case, we are only using webpack to bundle files for a .NET Core MVC app.

Regardless of your particular scenario, simply referring the images in an unused class declaration would seem the most easy and intuitive way for me. It doesn't matter at all that we are overwriting the background-image property.

.--webpack-detect-images {
    background-image: url('./assets/images/file1.png');
    background-image: url('./assets/images/file2.png');
    background-image: url('./assets/images/file3.png');
}

webpack file-loader load all files in a folder

2 Answers2