Как подключить css в webpack
Как я разбирался с Webpack. Настройка на примере SCSS.
Как ни странно, детально разобраться с вебпаком я захотел именно для того, чтобы использовать в своих проектах CSS-пропроцессоры. Даже когда появился Gutenberg, я в это решил не вникать и создавал блоки для него на чистом JS 😁
В этом уроке постараюсь рассказать всё пошагово и очень легко, для тех, кто никогда не работал ни с чем из этого, но очень хочет. Начнём с настройки Node.js, потом перейдём к установке Webpack, и только потом уже установим необходимые для работы с SCSS препроцессором модули, также настроим минификацию.
Как я уже сказал, не очень много с этим работаю, поэтому жду ваших уточнений в комментариях (если будут).
1. Node.js
1.1 Установка
Всё начинается очень легко – нужно перейти на сайт nodejs.org и скачать её как обычную прогу.
1.2 Инициализируем проект
2. Установка Webpack
2.1 Установка
Тут возможно кто-то захочет использовать, либо уже использует Gulp, насколько я понимаю, большой разницы там нет, но я решил использовать webpack, потому что когда мы находим кастомные блоки для Gutenberg, они все на webpack.
После выполнения команды запустится установка, после установки произойдёт вот что:
После установки также откройте файл package.json и добавьте в параметр scripts следующее:
2.2 Конфигурация webpack.config.js
Ещё один конфигурационный файл, который нам понадобиться создать самим. Начнём с такого шаблона в содержимом файла.
В принципе можете создать все необходимые директории и файлы, а также index.php (у нас же тема WordPress) и подключить в неё файл scripts.js
2.3 Проверяем, что на этом этапе webpack работает
Затем в файле index.js я их подключаю следующим образом:
Если проводить параллель с темой или плагином WordPress, то я бы использовал сборку непосредственно для той части кода, в которой я планирую работать с Gutenberg, React. Собирать лёгкий jQuery-код для самого сайта нет смысла. Про настройку JSX я наверное ещё напишу отдельно.
3. SCSS
3.1 Как это будет
Сначала давайте немного наглядности, чтобы вам было понятно. Точно так же, как и с JS файлами, давайте проделаем следующее:
Конечно сборку сейчас запускать не надо, у вас ничего не будет работать, я ведь хотел показать вам лишь общую картину.
Про синтаксис SASS особо никаких ссылок приводить не буду, потому что там всё очень легко и вы сможете загуглить. Ну хорошо, хорошо, мне нравится эта дока.
3.1 Установка
3.2 Настройка webpack.config.js
3.3 Минификация CSS
В итоге файл webpack.config.js будет выглядеть так:
Sharing is caring
Понравилось это:
Похожее
Путешествует по миру и рассказывает всем о WordPress лично, у себя в блогах и на курсах в Санкт-Петербурге. Умеет просто объяснять сложные вещи, делает это красиво. Организовывает неплохие WordCamp’s, но совсем не умеет слушать чужие доклады.
# 3 Сборщик модулей webpack. Разбираемся с css. Часть 3.
Для начала, давайте установим плагины
Этот плагин нам понадобится для того, чтобы webpack мог валидно работать с css. Второй плагин, который нам понадобится это css-loader
Эти два пакета нам нужны для того, чтоб webpack мог загрузить и распарсить css файлы.
Теперь нам необходимо добавить еще один loader в наш конфиг
Теперь, давайте создадим файл main.css и запишем какие-то стили, например, в body
И, теперь подключим его в наш main.js
Теперь, если пропишем в консоли
и посмотрим в браузер, то увидим что наш стиль применился и страница стала серой.
Теперь давайте создадим отдельный css файл. Для этого нам нужно сделать несколько вещей. Во-первых, нам нужно поставить плагин
Данный плагин нам необходим для того, чтобы мы весь наш css смогли поместить в один файл bundle.css.
Теперь в файле конфига в самом верху пропишем
Теперь, заменим один из лоадеров, который мы описали ранее для файлов css на loader: ExtractTextPlugin.extract() и в качестве параметров передадим style-loader и css-loader
Запускаем в консоли
и будете менять какой-то файл, например, внесем изменения в main.css
то мы увидим в консоли, что оба файла сразу же перекомпилировались. И, если мы посмотрим в браузер сейчас, то увидим, что стили у нас не применились, так как не подключен css файл в index.html. Давайте его подключим
В этом уроке мы продолжаем знакомиться с webpack 2. А именно с подключением стилей и работе с ними.
Style-loader нужен нам для инджекта стилей в head, а css-loader, для того, чтобы мы могли импортировать css в js.
Теперь добавим в наш webpack.config.js новое правило для css файлов
Обратите внимание, что в webpack 2 можно задавать несколько лоадеров в виде массива, что очень удобно. В webpack 1 мы разделяли их восклицательным знаком.
Давайте добавим папку css и файл app.css внутри
И импортируем наш css в app.js
Это позволяет нам строить такие же цепочки подключений css к проекту как и js.
По умолчанию, весь импортированный css попадает в глобальный скоуп в head. Давайте к p добавим класс container.
Теперь мы видим, что у нас контейнер подсветился зеленым.
Но это не самое лучшее решение, так как все стили у нас попадают в глобальный скоуп. А у глобальных стилей много проблем. Например их можно случайно перекрыть из любого другого места. Чтобы этого избежать мы можем писать локальные классы. Давайте попробуем
Как мы видим, для описания мы используем специальный синтаксис :local.
Теперь давайте изменим наш импорт на
И законсолим css. Как мы видим, это обьект, внутри которого есть уникальный ключ нашего класса, который сгенерировался специально для этого модуля. Давайте добавим новый елемент к странице используя этот класс
Если мы посмотрим в браузер, то у нас создался новый елемент с уникальный классом и к нему применились стили. Это значит, что если мы импортируем класс container в другом модуле, то он не перекроется. Это делает наш css более модульным.
Также мы можем делать композицию классов.
Например создадим локальный класс и используем его в другом локальном классе
Мы используем специальный синтаксис composes, для подмешивания стилей в другой класс.
Если мы посмотрим в браузер, то у нас вывелся класс в синим бекграудом и зеленым цветом. Таким образом работать с стилями получает проще, так как легко можно подмешивать любой класс друг в друга. Также в composes можно подмешивать классы из других файлов.
Теперь весь наш css добавляется в head. Но конечно, для продакшена это не вариант. Мы хотим собрать весь наш css в отдельный bundle файл, который мы будем подключать отдельно, а не вставлять в head.
Давайт установим пакет extract-text-webpack-plugin
И изменим наши правила работы с css
И добавим новый плагин
Если мы перезапустим webpack, то увидим, что все стили собираются в отдельный style.css в папке dist. Bundle стилей отдельно от javascript, больше подходит для продакшена в плане производительности, если стилей много, поэтому стоит использовать его.
И теперь мы можем подключить стили как обычный css файл
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.
Webpack: руководство для начинающих
Доброго времени суток, друзья!
Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.
Перед изучением новой технологии задайте себе два вопроса:
Зачем нужен вебпак?
Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».
Какие проблемы решает вебпак?
Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.
Это не только утомительно, но и подвержено ошибкам. Важно не только не забыть про какой-нибудь скрипт, но и расположить их в правильном порядке. Если загрузить скрипт, зависящий от React, до загрузки самого React, приложение сломается. Вебпак решает эти задачи. Не нужно беспокоиться о последовательном включении всех скриптов.
Как мы скоро узнаем, сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.
Установка вебпака
webpack.config.js
Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:
Точка входа
Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является index.js. Это может выглядеть так:
Если мы сообщим вебпаку путь до этого файла, он использует его для создания графа зависимостей приложения. Для этого необходимо добавить свойство entry в настройки вебпака со значением пути к главному файлу:
Преобразования с помощью лоадеров (loaders)
После добавления точки входа, нужно сообщить вебпаку о преобразованиях, которые необходимо выполнить перед генерацией бандла. Для этого используются лоадеры.
По умолчанию при создании графика зависимостей на основе операторов import / require() вебпак способен обрабатывать только JavaScript и JSON-файлы.
Едва ли в своем приложении вы решитесь ограничиться JS и JSON-файлами, скорее всего, вам также потребуются стили, SVG, изображения и т.д. Вот где нужны лоадеры. Основной задачей лоадеров, как следует из их названия, является предоставление вебпаку возможности работать не только с JS и JSON-файлами.
Первым делом нужно установить лоадер. Поскольку мы хотим загружать SVG, с помощью npm устанавливаем svg-loader.
Далее добавляем его в настройки вебпака. Все лоадеры включаются в массив объектов module.rules :
Существуют лоадеры почти для любого типа файлов.
Точка выхода
Теперь вебпак знает о точке входа и лоадерах. Следующим шагом является указание директории для бандла. Для этого нужно добавить свойство output в настройки вебпака.
Весь процесс выглядит примерно так:
Плагины (plugins)
Мы рассмотрели, как использовать лоадеры для обработки отдельных файлов перед или в процессе генерации бандла. В отличие от лоадеров, плагины позволяют выполнять задачи после сборки бандла. Эти задачи могут касаться как самого бандла, так и другого кода. Вы можете думать о плагинах как о более мощных, менее ограниченных лоадерах.
Давайте рассмотрим пример.
HtmlWebpackPlugin
HtmlWebpackPlugin создает index.html в директории с бандлом и автоматически добавляет в него ссылку на бандл.
Как нам использовать этот плагин? Как обычно, сначала его нужно установить.
EnvironmentPlugin
HtmlWebpackPlugin и EnvironmentPlugin — это лишь небольшая часть системы плагинов вебпака.
Режим (mode)
Существуют специальные плагины для решения указанных задачи, но есть более легкий способ. В настройках вебпака можно установить mode в значение development или production в зависимости от среды разработки.
Запуск вебпака
На данный момент мы знаем, как работает вебпак и как его настраивать, осталось его запустить.
Режимы разработки и продакшна
В целом, мы закончили с вебпаком. Напоследок давайте рассмотрим, как переключаться между режимами.
При сборке для продакшна, мы хотим все оптимизировать, насколько это возможно. В случае с режимом разработки верно обратное.
npm run build будет собирать продакшн-бандл.
npm run start будет запускать сервер для разработки и следить за изменениями файлов.
Сервер для разработки
Теперь у нас имеется две команды: одна для запуска сервера для разработки, другая для сборки готового бандла.
Надеюсь, статья была вам полезной. Благодарю за внимание.
Простой статический сайт на Webpack 4
После прочтения ряда статей (например, этой) решил перейти на современный подход с использованием Node.js при написании простых сайтов с подхода «динозавров». Ниже представлен разбор примера сборки простого статического сайта с помощью Webpack 4. Статья написана, так как инструкции с решением моей задачи не нашел: пришлось собирать всё по кусочкам.
Постановка задачи
Сайт представляет собой простой набор HTML-страниц со своим CSS стилями и файлом JavaScript. Необходимо написать проект, который бы собирал наш сайт из исходников:
В собранном сайте не должны использоваться React, Vue.js.
При выборе технологий выбираются по возможности наиболее популярные на данный момент. По этой причине отказался и от Grunt и Gulp в пользу Webpack, хотя, если честно, синтаксис Gulp мне понравился больше своим однообразием.
Для примера будет сверстано несколько страничек на базе Bootstrap 4. Но это только для примера.
Предполагается, что Node.js установлен (в Windows просто скачивается установщик и устанавливается в стиле «далее, далее»), и вы умеете работать с командной строкой.
Update. Нужно получить набор готовых HTML страниц, которые можно залить на хостинг без дополнительных настроек (например, на GitHub Pages) или открыть локально на компьютере.
Структура проекта
Общая структура проекта представлена ниже:
Под favicon выделена целая папка, так как в современном web обычным одним ico файлом не обойтись. Но для примера используется только этот один файл.
Для работы с проектом использую Visual Studio Code, которым очень доволен. Особенно мне нравится, что командная строка встроена в программу и вызывается через Ctrl + `.
Собираем JavaScript
После создаем файл настроек webpack.config.js с таким содержимым:
Теперь можно приступить к написанию нашего index.js файла:
В качестве примера пользовательского кода js просто перекрасили цвет текста на синий.
Теперь можно перейти к сборке js файла. Для этого в файле package.json в разделе scripts пропишем следующие npm скрипты:
При запуске команды npm run build также произойдет сборка проекта, но уже итоговая (с оптимизацией, максимальной минимизацией файла), которую можно выкладывать на хостинг.
При запуске npm run watch запускается режим автоматического просмотра изменений файлов проекта с автоматическим допостроением измененных файлов. Да, чтобы в командной строке отключить этот режим (например, чтобы можно было написать другие команды) можно нажать Ctrl + C (как минимум в PowerShell).
При запуске npm run start запустится локальный сервер, который запустит html страницу и также будет отслеживать изменения в файлах. Но пока этой командой не пользуемся, так как сборку html страниц не добавили.
Сборка CSS файла
Обратите внимание на то, что стили Bootstrap подключаем не через его CSS файл, а через SСSS ( @import «node_modules/bootstrap/scss/bootstrap» @import «
Важно! На момент написания статьи плагин extract-text-webpack-plugin в стабильной версии не умеет работать с Webpack 4. Поэтому нужно устанавливать его beta версию через @next :
Надеюсь, что вскоре можно будет устанавливать все плагины по нормальному:
В webpack.config.js добавим следующие изменения:
Update. С последней проблемой можно справиться, как подсказал Odrin, с помощью пакета resolve-url-loader и file-loader.
Поэтому установкой url=false говорим, что все ссылки на файлы в SCSS коде не трогаем, пути не меняем, никакие файлы не копируем и не встраиваем: с ними разберемся потом отдельно. Возможно, это решение плохое, и вы предложите более правильный подход.
Сборка HTML страниц
Перейдем к самому веселому: к сборке HTML страниц, где у меня возникли самые большие трудности.
В качестве шаблонизатора HTML будем использовать шаблонизатор по умолчанию lodash. Вот так будет выглядеть типичная HTML страница до сборки:
Важное уточнение. В статьях про сборку HTML страниц через html-webpack-plugin обычно подключают встраиваемые шаблоны просто через команду:
Но при этом в этих встраиваемых шаблонах синтаксис lodash работать не будет (я так и не понял, почему так происходит). И данные из переменной data туда не передадутся. Поэтому принудительно говорим webpack, что мы встраиваем именно шаблон, который надо обработать как lodash шаблон.
Теперь мы можем использовать полноценные lodash синтаксис в встраиваемых шаблонах. В коде файла header.html ниже через печатаем заголовок статьи.
В пакете html-webpack-plugin есть возможность генерировать несколько HTML страниц:
Для этого в файле webpack.config.js внесем следующие изменения:
И остается последний необязательный момент для работы с HTML. JavaScript файл и CSS файл у нас будут минимифицроваться. А вот HTML файлы хочу, наоборот, сделать красивыми и не минифицировать. Поэтому после сборки всех HTML файлов хочется пройтись по ним каким-то beautify плагином. И тут меня ждала подстава: не нашел способа как это сделать в Webpack. Проблема в том, что обработать файлы нужно после того, как будут вставлены встраиваемые шаблоны.
Нашел пакет html-cli, который может это сделать независимо от Webpack. Но у него 38 установок в месяц. То есть это означает два варианта: либо никому не нужно приводить к красивому внешнему виду HTML файлы, либо есть другое популярное решение, о котором я не знаю. А ради только одной этой функции Gulp прикручивать не хочется.
Устанавливаем этот плагин:
И в файле package.json прописываем еще два скрипта, которые после работы Webpack будут приводить к красивому внешнему виду HTML файлы с установкой табуляции в два пробела.
Поэтому для итоговой сборки рекомендую использовать не команду *npm run build, а команду npm run build-and-beautify.
Копирование оставшихся файлов
В файле webpack.config.js внесем изменения:
Всё. Теперь командой npm run build-and-beautify собираем проект и в папке dist появится собранный статический сайт.