Готовим с Webpack часть 1: введение и базовая реализация

Готовим с Webpack часть 1: введение и базовая реализация

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

Из документации: «Webpack представляет собой упаковщик модулей. Webpack берет модули с зависимостями и генерирует статические файлы, которые представляют эти модули.»

В этой серии уроков я обещаю показать вам не только основы, но и более сложные моменты.

В общих чертах, webpack смотрит на исходные файлы, анализирует их зависимости и компилирует выходной пакет. Если исходному файлу нужны другие модули (CommonJS AMD), webpack поколдует над сборкой и пакетом и выдаст файл, готовый для использования в любой среде JS.

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

Создание проекта

Во-первых, создадим проект с помощью команды:

npm init

Создадим базовую структуру папок и создадим пустой JS файл:

mkdir src && touch src/index.js

Добавим webpack в зависимость:

npm install webpack --save-dev

Теперь можно запускать webpack скрипты из нашего проекта в виде npm скриптов. Напишем стандартный npm скрипт в package.json:

{
  "scripts": {
    "build": "webpack"
  }
}

Создание первого пакета

По самому минимуму в webpack нужно указать точку входа и выходные настройки. Сделать это можно, обновив нашу задачу build:

{
  "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 в командной строке:

{
  "scripts": {
    "build": "webpack --config ./config.js"
  }
}

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

{
  "scripts": {
    "build": "webpack"
  }
}

Теперь можно создать файл конфигураций webpack:

touch webpack.config.js

Давайте переместим наш скрипт командной строки в файл конфигураций webpack. Настройки webpack представляют собой простой экспортируемый объект. По большей части все аргументы командной строки ссылаются на значения ключевых пар. Например, —entry ссылается на {entry: »}, а —output-filename ссылается на {output: {filename: »}}. А это наши:

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.

touch src/hello.js

Наш модуль hello будет принимать аргумент name и будет возвращать самую узнаваемую строку всех времен «Hello name». По умолчанию webpack может запаковывать CommonJS и модули стилей AMD. Для начала используем CommonJS. Напишем код для hello.js:

// hello.js
module.exports = function(name) {
  if (name === undefined) {
    name = 'World';
  }

  return 'Hello, ' + name + '!';
};

Все очень просто. Функция принимает аргумент name, и если он пустой, в переменную записывается строка World. В конце возвращается полная строка «Hello, name». Вернемся в файл index.js (входной файл для webpack) и подключим этот модуль:

// index.js
var hello = require('./hello.js');

console.log(hello()); // в логах будет "Hello, World!"
console.log(hello('Nick')); // в логах будет "Hello, Nick!"

Если теперь запустить задачу build через команду npm run build, мы получим довольно аккуратный код на выходе. Также можно проверить наш код с помощью node:

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.

Источник: http://callmenick.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree