Webpack генерирует битую лишнюю картинку

30.05.2021, 00:55. Показов 4116. Ответов 0

Метки javascript, javascript для начинающих, node js, webpack (Все метки)

Студворк — интернет-сервис помощи студентам

Всем привет. Собрал свою первую сборку Webpack

Всё работает, нет никаких ошибок

Есть всего одна картинка

Она используется в .less и в index.html файле

При dev и prod билдах картинка дублируется и попадает мимо img каталога

Кроме того, картинка некорректно отображается

Убил целый день на поиск этой проблемы

Пожалуйста подскажите что может быть не так

Ссылка на репозиторий: Ссылка

Добавлено через 4 часа 32 минуты
Всем спасибо, ответ нашел здесь
Цитата

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

В версии 5 webpack представил модули ресурсов в качестве замены для raw-loader , url-loader и file-loader, которые теперь выполняются по умолчанию:

Модули ресурсов - это тип модуля, который позволяет использовать файлы ресурсов (шрифты, значки и т. Д.) Без настройки дополнительных загрузчиков.

Каждый раз, когда webpack объединял мой проект, asset/resource и file-loader выполнялись одновременно, что приводило к дублированию.

В конце концов, все, что мне нужно было сделать, чтобы решить мою проблему, - это удалить file-loader из файла webpack.config.js и установить output.assetModuleFilename в желаемый выходной каталог.

0

В webpack.config.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
   assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
      }
    ]
  },
};

IT_Exp

Эксперт

34794 / 4073 / 2104

Регистрация: 17.06.2006

Сообщений: 32,602

Блог

30.05.2021, 00:55

Ответы с готовыми решениями:

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

Логический тренажёр для детей "Исключи лишнюю картинку"
Здравствуйте! Помогите, пожалуйста, с заданием.:impossible: При запуске программы должны появиться 3 картинки, две из которых из одной...

Программа, которая генерирует HTML-документ, содержащий текст и картинку
Напишите программу, которая создает (генерирует) полноценный HTML-документ, содержащий текст, приведенный по ссылке:...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

BasicMan

Эксперт

29316 / 5623 / 2384

Регистрация: 17.02.2009

Сообщений: 30,364

Блог

30.05.2021, 00:55

Помогаю со студенческими работами здесь

Webpack webpack-dev-server
После изменения sass файла сообщает об обновлении модуля в жс файле, но стили только после ф5 меняются. А когда сам жс файл меняю то...

Проверка на битую ссылку
Здравствуйте, подскажите каким методом, возможно проверять определенный url на работоспособность, например: когда сайта уже не существует...

Как удалить битую ссылку
Точней быть.Как удалить из поисковых машин GOOGLE,YANDEX.После удаления записи с сайта,поисковые машины видят ссылку с записей.Но придя по...

Как заменить битую иконку
На картинке битая иконка картинки. Подскажите пожалуйста, как изменить ее на любую другую из awesome например. Добавление в alt='<i...

HTML - Надо: вставить картинку в картинку, в эту картинку, ссылку в картинку
Вот схема моего сайта. http://s020.***********/i716/1404/8c/254516feacb3.jpg У меня пока что на этой странице есть: 1. Элемент Фон -...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

Наверх