Введение в Webpack: часть 1

Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)

Это довольно стандартная практика в эти дни, когда вы создаете сайт, чтобы иметь какой-то процесс сборки, чтобы помочь в выполнении задач разработки и подготовить файлы для реальной среды.

Для этого вы можете использовать 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-файл следующим образом:

<!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, и вставляет приветственное сообщение в указанный элемент.

// say-hello.js

module.exports = function (name, element) {
    element.textContent = 'Hello ' + name + '!';
};

Теперь, когда у нас есть простой модуль, мы можем потребовать его и вызвать его из main.js. Это очень просто:

1	var sayHello = require('./say-hello');
2
3	sayHello('Guybrush', document.querySelector('h2'));

Теперь, если мы откроем наш HTML-файл, это сообщение, очевидно, не будет отображаться, поскольку мы не включили main.js и не скомпилировали зависимости для браузера. Нам нужно заставить Webpack смотреть на main.js и мониторить, есть ли у него какие-либо зависимости. Если это так, он должен скомпилировать их вместе и создать файл bundle.js, который мы можем использовать в браузере.

Вернитесь к терминалу для запуска Webpack. Просто наберем:

1	webpack main.js bundle.js

Первый заданный файл - это файл ввода, который мы хотим, чтобы Webpack начал поиск зависимостей. Он будет работать, если требуемые файлы потребуют каких-либо других файлов и будут продолжать делать это, пока не будут разработаны все необходимые зависимости. После этого он выводит зависимости как один объединенный файл в bundle.js. Если вы нажмете return, вы увидите примерно следующее:

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 в корне вашего проекта со следующим содержимым:

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 and Gulp. Они по существу принимают файлы и преобразуют их каким-то образом, прежде чем они включаются в наш связанный код.

Скажем, мы хотели использовать некоторые из тонкостей ES2015 в нашем коде. ES2015 - это новая версия JavaScript, которая не поддерживается во всех браузерах, поэтому нам нужно использовать загрузчик, чтобы преобразовать наш код ES2015 в простой старый ES5-код, который поддерживается. Для этого мы используем популярный Babel Loader, который, согласно инструкциям, мы устанавливаем так:

1	npm install babel-loader babel-core babel-preset-es2015 --save-dev

Это устанавливает не только загрузчик, но и его зависимости, и предустановку ES2015, поскольку Babel должен знать, какой тип JavaScript он конвертирует.

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

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            }
        ],
    }
};

Здесь есть несколько важных моментов. Первый - это тест строки: /\.js$/, который является регулярным выражением, предлагающим применить этот загрузчик ко всем файлам с расширением .js. Аналогично exclude: /node_modules/ сообщает Webpack, чтобы игнорировать каталог node_modules. loader и query достаточно понятны - используйте загрузчик Babel с предустановкой ES2015.

Перезапустите свой веб-сервер, нажав ctrl + c и снова запустив webpack-dev-server. Все, что нам нужно сделать, это использовать некоторый код ES6 для тестирования преобразования. Как насчет того, чтобы мы изменяли нашу переменную sayHello как константу?

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

После сохранения Webpack должен автоматически перекомпилировать ваш код и обновить ваш браузер. Надеюсь, вы не увидите никаких изменений. Посмотрите в bundle.js и посмотрите, можете ли вы найти ключевое слово const. Если Webpack и Babel выполнили свою работу, вы не увидите ее нигде - просто старый JavaScript.

Переход к части 2

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