Как использовать html-загрузчик с webpack 4?

Question

Что мне нужно ввести в <img> атрибуте 'src', чтобы html-загрузчик заменил его на URL? Предположим, что папка public доступна через webpack-dev-server, макет проекта выглядит как

- src
  - index.js 
- img
  - dog.jpg
  - cat.jpg
- public
  - index.html

webpack.config.js имеет правила для url-загрузчика и html-загрузчика:

{ test: /\.(png|jpg)$/, loader: 'file-loader' },
{ test: /\.(html)$/, loader: 'html-loader'},

index.js импортирует изображения:

import './../img/cat.jpg'
import './../img/dog.jpg'

И index.html имеет <script> для index.bundle.js. Я ожидаю обработки <img src="dog.jpg">, но этого не происходит. Где я не прав? Спасибо.

Answer 1

По умолчанию требуется каждый локальный (require ('./ image.png')).Возможно, вам потребуется указать загрузчики для изображений в вашей конфигурации.Я настоятельно рекомендую вам использовать file-loader или url-loader в этом сценарии вместо html-loader.Infact в документации по gitHub html-loader только предлагает это.