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

#14 — File-loader при работе с изображениями

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать Webpack 2.

В вебпаке даже картинки — модули. Именно так я говорил во введении к данному видеокурсу. Пришло время подтвердить мои слова конкретными примерами.

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

Давайте приступим.

Полезная ссылка:
http://survivejs.com/webpack/understanding-loaders/loading-images/

Я расположил логотип Webpack в формате svg в папке pages/index.
Ещё одну картинку, а точнее svg-иконку меню, я поместил в папку components/menu.

File-loader на практике

Установим плагин file-loader, который необходим для работы с изображениями, как с модулями.

Создадим файл для конфигурации плагина file-loader.

В него я вставлю заготовленный код лоадера. Лоадер будет вызываться всякий раз, когда Webpack будет встречать jpg-, png- и svg-файлы. В блоке options мы укажем маску, по которой будут именоваться картинки.

В файле конфигурации webpack.config.js вызовем созданный только что файл настроек images.js.

Добавим его в блок common.

Далее добавим картинку в шаблон index.pug

Аналогичным образом картинки подключаются в *.scss-файлы.

Сначала потестируем продакшен. Здесь всё окей. Обе картинки были успешно добавлены на страницу.

Затем соберем проект для продакшена и выполним аналогичную проверку.

Во-первых, папка build — здесь видим 2 картинки, как мы и ожидали.

Во-вторых, посмотрим в браузере — здесь тоже всё отрабатывает корректно.

Традиционный коммит завершит дело.

Ну что же, вот и подошел к концу наш мини-курс. Хочу подчеркнуть ещё раз, как я уже неоднократно говорил, данный видеокурс является ознакомительным и ни в коем случае не претендует на то, чтобы заменить официальную документацию.

Ещё очень много всего можно сделать, чтобы довести нашу сборку до совершенства. Как минимум, приходит на ум линтинг css- и javascript-кода, перевод всего проекта на ES6 и подключение транспайлера. А также минификация css, которая не была расссмотрена на данном видеокурсе. Кстати, её я вам предлагаю сделать самостоятельно, прямо сейчас.

Если вам понравился данный видеокурс, то я хотел бы пригласить вас в школу Лофтскул. На наших курсах вы найдёте очень много полезной и практичной информации, изложенной в доступной и современной форме. Я лично слежу за тем, чтобы знания, которые мы даём в лофтскул были самыми свежими и актуальными.

На этом я говорю: «До свидания» и желаю вам никогда не останавливаться на достигнутом, смотрите вперёд и идите в ногу со временем!

Всем спасибо и до скорых встреч!

ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.

Материалы к уроку:
Делись:

Оставь комментарий!

2 thoughts on “#14 — File-loader при работе с изображениями

  1. transcend:

    Отличный курс
    1 вопрос только остался:
    Как сделать так что бы file-loader брал пути картинок из .html файла…

    Document

    Обе картинки не перекидываюся в папку продакшена image, соответственно и не отображаются в собраном проекте.
    картинки которые добавляю в CSS background: url(«./images/red.svg») no-repeat;
    нормально обрабатываются и выводятся.

    Вообщем надо что бы картинки из обычного .html файла(не .pug и тд) тоже попадали в image при сборке

  2. transcend:

    Классная статья. 1 вопрос только:

    Как сделать так что бы file-loader брал пути картинок из .html файла…

     

     

    <head>

    <title>Document</title>

    </head>

    ——————body

    <img src=»./images/blue.svg» alt=»»>

    <img src=»./images/test.jpg» alt=»»>

    ——————/body

    Обе картинки не перекидываюся в папку продакшена image, соответственно и не отображаются в собраном проекте.

    картинки которые добавляю в CSS  background: url(«./images/red.svg») no-repeat;

    нормально обрабатываются и выводятся.

    Вообщем надо что бы картинки из обычного .html файла(не .pug и тд) тоже попадали в image при сборке

Добавить комментарий

Рекомендуемые курсы