Webpack 2 — #14 — Добавляем картинки, file-loader

Webpack 2 — один из самых мощных и гибких инструментов для frontend-сборки. В чем его преимущества, какие проблемы он решает и как с ним работать — в практическом видеокурсе от основателя LoftSchool & LoftBlog Дмитрия Ковальчука. Ссылка на исходники из урока — в блоке с полезными ссылками.

В Webpack даже картинки — модули. Именно так я говорил во введении к этому курсу. Пришло время подтвердить мои слова конкретными примерами. Для того, чтобы Webpack мог работать с разными файлами, в том числе картинками, как с модулями, нам понадобится file-loader.

♥ Понравилось? Ставь лайк, чтобы мы продолжали записывать бесплатные и полезные видеоролики!

ツПолезные ссылки к видеоуроку:

ツДобавляйся в друзья:
Дмитрий Ковальчук

[uglkfrls]

то чувство, когда читаешь в течении недели всякую дрянь и сомнительный код в поисках правильных актуальных решений, а потом находишь быстрый, понятный ВИДЕОкурс. Спасибо, благодаря вам дальнейшее изучение webpack станет куда проще и приятнее!

[artemshapilov]

Благодарю за курс, Дмитрий, отлично подаете информацию. Ваши видео + документация помогли разобраться в webpack, до этого были сложности. Лайки и подписка. Было бы здорово в таком же формате что-то по Angular JS послушать. Кому тоже ставьте +

[Hazratgs]

Очень понравился курс! автор замечательно подает информацию

[free_Belarus_free_Ukraine]

Спасибо!
Была сборка, почти все работало.
Но, на подключаемые картинки ругался браузер.
С вашей помощью исправил.
Нет времени полностью погружаться в webpack, но сейчас главное, что он работает.

[orestborovets]

До конца долшло только 3к, в начале курса 16 lelele
Большое тебе спасибо за такой курс. Все понятно , голос приятный, коротко и о главном.

[victorkapustin]

спасибо! очень помог, а то я запарился лазить по форумам. все по красоте!

[musicits_fun]

Пора продолжение сделать. Ну добавить bootstrap-loader к примеру или же как работать с php бэкэндом и при этом автоматом перезагружаться или как с wordpress интегрировать поудобней или как react прикрутить и т.д.

[AlekseyMilov]

Как можно вставить картинку не img тэгом, а svg? Чтобы потом иметь возможность менять ее атрибуты прямо через css.

[СергейКазаков-юе]

А почему все модули делаются через module export, webpack поймут если сделать через es module ?

[rusplay]

не пойму почему у тебя в меню показывает картинку а у меня нет, хотя делаю всё тоже самое,
в итоге в ксс при сборке получается такой адрес background: url(../images/menu.svg) no-repeat;
должно быть по идее url(images/menu.svg)
как так ?

[dispeltr]

Спасибо за уроки Дмитрий. Скажите пожалуйста это заключительный урок из серии уроков по WEbpack 2?

[alexkonoplian]

Отличный курс, разобрался с первого раза просто всё повторив. Потом, начал вникать что и как, но с ходу - такая сборка потянет на не слишком большой SPA. Да и общий принцип модулей и конфигов после этого курса понятен. Читаешь документацию для конфигов, пишешь по этому шаблону - и на первое время хватит.
Есть ещё вопрос о картинках, чтобы они верно подключались и в разработке и в продакшене, на этапе разработки их приходится помещать в одну папку со скриптом, который её вызывает. Хотелось бы и в процессе разработки помещать их в папку, для общего порядка. Да и вообще, хотелось бы при разработке помещать файлы в нужную папку, а не в какую приходится. Ибо совсем порядка нет в такой сборке.

[Peter-vztb]

Круто, если бы курс был платным я деньгу не пожалел бы.

[gloompiqueweb]

Коплю деньги со стипендии) скоро обращусь к вам.