От автора: в первой части мы познакомимся с webpack, его командной строкой, файлом настроек, а также создадим наш первый пакет. Начну я эту статью так же, как большинство авторов, пишущих по этой теме, с простого, незаурядного и слегка спутанного описания webpack.
Из документации: «Webpack представляет собой упаковщик модулей. Webpack берет модули с зависимостями и генерирует статические файлы, которые представляют эти модули.»
В этой серии уроков я обещаю показать вам не только основы, но и более сложные моменты.
В общих чертах, webpack смотрит на исходные файлы, анализирует их зависимости и компилирует выходной пакет. Если исходному файлу нужны другие модули (CommonJS AMD), webpack поколдует над сборкой и пакетом и выдаст файл, готовый для использования в любой среде JS.
Также меня смутило постоянное смешение с командной строкой, а также файл конфигураций. При запуске webpack ищет командную строку и файл конфигураций, и зачастую множество команд переходит в файл конфигураций. В своих статьях я буду в основном использовать файл конфигураций и изредка задействовать аргументы команд.
Создание проекта
Во-первых, создадим проект с помощью команды:
|
1 |
npm init |
Создадим базовую структуру папок и создадим пустой JS файл:
|
1 |
mkdir src && touch src/index.js |
Добавим webpack в зависимость:
|
1 |
npm install webpack --save-dev |
Теперь можно запускать webpack скрипты из нашего проекта в виде npm скриптов. Напишем стандартный npm скрипт в package.json:
|
1 2 3 4 5 |
{ "scripts": { "build": "webpack" } } |
Создание первого пакета
По самому минимуму в webpack нужно указать точку входа и выходные настройки. Сделать это можно, обновив нашу задачу build:
|
1 2 3 4 5 |
{ "scripts": { "build": "webpack --entry ./src/index.js --output-filename ./dist/index.bundle.js" } } |
Входной файл задается с помощью аргумента —entry. Аргумент —output-filename задает файл для компиляции. Если еще раз запустить npm run build, webpack успешно создаст пакет по директории dist/index.bundle.js. В файле будет шаблонный код webpack, который мы разберем чуть позже.
С командной строкой закончили, теперь мы создадим файл конфигураций.
Создание файла конфигураций
Файл конфигураций webpack можно создать с помощью аргумента —config в командной строке:
|
1 2 3 4 5 |
{ "scripts": { "build": "webpack --config ./config.js" } } |
Код выше предполагает, что файл конфигураций config.js был найден. По умолчанию задача webpack ищет файл webpack.config.js в той же папке, откуда она запускается. То есть можно просто вернуться к следующему:
|
1 2 3 4 5 |
{ "scripts": { "build": "webpack" } } |
Теперь можно создать файл конфигураций webpack:
|
1 |
touch webpack.config.js |
Давайте переместим наш скрипт командной строки в файл конфигураций webpack. Настройки webpack представляют собой простой экспортируемый объект. По большей части все аргументы командной строки ссылаются на значения ключевых пар. Например, —entry ссылается на {entry: »}, а —output-filename ссылается на {output: {filename: »}}. А это наши:
|
1 2 3 4 5 6 7 8 9 10 |
const webpack = require('webpack'); const path = require('path'); module.exports = { entry: path.join(__dirname, 'src/index.js'), output: { path: path.join(__dirname, 'dist'), filename: 'index.bundle.js' } }; |
И опять, если запустить команду npm run build, наш входной скрипт запакуется и скомпилируется в заданный выходной файл. В этот раз мы задали две выходные опции:
path – задает выходной путь пакета;
filename – задает имя файла пакета.
О важности этих опций мы еще поговорим в будущем. А сейчас это просто легкий способ разбить настройки в удобный формат.
Ну… и зачем все это?
На данный момент мы взяли буквально пустой проект, добавили webpack в зависимость и задали настройки, которые берут пустой JS файл и добавляют в него кучу странного кода. Давайте напишем нормальный код, заполним файл index.js, подключим к нему модуль и заглянем под капот.
Сперва создадим новый файл hello.js. Это модуль, который можно будет использовать в index.js.
|
1 |
touch src/hello.js |
Наш модуль hello будет принимать аргумент name и будет возвращать самую узнаваемую строку всех времен «Hello name». По умолчанию webpack может запаковывать CommonJS и модули стилей AMD. Для начала используем CommonJS. Напишем код для hello.js:
|
1 2 3 4 5 6 7 8 |
// hello.js module.exports = function(name) { if (name === undefined) { name = 'World'; } return 'Hello, ' + name + '!'; }; |
Все очень просто. Функция принимает аргумент name, и если он пустой, в переменную записывается строка World. В конце возвращается полная строка «Hello, name». Вернемся в файл index.js (входной файл для webpack) и подключим этот модуль:
|
1 2 3 4 5 |
// index.js var hello = require('./hello.js'); console.log(hello()); // в логах будет "Hello, World!" console.log(hello('Nick')); // в логах будет "Hello, Nick!" |
Если теперь запустить задачу build через команду npm run build, мы получим довольно аккуратный код на выходе. Также можно проверить наш код с помощью node:
|
1 2 3 4 5 6 |
node ./dist/index.bundle.js output: Hello, World! Hello, Nick! |
Что хранится в скомпилированном файле?
Если вы такой же любопытный, как я, то вас должно интересовать, а что же происходит под капотом. Не будут вдаваться в детали, потому что сам разобрался поверхностно. По коду генерируется много комментариев, так что разобраться будет легко. Если коротко:
webpack заворачивает все в IIFE, который вызывается на все модули (как массив);
webpack создает функцию __webpack_require__, которая подключает модули изнутри по необходимости;
webpack запускается с запуском первого модуля (модуль входа, в нашем случае файл index.js) с помощью функции __webpack_require__;
все предыдущие объявления require заменяются на запуск __webpack_require__ с правильным индексом модуля, который берется из массива.
Если это объяснение только запутало вас, забудьте про него и не заморачивайтесь. Суть в том, что webpack делает все тяжелую работу за вас, и вы можете использовать этот код с любым окружением JS. Чтобы быстро проверить, что код работает, откройте браузер, зайдите в панель разработчика и скопируйте весь код файла index.bundle.js code в консоль. Код выполнится!
Заключение
Мы познакомились с webpack и поверхностно оценили его огромный потенциал. Быстро разобрались с командной строкой и файлом конфигураций. Потом создали наш первый пакет, который задействовал модули CommonJS. Если у вас возникли вопросы, комментарии или хотите связаться со мной, пишите об этом ниже или откройте тему на GitHub.
Источник: //callmenick.com/
Редакция: Команда webformyself.
