В наши дни это довольно стандартная практика, когда при создании веб-сайта используется какой-то процесс сборки, помогающий выполнять задачи разработки и подготавливать ваши файлы для реальной среды.
Для этого вы можете использовать Grunt или Gulp , создав цепочку преобразований, которые позволят вам перебросить код с одной стороны и получить несколько минимизированных CSS и JavaScript с другой.
Эти инструменты чрезвычайно популярны и очень полезны. Есть, однако, другой способ сделать что-то, и это использовать Webpack .
Что такое Webpack?
Webpack — это то, что известно как «модуль связывания». Он берет модули JavaScript, понимает их зависимости, а затем объединяет их вместе наиболее эффективным способом, выпуская один файл JS в конце. Ничего особенного, верно? Такие вещи, как RequireJS делают это годами.
Ну, вот поворот. В Webpack модули не ограничиваются файлами JavaScript. Используя Loaders, Webpack понимает, что для модуля JavaScript может потребоваться файл CSS, а для файла CSS может потребоваться изображение. Выведенные активы будут содержать только то, что нужно с минимальной суетой. Давайте настроим так, чтобы мы могли видеть это в действии.
Установка
Как и в случае большинства инструментов разработки, для продолжения вам понадобится установить Node.js. Предполагая, что вы правильно настроили это, все, что вам нужно сделать, чтобы установить Webpack, это просто набрать следующее в командной строке.
|
1
|
npm install webpack -g
|
Это установит Webpack и позволит вам запустить его из любой точки вашей системы. Затем создайте новый каталог и внутри создайте основной файл HTML, например, так:
|
01
02
03
04
05
06
07
08
09
10
11
|
<!doctype html>
<html>
<head>
<meta charset=»utf-8″>
<title>Webpack fun</title>
</head>
<body>
<h2></h2>
<script src=»bundle.js»></script>
</body>
</html>
|
Важной частью здесь является ссылка на bundle.js , который Webpack сделает для нас. Также обратите внимание на элемент H2 — мы будем использовать это позже.
Затем создайте два файла в том же каталоге, что и ваш HTML-файл. Назовите первый main.js , который, как вы можете себе представить, является основной точкой входа для нашего скрипта. Затем назовите второй say-hello.js . Это будет простой модуль, который принимает имя человека и элемент DOM и вставляет приветственное сообщение в указанный элемент.
|
1
2
3
4
5
|
// say-hello.js
module.exports = function (name, element) {
element.textContent = ‘Hello ‘ + name + ‘!’;
};
|
Теперь, когда у нас есть простой модуль, мы можем потребовать это и вызвать его из main.js Это так же просто, как сделать:
|
1
2
3
|
var sayHello = require(‘./say-hello’);
sayHello(‘Guybrush’, document.querySelector(‘h2’));
|
Теперь, если бы мы открыли наш HTML-файл, это сообщение, очевидно, не было бы показано, поскольку мы не включили main.js не скомпилировали зависимости для браузера. Что нам нужно сделать, так это заставить Webpack посмотреть на main.js и посмотреть, есть ли в нем зависимости. Если это так, он должен скомпилировать их вместе и создать файл bundle.js, который мы можем использовать в браузере.
Вернитесь к терминалу, чтобы запустить Webpack. Просто введите:
|
1
|
webpack main.js bundle.js
|
Первый указанный файл — это входной файл, в котором мы хотим, чтобы Webpack начал поиск зависимостей. Он сработает, если для каких-либо необходимых файлов потребуются какие-либо другие файлы, и будет делать это до тех пор, пока не будут обработаны все необходимые зависимости. После этого он выводит зависимости в виде единого объединенного файла в bundle.js . Если вы нажмете кнопку возврата, вы должны увидеть что-то вроде этого:
|
1
2
3
4
5
6
7
|
Hash: 3d7d7339a68244b03c68
Version: webpack 1.12.12
Time: 55ms
Asset Size Chunks Chunk Names
bundle.js 1.65 kB 0 [emitted] main
[0] ./main.js 90 bytes {0} [built]
[1] ./say-hello.js 94 bytes {0} [built]
|
Теперь откройте index.html в вашем браузере, чтобы увидеть на вашей странице привет.
конфигурация
Не очень интересно указывать наши входные и выходные файлы каждый раз, когда мы запускаем Webpack. К счастью, Webpack позволяет нам использовать файл конфигурации, чтобы избавить нас от хлопот. Создайте файл с именем webpack.config.js в корневом каталоге вашего проекта со следующим содержимым:
|
1
2
3
4
5
6
|
module.exports = {
entry: ‘./main.js’,
output: {
filename: ‘bundle.js’
}
};
|
Теперь мы можем просто набрать webpack и ничего больше, чтобы достичь тех же результатов.
Сервер разработки
Что это? Вы даже не можете печатать webpack каждый раз, когда меняете файл? Я не знаю, сегодняшнее поколение и т. Д. И т. Д. Хорошо, давайте настроим небольшой сервер разработки, чтобы сделать вещи еще более эффективными. На терминале напишите:
|
1
|
npm install webpack-dev-server -g
|
Затем запустите команду webpack-dev-server . Это запустит простой веб-сервер, использующий текущий каталог в качестве места для обслуживания файлов. Откройте новое окно браузера и перейдите по адресу http: // localhost: 8080 / webpack-dev-server / . Если все хорошо, вы увидите что-то вроде этого:
Теперь у нас есть не только симпатичный маленький веб-сервер, но и тот, который следит за изменениями в нашем коде. Если он увидит, что мы изменили файл, он автоматически запустит команду webpack, чтобы связать наш код и обновить страницу, не делая ничего. Все с нулевой конфигурацией.
Попробуйте, измените имя, переданное функции sayHello , и переключитесь обратно в браузер, чтобы увидеть, что ваши изменения применяются немедленно.
Погрузчики
Одна из важнейших функций Webpack — это Loaders . Загрузчики аналогичны «задачам» в Grunt и Gulp. По сути, они берут файлы и каким-то образом преобразуют их, прежде чем они будут включены в наш связанный код.
Скажем, мы хотели использовать некоторые тонкости ES2015 в нашем коде. ES2015 — это новая версия JavaScript, которая поддерживается не во всех браузерах, поэтому нам нужно использовать загрузчик для преобразования нашего кода ES2015 в простой старый код ES5, который поддерживается. Для этого мы используем популярный загрузчик Babel, который, согласно инструкциям, устанавливаем так:
|
1
|
npm install babel-loader babel-core babel-preset-es2015 —save-dev
|
Это устанавливает не только сам загрузчик, но и его зависимости и предустановку ES2015, поскольку Babel необходимо знать, какой тип JavaScript он конвертирует.
Теперь, когда загрузчик установлен, нам просто нужно сказать Бабелю, чтобы он использовался. Обновите webpack.config.js чтобы он выглядел так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
module.exports = {
entry: ‘./main.js’,
output: {
filename: ‘bundle.js’
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: ‘babel’,
query: {
presets: [‘es2015’]
}
}
],
}
};
|
Здесь следует отметить несколько важных вещей. Первым является test: /\.js$/ , который является регулярным выражением, говорящим нам применить этот загрузчик ко всем файлам с расширением .js . Аналогичным образом exclude: /node_modules/ указывает Webpack игнорировать каталог node_modules . loader и query довольно понятны — используйте загрузчик Babel с предустановкой ES2015.
Перезагрузите веб-сервер, нажав ctrl+c и webpack-dev-server запустив webpack-dev-server . Все, что нам нужно сделать сейчас, это использовать некоторый код ES6 для проверки преобразования. Как насчет того, чтобы изменить переменную sayHello на постоянную?
|
1
|
const sayHello = require(‘./say-hello’)
|
После сохранения Webpack должен автоматически перекомпилировать ваш код и обновить ваш браузер. Надеюсь, вы не увидите никаких изменений. bundle.js в bundle.js и посмотрите, сможете ли вы найти ключевое слово const . Если Webpack и Babel выполнили свою работу, вы нигде этого не увидите — просто старый JavaScript.
На части 2
Во второй части этого руководства мы рассмотрим использование Webpack для добавления CSS и изображений на вашу страницу, а также подготовку вашего сайта к развертыванию.