Как реализовать загрузку изображения лоадером webpack?

Question

[Вадим Семенников]

Всем привет! Пытаюсь курить Реакт.
есть задание: Изображение должно импортироваться в компонент и обрабатываться лоадером вэбпака.
Объясните, пожалуйста, как это реализовать? Что с ним делать? Может есть пример
Спасибо

Answer 1

[Антон Спирин]

webpack.config.js

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

file-loader

Пример использования изображений в коде:

import React from 'react';
import image from './image.png';

const Example = () => (
  <img src={image} />
);

или:

import React from 'react';

const Example = () => (
  <img src={require('./image.png')} />
);

Comments

[Вадим Семенников]

Извините, за тупейший вопрос, но где найти webpack.config.js?
Спасибо

[Антон Спирин]

Вадим Семенников, смотря какие инструменты вы используете. Если create-react-app, то ничего нигде прописывать не надо. Там используется file-loader из коробки, а конфиг там инкапсулирован и находится в вендорном модуле.

[Вадим Семенников]

Антон Спирин, Спасибо Вам огромное!!!