#1 Сборщик модулей webpack . Часть 1.

Всем привет! Сегодня мы начинаем серию уроков, посвященных webpack.

При разработке большого проекта очень часто возникает необходимость разбивать код на отдельные модули, которые будут взаимодействовать между собой. На сегодняшний день для этого существует два подхода: это AMT и CommonJS. Они оба позволяют разрабатывать изолированные модули, не думать о порядке их загрузки, собирать все наши модули в один js-файл, безопасно подключать сторонние библиотеки. Вы спросите: "Что же такого нового могли придумать на сегодняшний день?". Поэтому в этих нескольких уроках мы разберем какие плюсы дает нам webpack и как его использовать.

Для начала вам нужно поставить webpack глобально. Для это пишем команду

npm install webpack -g

Далее создаем новый файл main.js и напишем в нем

console.log('Hello webpack');

Теперь, если в консоли мы напишем

webpack main.js bundle.js

то мы увидим сообщение, что bundle.js был успешно создан. В архитектуре проекта он также появился и в нем мы видим наш console.log('Hello webpack'). Теперь давайте к index.html подключим скрипт

<script src="bundle.js"></script>

Если теперь мы посмотрим в браузер, то мы увидим, что в консоли Hello webpack отлично отрабатывает. Так как писать команды в консоли, а также указывать для них аргументы не удобно, то для webpack можно создать файл конфига. Он должен называться webpack.config.js. В нем мы напишем

module.exports = {
    entry: './main.js'
}

Это будет наш объект с опциями. Самая главная опциия - это entry. Entry - это точка входа в наше приложение. В данном случае у нас точкой входа является файл main.js. Имеено он будет загружаться самым первым и реквайрить все остальные файлы. Далее мы можем задать output.

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    }
}

Output - это обьект, в котором мы можем указать опции для файла, в который будут собираться наши модули. В данном случае, если мы зададим filename bundle.js, то у нас останется все без изменений, так как это название результирующего файла по умолчанию. Теперь в консоли webpack мы можем просто прописать

webpack

ничего не указывая дополнительно и у нас будет тот же самый результат. Если мы в файле main.js изменим имеющуюся запись на

document.write('Hello webpack');

и запустим webpack в консоли, а затем посмотрим в браузере, то на экране мы увидим надпись Hello webpack. Также в консоли очень не удобно каждый раз после того, как мы что-то изменили, постоянно запускать

webpack

Для того, чтобы этого избежать, существует команда

webpack --watch

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

document.write('Hello webpack!!!');

и посмотрим в консоль, то мы увидим: во-первых, код отработал точно также, как есди бы мы запустили webpack; во-вторых, при обновлении браузера, мы увидим, что у нас изменилось сообщение. Теперь, давайте применим хоть что-то, для чего создавалась модульная архитектура. Давайте создадим новый модуль content.js и внутри напишем

module.exports = "This is some content";

module.exports - это как раз то, что будет экспортированно в модуль контента. То есть мы можем писать в файле любую информацию, но только то, что мы напишем в module.exports и присвоим - будет возвращено с этого модуля, как его содержимое. Тут может быть и объект, но в данном случае давайте укажем строку. Теперь, давайте в файле main.js изменим код и напишем

document.write(require('./content'));

Не будем указывать расширение .js. Как мы видим - вотч все еще висит и теперь при обновление страницы браузера мы увидим надпись на экране - This is some content. Как мы понимаем, этот код у нас написан в файле content.js (который является модулем), в файле main.js - мы реквайрим данный модуль. Благодаря этому, нам становится доступным весь контент, который мы возвращаем из content.js. В данном случае нам доступна строка require('./content') и мы выводим ее в document.write. Как мы видим расширение .js можно не указывать, при этом код все-равно будет отрабатывать. На мой взгляд, плюсы webpack, которые мы увидели в этом уроке:

простота использования - нам достаточно использовать require, для того, что зарекваирить какой-то компонент, и module.exports - для того, чтобы указать, что мы хотим вернуть из этого модуля;

простота настройки - webpack имеет досточно маленький конфиг файл и, впринципе, мы в нем указали достаточно мало настроек, можно делать больше, но при этом они все-равно останутся читабельными;

простейший вотч изменений, который позволяет нам очень легко видеть все внесенные нами изменения в браузере.