Почему Webpack неправильно обрабатывает пути к изображениям?

Как настроить Webpack для правильного разрешения путей к картинкам при сборке проекта, если пути для ассетов указаны в виде строк в исходном коде React приложения?
  • 23 июля 2024 г. 8:53
Ответы на вопрос 2
Webpack не обрабатывает пути к изображениям правильно из-за того, что по умолчанию он не умеет работать с данными типами файлов. Для правильного разрешения путей к изображениям при сборке проекта с помощью Webpack, необходимо настроить его возможности по работе с различными типами файлов.

Для этого нужно добавить соответствующий loader в конфигурацию Webpack. Например, для обработки изображений можно использовать file-loader или url-loader. Вот пример настройки Webpack для обработки изображений с использованием file-loader:

```javascript
module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: 'images/[name].[ext]',
          },
        },
      ],
    },
  ],
},
```

После добавления такой секции в конфигурацию Webpack, все изображения будут обработаны соответствующим loader'ом и подключены правильно.

Если пути для ассетов указаны в виде строк в исходном коде React приложения, то можно использовать import для импортирования изображений в компоненты и указания путей к ним:

```javascript
import imgPath from './path/to/image.png';

const MyComponent = () => {
  return (
    <img src={imgPath} alt="My Image" />
  );
};
```

Webpack автоматически заменит такие импорты на правильные пути к изображениям во время сборки проекта.
Вот если я пишу адрес images/img-1.png, то webpack после билда его как есть подставляет

Пример (который работает у меня) webpack.config.js (с react и без react (статика+ejs)) перекладывания различных "assets" в root-project/dist во время билда:
export default () => {
// ...
module: {
    rules: [

        {
            test: /\.(css|sass|scss)$/i,
            use: ['css-loader', 'sass-loader'],
            generator: {
                filename: 'assets/css/[name].[contenthash:10][ext]'
            }
        },

        {
            test: /\.(png|svg|jpe?g|webp)$/i,
            type: 'asset/resource',
            generator: {
                filename: 'assets/images/[contenthash:10][ext]'
            }
        },

        {
            test: /\.(woff|woff2|eot|ttf|otf)$/i,
            type: 'asset/resource',
            generator: {
                filename: 'assets/fonts/[contenthash:10][ext]'
            }
        },

    ],
},
// ...
}
Похожие вопросы