Webpack как подключить картинку?

Для подключения картинки в проекте, который использует Webpack, следует выполнить несколько шагов.

1. Убедитесь, что у вас установлен file-loader или url-loader.
Запустите команду в консоли, чтобы установить file-loader:

   npm install file-loader --save-dev

Или, если вы предпочитаете url-loader, установите его:

   npm install url-loader --save-dev

2. В webpack.config.js добавьте правило, используя файловый или URL-загрузчик.
Добавьте следующий код в свой конфигурационный файл Webpack, в разделе module.rules:

   module.exports = {
     //...
     module: {
       rules: [
         //...
         {
           test: /.(png|jpe?g|gif)$/i,
           use: [
             {
               loader: 'file-loader',
             },
           ],
         },
       ],
     },
   };

Или, если вы предпочитаете использовать url-loader, замените последний код на следующий:

   module.exports = {
     //...
     module: {
       rules: [
         {
           test: /.(png|jpe?g|gif)$/i,
           use: [
             {
               loader: 'url-loader',
               options: {
                 limit: 8192, // если файл меньше 8 КБ, он будет преобразован в base64 URI
               },
             },
           ],
         },
       ],
     },
   };

3. Теперь вы можете импортировать картинку в свой код и использовать ее.
В файле JavaScript, где вы хотите использовать изображение, выполните следующий код:

   import YourImage from './path/to/your/image.png';

После этого вы сможете использовать переменную YourImage для работы с вашим изображением. Например, вы можете установить его как фон для элемента или добавить его в разметку:

   var img = document.createElement('img');
   img.src = YourImage;
   document.body.appendChild(img);

Или, используя React:

   import React from 'react';
   import YourImage from './path/to/your/image.png';

   const App = () => {
     return (
       <div>
         <img src={YourImage} alt="Your Image" />
       </div>
     );
   };

   export default App;

Вот и все! Теперь вы должны быть в состоянии успешно подключить картинки в проекте с помощью Webpack.