How does image assembly work in Webpack?

Question

webpack

Hey!
Tell me, how does saving images work logically in Webpack?

Let's say there are 100 pictures on the site.

I figured out only with a cumbersome assembly of pictures:
1) Each one must first be imported into index.js

import "./img/1.jpg";
import "./img/2.jpg";
import "./img/3.jpg";
...
import "./img/100.jpg";

2) Then in index.html to connect Is it possible to do everything somehow easier? Suppose, only in index.html to specify and the picture will be collected in the final project?
<img src="./img/1.jpg">

<img src="./img/1.jpg">

Answer 1

Try instead: Here it is:
<img src="./img/1.jpg" />
<img src=<%=require("./img/1.jpg")%> />