Advertisement
  1. Code
  2. JavaScript

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

Scroll to top
Read Time: 6 min
This post is part of a series called Introduction to Webpack.
Introduction to Webpack: Part 2

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-файл следующим образом:

1
<!doctype html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <title>Webpack fun</title>
6
    </head>
7
    <body>
8
        <h2></h2>
9
        <script src="bundle.js"></script>
10
    </body>
11
</html>

Важной частью здесь является ссылка на bundle.js, что и сделает Webpack для нас. Также обратите внимание на элемент H2 - мы будем использовать его позже.

Затем создайте два файла в том же каталоге, что и ваш HTML-файл. Назовите первый файл main.js, который, как вы можете себе представить, является основной точкой входа для нашего скрипта. Затем назовите второй say-hello.js. Это будет простой модуль, который берет имя человека и элемент DOM, и вставляет приветственное сообщение в указанный элемент.

1
// say-hello.js

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

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

1
Hash: 3d7d7339a68244b03c68
2
Version: webpack 1.12.12
3
Time: 55ms
4
    Asset     Size  Chunks             Chunk Names
5
bundle.js  1.65 kB       0  [emitted]  main
6
   [0] ./main.js 90 bytes {0} [built]
7
   [1] ./say-hello.js 94 bytes {0} [built]

Теперь откройте index.html в своем браузере, чтобы увидеть свою страницу с приветствием.

Конфигурация

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

1
module.exports = {
2
    entry: './main.js',
3
    output: {
4
        filename: 'bundle.js'
5
    }
6
};

Теперь мы можем просто набрать webpack и ничего другого для получения тех же результатов.

Сервер разработки

Что это? Вы даже не можете беспокоиться о том, чтобы набирать webpack каждый раз, когда вы меняете файл? Я не знаю, сегодняшнее поколение и т.д. Хорошо, давайте настроим небольшой сервер разработки, чтобы сделать работу еще более эффективной. На терминале напишите:

1
npm install webpack-dev-server -g

Затем запускаем команду webpack-dev-server. Это запустит простой веб-сервер, использующий текущий каталог в качестве места для хранения файлов. Откроем в новом окне бразуера ссылку http://localhost:8080/webpack-dev-server/. Если все в порядке, вы увидите что-то вроде этого:

An example of the 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, чтобы он выглядел следующим образом:

1
module.exports = {
2
    entry: './main.js',
3
    output: {
4
        filename: 'bundle.js'
5
    },
6
    module: {
7
        loaders: [
8
            {
9
                test: /\.js$/,
10
                exclude: /node_modules/,
11
                loader: 'babel',
12
                query: {
13
                    presets: ['es2015']
14
                }
15
            }
16
        ],
17
    }
18
};

Здесь есть несколько важных моментов. Первый - это тест строки: /\.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 и изображений на вашу страницу, а также для подготовки вашего сайта к развертыванию.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.