От автора: инструменты сборки стали неотъемлемой частью веб-разработки в основном из-за сложности JS-приложений. Сборщики позволяют запаковывать, компилировать и организовывать множество файлов и библиотек, необходимых в современных веб-проектах. В этом уроке мы расскажем вам про webpack, мощный open-source сборщик и препроцессор, умеющий выполнять большое количество разных задач. Мы научим вас писать модули, собирать код, а также использовать некоторые плагины загрузки. Урок написан для людей, абсолютно не знакомых с webpack. Однако рекомендуется иметь малейшие знания JS.
Почему именно webpack?
Как и в любом другом аспекте веб-разработки, здесь нет стандарта, какой инструмент сборки использовать. В настоящее время у разработчиков есть выбор между webpack, Gulp, Browserify, NPM scripts, Grunt и еще 10 инструментами. В сети есть много подробных сравнений, однако все инструменты очень похожи. В большинстве случаев выбор зависит от личных предпочтений и проекта, над которым вы сейчас работаете.
Ниже приведены плюсы и минусы, чтобы вы могли решить, подходит ли вам webpack или нет:
Плюсы:
отлично подходит для работы с одностраничными приложениями;
принимает модульный синтаксис require() и import;
позволяет продвинуто разбивать код;
горячая перезагрузка для более быстрой разработки с React, Vue.js и похожими фреймворками;
по данным JS-опроса за 2016 это самый популярный запаковщик.
Минусы:
не подходит новичкам в веб-разработке;
сначала принцип работы с CSS-файлами, изображениями и другими не JS ресурсами кажется запутанным;
документация могла быть и лучше;
часто изменяется, большая часть уроков за 2016 уже устарела.
Установка
Проще всего установить webpack через пакетный менеджер. Мы будем использовать npm, но вы можете взять Yarn или другой менеджер. В обоих случаях вам понадобится Node.js и готовый package.json.
Рекомендуется ставить webpack локально (без флага –g), чтобы у всех, кто работает с вашим проектом, была одна версия
|
1 |
npm install webpack --save-dev |
После установки лучше всего запустить webpack через скрипт Node.js. Добавьте эти строки в package.json:
|
1 2 3 4 5 6 |
//... "scripts": { "build": "webpack -p", "watch": "webpack --watch" }, //... |
Теперь если в терминале выполнить команду npm run build, webpack соберет наши файлы (флаг –p означает продакшн, собранный код минифицируется). Команда npm run watch запустит процесс автоматической сборки файлов при внесении в них любых изменений.
Осталось сказать webpack, какие файлы собирать. Рекомендуется делать это через конфиг.
Конфиг файл webpack
Здесь мы разберем самый базовый конфиг файл, но не думайте, что все так просто. Конфиг в webpack довольно мощная штука, в разных проектах он будет изменяться. В некоторых случаях он очень сложный.
Создайте в корневой папке проекта файл webpack.config.js.
|
1 2 3 4 5 6 7 8 9 |
var path = require('path'); module.exports = { entry: './assets/js/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }; |
Опция entry – наш главный JS-файл. Существует множество разных стратегий настройки точки входа, но в большинстве случаев единой точки будет достаточно.
Опция output задает имя и путь к нашей сборке. После запуска webpack весь JS-код запакуется в файл bundle.js. В HTML мы будем подключать только этот файл:
|
1 |
<script src="./dist/bundle.js"></script> |
Такой настройки должно хватить для начала. Позже мы добавим кое-что, но сначала давайте посмотрим, как работают модули.
Модули webpack
Существует множество способов работы с модулями в webpack, и в большинстве случаев вы можете выбирать любой. В этом уроке мы будем использовать синтаксис ES6 import.
Необходимо добавить модуль приветствия для наших пользователей. Для этого необходимо создать файл greeter.js и экспортировать простую функцию (greeter.js):
|
1 2 3 4 5 |
function greet() { console.log('Have a great day!'); }; export default greet; |
Чтобы использовать этот модуль, его необходимо импортировать и вызвать в нашей точке входа. Если взгляните чуть выше, то вспомните, что наша точка входа это index.js.
|
1 2 3 4 |
import greet from './greeter.js'; console.log("I'm the entry point"); greet(); |
Если теперь запустить сборку с помощью npm run build и открыть HTML в браузере, то мы увидим:
Наша точка входа и модуль приветствия были скомпилированы в один файл bundle.js, который выполнился в браузере. Простая блок-схема действий:
Подключение библиотек
Нам нужно, чтобы наше приложение в приветствии писало день недели. Для этого нам понадобится moment.js, его необходимо напрямую импортировать в модуль приветствия.
Сперва необходимо установить библиотеку через npm:
|
1 |
npm install moment --save |
Далее в модуле приветствия мы просто импортируем библиотеку точно так же, как мы делали с локальными модулями в предыдущем шаге (greeter.js):
|
1 2 3 4 5 6 7 8 |
import moment from 'moment'; function greet() { var day = moment().format('dddd'); console.log('Have a great ' + day + '!'); }; export default greet; |
После повторной сборки в консоли браузера мы увидим следующее сообщение:
Диаграмма теперь выглядит следующим образом:
Заметка: существуют более продвинутые техники подключения библиотек, но они выходят за рамки нашей статьи. Читайте более подробно по ссылке.
Загрузчики
С помощью загрузчиков webpack выполняет задачи во время сборки и делает пре/постпроцессинг файлов. Например, загрузчики могут компилировать TypeScript, загружать компоненты Vue.js, рендерить шаблоны и многое другое. Большая часть загрузчиков написана сообществом разработчиков, список популярных можно посмотреть по ссылке.
Скажем, нам нужно добавить линтер в наш проект для проверки JS-кода на ошибки. Для этого можно подключить JSHint loader, который будет ловить все плохие практики и код с ошибками.
Сперва необходимо установить JSHint и webpack JSHint loader:
|
1 |
npm install jshint jshint-loader --save-dev |
Далее необходимо добавить пару строк в конфиг файл webpack, чтобы инициализировать загрузчик и передать тип файлов на проверку, а также тип файлов, который нужно игнорировать (webpack.config.js).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var path = require('path'); module.exports = { entry: './assets/js/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, // Добавляем JSHint loader module: { rules: [{ test: /\.js$/, // запускаем loader на всех файлах .js exclude: /node_modules/, // игнорируем все файлы из папки node_modules use: 'jshint-loader' }] } }; |
Теперь при запуске webpack в терминале отобразятся предупреждения (которые мы игнорируем):
Файл moment.js находится в папке node_modules, и он не будет линтиться загрузчиком JSHint:
На этом завершается наше знакомство с webpack! Так как этот урок написан для новичков, мы старались покрыть только самые полезные и известные концепции webpack. Надеемся, этот урок был полезен, не слишком запутанным, а также, что мы уложились в отведенные 15 минут. В будущем мы планируем написать вторую часть урока, в которой объясним, как работать с CSS-модулями и другими более продвинутыми функциями.
Автор: Danny Markov
Источник: //tutorialzine.com/
Редакция: Команда webformyself.
