Учите Webpack на примере: размытые изображения-заполнители

1661806833 uchite webpack na primere razmytye izobrazheniya zapolniteli

от Калалау Кантрелл

1*h2X9ckg3FJr4FGSfwh0F2w
мобильный. Изображение Родиона Куцаева на Unsplash.

Репо, которое прилагается к этой публикации, использует webpack 3. Если вы заинтересованы в том, чтобы изучить webpack 4, эта публикация будет вам полезна, поскольку концепции, а также формат файла конфигурации одинаковы. Webpack 4 действительно представил оптимизацию, возможности без конфигурации, а также новые готовые плагины, о которых опытный пользователь хотел бы знать, но это выходит за рамки цели этой публикации.

Это эпизодическое руководство для изучения webpack на разных примерах. Новички Webpack приветствуются. Я сам такой, и я попробую объяснить вещи webpack такими терминами, которые будут иметь смысл для тех, кто знакомится с инструментом.

Все люди, обслуживающие пакеты, использованные в данном руководстве, заслуживают признания того, что сделали такие замечательные инструменты доступными для сообщества. Поскольку это тема этого пособия, особенная благодарность адресована responsive-loader и поддерживающему проект Джереми Стуки.

В эпизоде ​​I мы рассмотрим технику загрузки изображений. Это включает 1) встраивание размытых версий заполнителей наших изображений при начальной загрузке страницы. Затем 2) запрашивает полные изображения с сервера. Наконец, 3) когда полные изображения наконец-то загружаются, они исчезают, а размытые заполнители удаляются.

1*zxTkKZ-oMGJXO0l-_RQZxQ
Размытые изображения-заполнители.

Эта техника отлично подходит для устройств с медленным соединением. Это дает пользователям некоторое представление о том, как будет выглядеть страница в течение нескольких секунд (например, медленного 3G), которые могут потребоваться для загрузки изображений страницы.

РЕКЛАМА

Начинаем

Если вы хотите продолжать работу в своем редакторе кода, вы можете скачать это репо или git clone и checkout в blur-up ветвь репо, если хотите.

Ниже приведена структура файла, которую вы должны найти при открытии папки проекта.

Мы будем использовать webpack и в частности адаптивный загрузчик. Мы изменим размер и создадим размытые заполнители для трех изображений в src/imgs. Это, кстати, персонажи из любимой видеоигры автора на все времена.

Давайте посмотрим на наш исходный код, начиная с index.html. По ходу работы мы увидим, что webpack делает для нас и остановимся, чтобы поговорить о том, как это сделать. Шаблонный план был пропущен и заменен на <-- ... —> для краткости.

Вы, вероятно, заметили, что их три <;a>, по одному для каждого из наших изображений. Но что с литералами шаблона? И что that requirefunction все о? Вот как мы требуем от webpack делать свою работу.

Поскольку webpack анализирует наш HTML, он встречает литералы шаблона и знает, что ему нужно что-то туда разместить. The require функция сообщает webpack что размещать туда – в нашем случае мы размещаем данные изображения (может еще не понятно, какие именно данные мы размещаем туда, но ждите, мы это сделаем). Итак, как webpack знает, что делать? Это автоматически?

Если вы никогда раньше не видели конфигурационный файл webpack, вы наверняка могли бы догадаться, просто взглянув на файл, что он очень не автоматический. Есть много параметров, некоторые из которых специфичны для webpack, а другие – специфические для определенного загрузчика или плагина. Итак, что такое a погрузчик все равно? Что такое a подключать?

Быстрые определения

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

  • Погрузчик: Его работа состоит в том, чтобы взять ваши файлы, трансформировать их определенным образом и предоставить вам результат этого преобразования. Полученный результат зависит от типа файла, с которым вы работаете, и возможностей загрузчика. Чтобы воспользоваться примером нашего сегодняшнего проекта, вы можете использовать загрузчик, чтобы взять файл изображения, превратить его в данные изображения, а затем вставить эти данные в ваш HTML.
  • Подключать: Его работа заключается в выполнении более общих задач, чем загрузчики. В то время как загрузчики применяют определенные преобразования в определенные типы файлов. Однако плагины могут выполнять такие задачи как сжатие файлов, сокращение текста и т.д. Чтобы использовать пример нашего проекта, вы можете использовать плагин для сжатия файлов изображений.

РЕКЛАМА

Обработка HTML

Давайте теперь рассмотрим, как мы используем загрузчики и плагины для обработки наших HTMLконкретно. Ниже приведены части нашего webpack.config.js что имеет отношение к HTML. Другие варианты, о которых мы впоследствии поговорим, опущены и заменены на // ....

Сначала втягиваем html-webpack-плагин и назначить его переменной с именем HtmlWebpackPlugin (креативно, верно?). Задачей этого плагина является создание HTML файл, который мы используем в распространении. Чтобы запустить плагин, мы используем new оператор для нашей переменной в plugins свойство нашего конфигурационного объекта. Объект конфигурации, о котором я имею в виду, предназначен module.exportsи это то, что «указывает» webpack, что делать.

html-webpack-плагин создаст достаточно общий шаблон HTMLбез параметров. Но заметьте, что мы установили его templateимущество, равное нашему источнику index.html файл. Как вы могли догадаться, это мы предписываем плагин использовать наш index.html как шаблон, когда он генерирует HTML файл для нас. Прекрасно, но спросите, зачем проходить через все эти проблемы?

Это потому, что мы хотим использовать загрузчики для трансформации нашего источника. HTML. Мы хотим это изменить:

в это:

Обратите внимание, что литералы шаблона и require функции были заменены. Теперь a.href атрибут содержит URL измененной версии нашего изображения, 300pxширокий. Кроме того, img.src теперь атрибут имеет встроенные данные изображения. Я показал трансформацию нашего HTML для одного <;a> элемент, но это то, что мы хотим all tэлементы чтобы они выглядели.

Давайте посмотрим, как мы используем загрузчики для выполнения этой трансформации. Увеличим блок кода из нашего webpack.config.js что начинается с test: /\.html$/ пара ключ-значения.

{  test: /\.html$/,  use: {    loader: 'html-loader',    options: {     interpolate: true    }  }}

В этом блоке написано: «Привет, webpack, когда вы сталкиваетесь HTMLфайлы, пожалуйста, используйте html-загрузчик и убедитесь, что он настроен на разрешение интерполяции».

Другими словами, мы testдля расширения «.html». мы use html-загрузчик как loader для этого типа файла, а затем мы указываем in options которые мы хотели бы использовать interpolate особенность от html-загрузчик.

Если посмотреть на html-загрузчик документации, вы увидите это, когда interpolate установлено на trueвы можете вставить результат некоторого JavaScript(JS) прямо в нашем HTML. В нашем случае мы пользуемся этим, позвонив по телефону require функция, чтобы приказать webpack ввести изображение. Но как webpack знает, что делать с изображениями?

Обработка изображений

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

The плагин imagemin-webpack который мы используем, выполняет довольно простую работу – он просто сжимает наши изображения. Вы можете прочитать больше об этом, но больший интерес вызывает загрузчик, который мы используем для трансформации наших изображений. Посмотрите на блок кода, который начинается с test: /\.(png|jpg|gif)$/ пара ключ-значения.

В этом блоке написано: «Привет, webpack, когда вы сталкиваетесь с файлами изображений, используйте адаптивный загрузчик. Создайте версию изображения с измененным размером по адресу300pxширокий. А пока вы это делаете, создайте данные для изображения-заполнителя 50px широкий”.

Другими словами, мы test для расширений «.png», «.jpg» или «.gif». мы useадаптивный загрузчик как loader для этих типов файлов. Затем указываем в options которые мы хотели бы использовать resize, placeholderи name особенности адаптивный загрузчик трансформировать наши образы.

Давайте разберемся подробно, что адаптивный загрузчик делает для нас эти параметры. Когда мы говорим:

require('./imgs/cloud-strife.jpg');

Затем адаптивный загрузчик возвращает нам это:

Это просто a JS объект. И потому, когда можно использовать .src и .placeholder получить доступ к тому, что нам нужно из нашего require утверждение, чтобы когда мы это делаем:

&lt;img src="     class="hero-preview"      alt="cloud-strife">

webpack дает нам это:

<!--image data truncated for brevity-->;<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/          2wCEAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhw          XExQaFRERGCEYGh0dHx8fExciJCIeJBweHx4BBQUFBwYHDggIDh4U          ERQeHh4eHh4e..."     class="hero-preview"     alt="cloud strife">

РЕКЛАМА

Краткий итог

Прекрасно, поэтому мы имеем рабочий процесс для обработки наших HTML и наши изображения. Чтобы подытожить:

для HTMLмы используем html-webpack-плагин генерировать HTML файл с использованием нашего источника index.html как шаблон. Мы используем html-загрузчик обработать наш HTML и, в частности, разрешить интерполяцию. Интерполяция позволяет нам использовать require заявления в нашей HTML чтобы мы могли попросить webpack загружать изображение определенным образом.

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

Когда наш код трансформируется с помощью этих загрузчиков, пути изображения и данные изображения встраиваются в наш HTML. приятно!

Выходные каскадные таблицы стилей (CSS) и JavaScript (JS)

Давайте проверим оставшийся исходный код. Просмотрите комментарии к коду, чтобы узнать, как мы используем JS и CSS чтобы погаснуть полное изображение после загрузки, а затем удалить изображение-заполнитель.

РЕКЛАМА

CSS:

JS:

Загрузка CSS и JS

Ниже приведено наше index.js выглядит как. В этом файле мы рекомендуем webpack добавить все модули, которые мы хотим использовать, а затем использовать их. А модуль проще говоря, это просто фрагмент кода из другого файла, который мы хотим импортировать и использовать.

Внутри a JS файл, мы можем использовать ES2015 import синтаксис вместо requireвносить модули. Например, заметьте, что import loadFullImages from './loadImages' делает то же, что const loadFullImages = require('./loadImages).

В нашем случае мы имеем всего два модуля. Обратите внимание, что модули в webpack не ограничены JS – можем лечить CSS файлы также в качестве модулей, если мы используем правильные загрузчики. Это мощно, но поначалу может запутать. Однажды я покажу вам, как webpack загружает наш CSS файл, однако вы увидите, что все, что мы делаем, это минимизируем источник CSS и создание a main.css файл:

В приведенном выше блоке параметров обратите внимание, что мы можем указать несколько загрузчиков в use свойство, передав массив объектов загрузчику. Затем файл обрабатывается каждым из загрузчиков, начиная с последнего загрузчика в массиве и заканчивая первым.

Этот блок по существу говорит: «Привет, webpack, когда вы сталкиваетесьCSSфайлы, пожалуйста, используйте css-загрузчик внести в CSS и минимизируйте его. Затем используйте экстракт-загрузчик чтобы отделить его от нашего JS (подробнее об этом). Затем используйте файл-загрузчик чтобы создать для нас файл с названием и расширением исходного исходного файла (в нашем случае это называется «main.css»).

Вот как мы сообщаем webpack скачать наш JS:

В основном этот блок говорит: «Привет, webpack, когда вы сталкиваетесь JS файлы, пожалуйста, используйте babel-loader и его окружение пресет для компиляции нашего JS. Бабель берет наш источник JS написан в синтаксисе ES2015+ и компилирует его к удобному для браузера ES5. The modules: false опция говорит Babel не беспокоиться о преобразовании нашего import синтаксис. Webpack это уже делает.

Сборник

Если вы хотите увидеть, как webpack генерирует файлы дистрибутива, установите Node.js, поставляемый с npm, если у вас его еще не установлено. Откройте консоль командной строки и cd в каталоге проекта. Если вы используете Windows и необходима дружеская оболочка *NIX, используйте Windows Powershell, а не командную строку по умолчанию.

Когда вы находитесь в каталоге проекта, запустите npm install команду для установки всех пакетов, о которых мы говорили в данном руководстве. Затем запустите npm start команда для выполнения сборника. Ниже приведена последняя часть конфигурации webpack, которую нам еще предстоит просмотреть. Вот как webpack знает, куда отправлять файлы распространения:

path является служебным модулем. Это позволяет нам легко создавать пути к файлам и каталогам, соответствующим платформе. Они будут работать независимо от того, использует ли файловая система вашей платформы «/» или «\» в качестве разделителей пути. Здесь мы используем path.join функция, чтобы сообщить webpack, где найти и отправить наши файлы.

entry сообщает webpack, какой модуль является «основным» модулем, в который мы импортируем все остальные модули, от которых мы зависим. app это имя, которое мы дали основному набору, который будет создавать webpack путем соединения всех наших модулей.

наконец, output.path сообщает webpack, куда отправлять все файлы, которые он создает для нас. The output.filename сообщает webpack, какую схему именования использовать для создаваемых пакетов. В нашем случае мы просто создаем один пакет и он выйдет под названием “app.bundle.js”.

РЕКЛАМА

Вывод

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

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

Если статья была полезна, напишите ее в Twitter.

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

Ваш адрес email не будет опубликован.