В прошлой части статьи мы изучили, как установить Webpack и использовать Загрузчики для обработки JavaScript кода. Есть одна особенность Webpack, которая позволяет ему проявиться во всей красе – это возможность связывать различные типы статических ресурсов, например, CSS и изображения, а затем включать их в проект только там, где они необходимы.

Первую часть статьи вы можете найти по ссылке:
Введение в Webpack, часть 1

Продолжим изучение Webpack с добавления некоторых стилей на нашу страницу.

Загрузчики для стилей

Для начала создадим обычный CSS-файл в директории styles. Назовем его main.css и добавим в него стили для элемента заголовка:

h2 {
  background : blue;
  color      : yellow;
}

Итак, как же нам подключить созданную таблицу стилей на страницу с применением Webpack подхода? Как и в большинстве случаев работы с Webpack, нам понадобится ещё один Загрузчик. Если быть совсем точным, то два: css-loader и style-loader. Первый из них читает все стили из наших CSS-файлов, а второй вставляет прочитанные стили в нашу HTML-страницу. Установим их с помощью команды:

npm install --save-dev style-loader css-loader

Затем, мы объясним Webpack, как он должен их использовать. В файле конфигурации webpack.config.js нам необходимо добавить новый объект в массив Загрузчиков. В нём указываем, что будем обрабатывать только файлы с расширением .css, а также определяем какой именно Загрузчик использовать:

{
  test   : /\.css$/,
  exclude: /node_modules/,
  loader : 'style!css'
}

Самой интересной частью этого кода является строка loader: 'style!css'. Код для загрузчика читается справа налево и разделяется знаком !, таким образом, данный код означает, что Webpack сначала прочитает стили из всех файлов .css, а затем вставит эти стили в нашу страницу.

Так как мы обновили наш файл конфигурации, необходимо произвести перезапуск локального сервера, чтобы изменения вступили в силу. Для этого нажмем комбинацию клавиш Ctrl+C и введем команду запуска сервера webpack-dev-server.

Всё, что остаётся нам сделать – вызвать таблицу стилей из main.js файла. Это производится точно таким же способом, как вызов любого другого модуля JavaScript:

const sayHello = require( './say-hello' );

require( './styles/main.css' ); // подключаем файл стилей

sayHello( 'Иван Иванов', document.querySelector( 'h2' ) );

Заметьте, что при этом мы никаким образом не затронули index.html. Откройте ваш браузер, в котором должен быть отображен заголовок текста с применённым к нему стилем. Попробуйте изменить стили заголовка, и вы увидите, как они применяются практически мгновенно без перезагрузки страницы.

Использование Sass в Webpack

В современной разработке не обойтись без использования CSS-препроцессоров, например, Sass. Для Webpack уже есть готовый Загрузчик, с помощью которого можно обрабатывать Sass-стили. Установим необходимый Загрузчик Sass вместе с версией для Node:

npm install --save-dev sass-loader node-sass

Затем обновим конфигурацию webpack.config.js:

{
  test   : /\.scss$/,
  exclude: /node_modules/,
  loader : 'style!css!sass'
}

В данном коде мы указываем, что необходимо к каждому файлу с расширением .scss применить преобразование из Sass в чистый CSS, прочитать полученный CSS и вставить таблицу стилей в страницу.

Переименуем main.css в main.scss, который будет вызван из файла main.js. Добавим в него немного Sass кода:

$background : blue;

h2 {
  background : $background;
  color      : yellow;
}

Затем вызовем из main.js:

require( './styles/main.scss' );

Превосходно! Всё получилось легко и просто, без ручного преобразования, сохранения файлов и без установки наблюдателей для директорий. Мы просто подключили наши Sass-стили напрямую.

Обработка изображений с помощью Webpack

Возможно, у вас возникнет такой вопрос: - “Что, и для обработки изображений тоже нужен Загрузчик?”. Именно так! Для работы с изображениями мы будем использовать url-loader, который является ещё одним Загрузчиком для Webpack. Он берёт относительные URL ваших изображений и изменяет их таким образом, чтобы они корректно подключались в общем файле. Как обычно, установим Загрузчик командой:

npm install --save-dev file-loader url-loader

Теперь давайте попробуем сделать кое-что по-другому в нашем файле конфигурации webpack.config.js. Добавим новый объект в массив Загрузчиков обычным способом, но в этот раз используем регулярное выражение для ограничения применения Загрузчика только к указанным типам:

{
  test   : /\.(jpg|png|gif)$/,
  include: /images/,
  loader : 'url'
}

Обратите внимание и на другие отличия. Мы не используем опцию exclude. Вместо неё применяем include. В данном случае, это является более подходящим способом объяснить Webpack, чтобы он игнорировал всё, кроме директории images.

Возможно, для создания HTML вы бы использовали какой-нибудь шаблонизатор, но для целей данной статьи, будет уместным использовать старый добрый JavaScript. С его помощью, для начала, создадим элемент изображения, установим ему src атрибут и добавим созданный элемент на страницу.

Добавим в файл main.js:

var imgElement = document.createElement( 'img' );
imgElement.src = require( './images/my-image.png' );

document.body.appendChild( imgElement );

Откройте браузер, и вы увидите, как на странице появилось изображение. Но не стоит злоупотреблять данной возможностью, т.к. в таком случае все изображения будут включены в сборку bundle.js, что повлечёт за собой значительное увеличение размера конечного файла. В рамках этой статьи, демонстрация возможности включения в сборку разных типов данных, преследует цель, прежде всего, знакомство с такой возможностью.

Предварительные загрузчики

Ещё одной популярной задачей при разработке является анализ кода на потенциальные ошибки, а также на соответствие определенным соглашениям создания программного кода. Например, при таких вопросах, как можно ли использовать переменную без её объявления? Или, можно ли обойтись без использования точки с запятой в конце каждой строки кода? Определив правила поведения в таких случаях, а затем анализируя код на соответствие этим правилам, мы можем отловить множество багов на ранней стадии создания приложения.

Популярным инструментом для этих целей является JSHint. Он занимается анализом кода и выявлением потенциальных ошибок, которые мы могли бы совершить. JSHint может быть запущен вручную из командной строки, но в процессе разработки это становится утомительным занятием. В идеале, мы бы хотели запускать его автоматически каждый раз при сохранении файла. Наш Webpack сервер уже наблюдает за изменениями, поэтому, не будет чем удивительным, если мы применим ещё один Загрузчик.

Установим jshint-loader обычным способом, командой:

npm install --save-dev jshint jshint-loader

И снова мы должны объяснить Webpack, как его использовать, добавив настройки в файл webpack.config.js. Тем не менее, данный Загрузчик немного отличается от других. Он не производит никаких преобразований кода, он только анализирует его. Кроме того, нам бы не хотелось, чтобы другие Загрузчики мешали анализу кода или выдавали ошибки из-за, например, забытой точки с запятой в конце строки. Именно в этот момент в игру вступают Предварительные загрузчики, которые, по сути, являются теми же Загрузчиками, только запускаются до выполнения основных задач. Они добавляются в файл webpack.config.js подобным образом, как и обычные Загрузчики:

module: {
  preLoaders: [
    {
      test   : /\.js$/,
      exclude: /node_modules/,
      loader : 'jshint'
    }
  ],
  loaders: [
     ...
  ]
}

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

После секции module в конфигурационном файле, добавим новое значение с именем jshint, и определим версию JavaScript:

module: {
  preLoaders: [
    ...
  ],
  loaders: [
    ...
  ]
},
jshint: {
  esversion: 6
}

Сохраним изменения и перезапустим сервер командой webpack-dev-server. Если в консоли не появилось никаких предупреждений, то ваш код успешно прошел проверку. Давайте намеренно создадим как-бы ошибку, удалив точку с запятой из этой строки кода:

imgElement.src = require( './images/my-image.png' )

Снова сохраним файл и посмотрим в консоль. У нас должно появиться, примерно, такое предупреждение:

Спасибо, JSHint!

Подготавливаем приложение к боевому серверу

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

Удалим из файла main.js подключение изображения my-image.png. И до того, как мы продолжим, обратите внимание на текущий размер файла bundle.js. Он хорошо читаемый, содержит множество пробелов, но имеет размер в 12 КБ.

- “Постойте, не говорите! Ещё один Загрузчик, верно?” Нет. Это один из тех редких случаев, когда нам не понадобится Загрузчик. Webpack уже имеет в себе встроенный инструмент для минификации. После того, как вы полностью довольны своим кодом, просто выполните команду:

webpack -p

Флаг -p говорит Webpack, что наш код нужно подготовить для выпуска в реальный мир. После того, как он создаст единый файл со всеми ресурсами нашего приложения, он сожмет код этого файла наиболее эффективным образом. После выполнения команды, откройте файл bundle.js и вы сможете увидеть, что весь код был минифицирован и конечный размер файл стал в 4 КБ.

Подводя итог

Надеюсь, что в сумме, эти две статьи дали вам достаточно знаний и уверенности для использования Webpack в своих проектах. Помните, если вы хотите что-то сделать в процессе сборки вашего проекта, то, скорей всего, для этого уже создан соответствующий Загрузчик. Все Загрузчики устанавливаются через npm, при необходимости, начните его поиск в репозиториях этого пакетного менеджера.

Исходные коды проекта доступны по ссылке: https://github.com/sbogdanov108/webpack_guide

Первую часть статьи вы можете найти по ссылке:
Введение в Webpack, часть 1