Автоматически запрашивать (или копировать) все изображения, на которые есть ссылки в HTML, используя Webpack

Question

Я только начал использовать Webpack с приложением Angular 1.x, у меня есть рабочее решение, но вместо того, чтобы требовать мои изображения (что заставило бы их копироваться в каталог сборки), я надеялся автоматически проанализировать HTML и потребовать все IMG теги.

Кажется, я нашел модуль, хотя, похоже, он больше не поддерживается: https://github.com/webpack/html-loader

Мне было интересно, что мои варианты здесь?

Опция заключается в использовании плагина копирования Webpack для копирования элементов в каталог сборки, но это означает, что я могу копировать вещи, которые не используются.

Я только начинаю с Webpack, но то, что я вижу до сих пор, замечательно, хотя для этого требуется иной тип мышления.

Answer 1

Я использую html-загрузчик в моей конфигурации dev, и он отлично работает для того, что мне нужно. Я не совсем уверен, почему вы хотите, чтобы изображения копировались, но если вам нужны imgs, html-загрузчик достигнет этого за вас. После этого я использую url-загрузчик так:

   {
      test: /\.(png|gif|jpe?g)$/i,
      // if the file have ~50kb or less it's added to DOM as a data atributte, if not it's compressed as an image
      loader: 'url?limit=50000'  
   },

Если изображение больше 50 КБ, оно копируется в мою папку сборки, если оно маленькое, я просто оставляю его в DOM в качестве атрибута данных, уменьшая количество http-запросов.

Я надеюсь, что это поможет вам как-то. Поначалу Webpack действительно сложен, но как только вы поймете, как он работает, вы никогда не вернетесь.