В предыдущем уроке мы узнали, как настроить проект Webpack и как использовать загрузчики для обработки нашего JavaScript. Тем не менее, Webpack действительно хорош в своей способности связывать другие типы статических ресурсов, таких как CSS и изображения, и включать их в наш проект, только когда они необходимы. Давайте начнем с добавления некоторых стилей на нашу страницу.
Загрузчики стиля
Сначала создайте обычный CSS-файл в каталоге стилей. Вызовите main.css и добавьте правило стиля для элемента заголовка.
|
1
2
3
4
|
h2 {
background: blue;
color: yellow;
}
|
Итак, как мы можем получить эту таблицу стилей на нашей странице? Ну, как и большинство вещей с Webpack, нам понадобится еще один загрузчик. На самом деле два: css-loader и style-loader . Первый читает все стили из наших CSS-файлов, в то время как другие вводят указанные стили в нашу HTML-страницу. Установите их так:
|
1
|
npm install style-loader css-loader
|
Далее мы расскажем Webpack, как их использовать. В webpack.config.js нам нужно добавить еще один объект в массив загрузчиков. В нем мы хотим добавить тест для соответствия только CSS-файлам, а также указать, какие загрузчики использовать.
|
1
2
3
4
5
|
{
test: /\.css$/,
exclude: /node_modules/,
loader: ‘style!css’
}
|
Интересной частью этого фрагмента кода является строка 'style!css' . Загрузчики читаются справа налево, поэтому Webpack должен сначала прочитать стили любого файла, заканчивающегося на .css , а затем вставить эти стили на нашу страницу.
Поскольку мы обновили наш файл конфигурации, нам нужно будет перезапустить сервер разработки, чтобы наши изменения были приняты. Используйте ctrl+c чтобы остановить сервер, и webpack-dev-server чтобы запустить его снова.
Все, что нам нужно сделать сейчас, — это запросить нашу таблицу стилей из нашего файла main.js Мы делаем это так же, как и любой другой модуль JavaScript:
|
1
2
3
4
5
|
const sayHello = require(‘./say-hello’);
require(‘./styles/main.css’);
sayHello(‘Guybrush’, document.querySelector(‘h2’));
|
Обратите внимание, что мы даже не коснулись index.html . Откройте браузер, чтобы увидеть страницу со стилем h2 . Измените цвет заголовка в вашей таблице стилей, чтобы он сразу обновлялся без обновления. Прекрасный.
Вы должны Sass It
«Но никто не использует CSS в наши дни, дедушка! Все дело в Sass ». Конечно, это. К счастью, в Webpack есть загрузчик, который делает именно это . Установите его вместе с версией Sass для узла, используя:
|
1
|
npm install sass-loader node-sass
|
Затем обновите webpack.config.js :
|
1
2
3
4
5
|
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ‘style!css!sass’
}
|
Теперь это говорит о том, что для любого файла, заканчивающегося на .scss , преобразуйте Sass в обычный CSS, прочитайте стили из CSS, а затем вставьте стили на страницу. Не забудьте переименовать main.css в main.scss и вместо этого потребовать новый файл. Сначала немного Sass:
|
1
2
3
4
5
6
|
$background: blue;
h2 {
background: $background;
color: yellow;
}
|
Тогда main.js:
|
1
|
require(‘./styles/main.scss’);
|
Супер. Это так просто. Нет преобразования и сохранения файлов, или даже просмотра папок. Мы просто требуем в наших стилях Sass напрямую.
Картинки
«Значит, я уверен, что изображения, загрузчики тоже?» Конечно! С изображениями мы хотим использовать url-загрузчик . Этот загрузчик берет относительный URL вашего изображения и обновляет путь, чтобы он правильно включался в ваш пакет файлов. По обыкновению:
|
1
|
npm install url-loader
|
Теперь давайте попробуем что-то другое в нашем webpack.config.js . Добавьте еще одну запись в массив loaders обычным способом, но на этот раз мы хотим, чтобы регулярное выражение совпадало с изображениями с разными расширениями файлов:
|
1
2
3
4
5
|
{
test: /\.(jpg|png|gif)$/,
include: /images/,
loader: ‘url’
}
|
Обратите внимание на другое отличие здесь. Мы не используем ключ exclude . Вместо этого мы используем include . Это более эффективно, так как говорит веб-пакету игнорировать все, что не соответствует папке, называемой «изображения».
Обычно вы будете использовать какую-то систему шаблонов для создания ваших HTML-представлений, но мы будем придерживаться базового подхода и создавать тег изображения в JavaScript по старинке. Сначала создайте элемент изображения, установите для требуемого изображения атрибут src, а затем добавьте элемент на страницу.
|
1
2
3
4
5
|
var imgElement = document.createElement(‘img’);
imgElement.src = require(‘./images/my-image.jpg’);
document.body.appendChild(imgElement);
|
Вернитесь в браузер, чтобы увидеть ваше изображение на ваших глазах!
Preloaders
Другая задача, обычно выполняемая во время разработки, — это линтинг. Linting — это способ обнаружения потенциальных ошибок в вашем коде, а также проверка того, что вы выполнили определенные соглашения по кодированию. Вещи, которые вы, возможно, захотите найти: «Использовал ли я переменную, не объявив ее сначала?» или «Я забыл точку с запятой в конце строки?» Применяя эти правила, мы можем на ранних этапах отсеивать глупые ошибки.
Популярным инструментом для линтинга является JSHint . Это смотрит на наш код и выделяет возможные ошибки, которые мы сделали. JSHint можно запустить вручную из командной строки, но это быстро становится рутиной во время разработки. В идеале мы бы хотели, чтобы он запускался автоматически каждый раз, когда мы сохраняем файл. Наш сервер Webpack уже следит за изменениями, так что да, вы уже догадались — еще один загрузчик.
Установите jshint-загрузчик обычным способом:
|
1
|
npm install jshint-loader
|
Опять же, мы должны сказать Webpack использовать его, добавив его в наш webpack.config.js . Однако этот загрузчик немного другой. Это на самом деле не трансформирует какой-либо код — это просто выглядит. Мы также не хотим, чтобы все наши более тяжелые загрузчики, модифицирующие код, запускались и выходили из строя только потому, что мы забыли точку с запятой. Вот где входят предварительные загрузчики. Предварительный загрузчик — это любой загрузчик, который мы указываем для запуска перед нашими основными задачами. Они добавляются в наш webpack.conf.js аналогично загрузчикам.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
module: {
preLoaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: ‘jshint’
}
],
loaders: [
…
]
}
|
Теперь наш процесс линтинга запускается и сразу завершается неудачей, если обнаружена проблема. Прежде чем мы перезапустим наш веб-сервер, нам нужно сообщить JSHint, что мы используем ES6, иначе произойдет сбой, когда он увидит ключевое слово const мы используем.
После ключа модуля в нашей конфигурации добавьте еще одну запись с именем «jshint» и строку для указания версии JavaScript.
|
01
02
03
04
05
06
07
08
09
10
11
|
module: {
preLoaders: [
…
],
loaders: [
…
]
},
jshint: {
esversion: 6
}
|
Сохраните файл и перезапустите webpack-dev-server . Работает нормально? Отлично. Это означает, что ваш код не содержит ошибок. Давайте представим один, удалив точку с запятой из этой строки:
|
1
|
var imgElement = document.createElement(‘img’)
|
Снова сохраните файл и посмотрите на терминал. Теперь мы получаем это:
|
1
2
3
|
WARNING in ./main.js
jshint results in errors
Missing semicolon.
|
Спасибо, JSHint!
Готовимся к производству
Теперь, когда мы счастливы, что наш код в форме и он делает все, что мы хотим, нам нужно подготовить его к реальному миру. Одной из наиболее распространенных вещей, которые нужно сделать при запуске своего кода, является его минимизация, объединение всех ваших файлов в один и последующее сжатие этого файла в наименьший возможный файл. Прежде чем мы продолжим, взгляните на ваш текущий bundle.js . Он читабелен, имеет много пробелов и имеет размер 32 КБ.
«Подожди! Не говори мне. Еще один грузчик, верно?» Нет! В этом редком случае нам не нужен загрузчик. В Webpack встроена минификация. Когда вы довольны своим кодом, просто запустите эту команду:
|
1
|
webpack -p
|
Флаг -p указывает Webpack подготовить наш код к работе. Поскольку он генерирует пакет, он оптимизирует столько, сколько может. После выполнения этой команды откройте bundle.js и вы увидите, что все это было сжато вместе, и даже при таком небольшом объеме кода мы сохранили 10 КБ.
Резюме
Я надеюсь, что этот учебник, состоящий из двух частей, дал вам достаточно уверенности, чтобы использовать Webpack в ваших собственных проектах. Помните, что если вы хотите что-то сделать в процессе сборки, то, скорее всего, в Webpack есть загрузчик. Все загрузчики устанавливаются через npm , так что посмотрите, кто-то уже сделал то, что вам нужно.
Веселиться!