Как зарегистрироваться в приложении webpack

Обновлено: 07.01.2025

Большинство разработчиков так или иначе взаимодействовали с webpack при работе с проектами на React, Angular или Vue. В большинстве подобных ситуаций хватает настроек по умолчанию, поэтому освоение самого webpack как правило откладывается на потом. И если это так для вас, это может быть не правильно, так как уже базовые знания настроек webpack могут значительно улучшить процесс разработки.

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

Почему все используют webpack?

Альтернативой использованию webpack является использование комбинации менеджеров задач, таких как grunt или gulp, со сборщиком пакетов, подобным browserify. Но что заставляет разработчика выбирать webpack, а не использовать его альтернативы?

Webpack решает задачу сборки более интегрированным и естественным образом. В browserify для этого вам придется использовать gulp/grunt и длинный список дополнительных модификаторов и плагинов. Webpack предлагает достаточно обширный функционал по умолчанию уже из коробки.

Webpack работает на основание файла конфигурации, в отличие от gulp/grunt, где мы должны писать код для выполнения своих задач. В зависимости от конфигурации он может делать правильные предположения о том, что вам необходимо сделать; как работать с различными модулями JS, как компилировать код и как управлять активами и так далее. Так же есть функция горячей перезагрузки проекта live-reload. Возможность замены выходных имен файлов именами хеш-файлов которые позволяет браузерам легко обнаруживать измененные файлы путем включения в имя файла специфичного для сборки хэша. И это лишь некоторые основные моменты, которые делают webpack лучшим выбором.

Особенности webpack

Базовые функции, некоторые из которых мы обсудим далее:

Загрузчики (Loaders)
Плагины (Plugins)
Использование разных конфигураций для разных окружений
Отложенная загрузка модулей
Удаление с помощью tree shaking забытого кода
Горячая замена модуля, которая позволяет обновлять код во время выполнения без необходимости полного обновления
Кэширование путем подстановки имен файлов хэшами

Настройка проекта

Начальные условия

Для продолжения этого урока нам потребуется установленный Node.js, в котором так же должен быть установлен менеджер пакетов npm. Затем мы установим yarn, которая является альтернативой npm, что даст дополнительные функциональные возможности и улучшить скорость установки дополнительных пакетов.

Начальная структура каталогов

Мы начнем с создания структуры каталогов. Создайте папку для тестового проекта Webpack-Setup. Внутри нее инициализируйте проект с помощью команды yarn init, которая создаст для нас файл package.json.

Далее в ней создайте папку src. Затем зайдите в папку src и там создайте еще три папки: app, public, style.

src: тут будет размещается исходный код проекта.
src/app: здесь будут размещаться наши файлы JavaScript.
src/public: эта папка будет содержать ресурсы проекта и статические файлы.
src/style: в этой папке будут глобальные стили проекта.

Далее создадим файлы проекта.

Создайте пустой файл src/app/index.js этот файл будет главной точкой входа в наш проект.

Файл src/public/index.html основной шаблон проекта

Создайте пустой файл src/style/app.scss он нам пригодится позже.

Начальная конфигурация

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

HtmlWebpackPlugin упрощает создание файлов HTML и может автоматически вставлять модули JavaScript в наш основной шаблон HTML.

Первым делом установим основные модули: webpack и webpack-dev-server (облегченный веб сервер для разработки).

Так же нам будет нужен webpack-cli:

Теперь создадим файл конфигурации webpack. В корне проекта создайте файл webpack.config.js со следующим содержимым:

Начальная конфигурация представляет собой скелет нашего проекта со следующими частями.

Далее добавим команду start в файл package.json.

Затем мы можем запустить наше приложение с:

В консоле должно отобразиться что то типа такого:

Загрузчики

Таким образом, загрузчики в некотором роде похожи на «задачи» в других инструментах сборки и предоставляют собой мощный способ обработки шагов сборки.

babel-loader

Этот загрузчик использует Babel для загрузки файлов ES2015. Мы установим babel-core, в который входит babel-loader. Также подключим модуль babel-preset-env, который компилирует ES2015+ в ES5 путем автоматического определения необходимых Babel плагинов и полифайлов. Для этого с начало установим их, командой:

Затем создаем файл .babelrc, в корне проекта, и в нем пропишем пресеты.

Теперь мы можем включить наш загрузчик в нашу конфигурацию для преобразования файлов Javascript. Это позволит нам использовать синтаксис ES2015 + в нашем коде (который будет автоматически конвертироваться в ES5 в окончательной сборки).

Тестирование результата

Внесите следующий код в файл src/app/index.js:

raw-loader

Это загрузчик, который позволяет нам импортировать файлы в виде строки. Мы покажем это, импортировав шаблон HTML для использования в качестве angular компонента.

Добавим в наш проект Angular и загрузчик raw-loader:

Добавьте следующий код в файл конфигурации webpack

В файл src/app/index.js внесите следующий код:

В файл src/public/index.html внесите следующий код:

А так же в каталоге src/app/ создайте новый файл index.tpl.html

sass-loader

Загрузчик sass-loader помогает нам использовать стиль scss в нашем приложении. Для этого требуется модуль node-sass, который позволяет нам скомпилировать файлы .scss в css . Рекомендуется использовать его вместе с css-loader, чтобы превратить его в модуль JS и загрузчик стилей, которые добавят CSS в DOM, внедряя тег style.

Начнем с установки модулей:

Внесите следующие изменения в файл настроек webpack

Далее внесите следующие изменения в src/style/app.scss:

Использование стилей

Для этого нам достаточно импортировать стили в шаблон, как показано ниже:

Плагины

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

Загрузчики выполняют предварительную обработку файлов любого формата. Они работают на уровне отдельных файлов во время или до создания пакета. После того как отработают загрузчики наступает очередь плагинов. Плагины как правило отрабатывают только одну функцию.

Плагины работают на уровне пакета или блока и обычно запускаются в конце процесса генерации пакета.

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

Мы уже использовали html-webpack-plugin, теперь я покажу, как использовать некоторые распространенные плагины в нашем проекте.

DefinePlugin

Затем создайте файл в корне проекта .env со следующим содержимым.

Настройка файла конфигурации webpack:

Далее добавьте следующую строку в src/app/index.js:

Должно в итоге получится что то типа такого:

webpack-dashboard

Это редко используемая панель инструментов CLI для webpack-dev-server. Плагин добавляет «красоту и порядок» в среду разработки, и вместо обычных журналов консоли мы видим привлекательную, легко интерпретируемую панель инструментов.

Внесем изменения в файл конфигурации:

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

После запуска проекта командой yarn start мы должны увидеть что то типа такого:

Среды разработки

В этом последнем разделе мы сосредоточимся на том, как мы можем использовать webpack для управления различными конфигурациями среды окружения. Мы покажем как использовать плагины в зависимости от среды, которые предназначены либо для тестирования, или для разработки, или для продакшин в зависимости от предоставленных переменных. Мы будем полагаться на пакет dotenv. В зависимости от окружения у нас будут различаться использование таких инструментов как devtool и плагины: extract-text-webpack-plugin, UglifyJsPlugin и copy-webpack-plugin и другие.

Настройка файла конфигурации

Мы немного изменим нашу конфигурацию, чтобы создать требуемую нам функциональность. Мы также удалим DashboardPlugin, который, может, вызывать некоторые проблемы при минимизации.

Теперь если добавьте в файл .env следующую переменную:

легко увидеть что разница между размерами пакетами сборки до и после минификации огромна.

Заключение

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

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

В данном руководстве используется webpack 4.30.

Webpack-что это?

Webpack – это статический модульный сборщик. В проекте он обрабатывает все файлы и ресурсы как модули. При этом сборщик опирается на граф зависимостей, в котором описывается взаимосвязь модулей с помощью ссылок (операторы require и import ).

Таким образом, webpack статически перемещается по всем модулям для построения графа и использует его для генерации одного бандла

Бандл – это файл JavaScript, содержащий код из всех модулей проекта и объединенных в правильном порядке. Когда webpack создает граф зависимостей, он не выполняет исходный код, а объединяет модули и их зависимости в бандл.

Базовые понятия Webpack

Entry – модуль, который используется для построения внутреннего графа зависимостей. С его помощью webpack определяет, от каких модулей и библиотек зависит точка входа (напрямую и не напрямую). Затем включает их в граф, пока не останется ни одной зависимости. По умолчанию для свойства entry установлено значение ./src/index.js . Но можно указать другой модуль в файле конфигурации сборщика.
Output – это свойство указывает, где webpack должен сохранять бандл и как называть его файл (или файлы). Значением по умолчанию является ./dist/main.js для основного бандла и ./dist для других сгенерированных файлов.
Загрузчики. По умолчанию webpack понимает только файлы JavaScript и JSON. Чтобы обработать другие типы файлов и конвертировать их в модули, сборщик использует загрузчики. Например, загрузчик может трансформировать файлы из языка CoffeeScript в JavaScript или встроенные изображения в URL-адреса. С помощью загрузчиков можно даже импортировать CSS-файлы прямо из модулей JavaScript.
Плагины. Используются для задач, которые не могут выполнять загрузчики.
Режимы. Webpack позволяет настроить режим на development , production или none . Благодаря этому он может использовать встроенные оптимизации для каждой среды. По умолчанию установлено значение Режим none означает, что все опции оптимизации по умолчанию будут отключены. Чтобы узнать больше об опциях, которые webpack использует в development и production , посетите страницу конфигурации режимов .

Как работает Webpack

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

При выполнении задач webpack опирается на конфигурацию. Они прописаны в файле webpack.config.js . В нем указано, как файлы и ресурсы следует трансформировать.

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

Если модуль содержит зависимости, процесс выполняется рекурсивно для каждой зависимости. Затем webpack объединяет все модули проекта в небольшое количество бандлов (обычно только один), чтобы их можно было загрузить в браузер.

Приступим

Файлы нашего проекта можно найти в репозитории на Github .

Сначала создадим новый каталог и перейдем в него. Затем инициализируем новый проект:

После этого нужно локально установить webpack и webpack CLI:

Теперь код сгенерированного файла package.json должен выглядеть следующим образом:

Также webpack можно использовать в качестве менеджера задач. Для этого нужно разместить задачу и ее инструкции в разделе scripts файла package,json . Попробуем сделать это прямо сейчас. Откройте файл package.json и измените объект scripts следующим образом:

Создадим каталог src и поместим в него файл index.js . Теперь мы можем запустить задачу dev , чтобы webpack работал в режиме разработки:

Отобразим результат работы сборщика в браузере. Для этого создадим файл index.html в каталоге dist :

В некоторых случаях создание файла index.html вручную может быть проблематичным. Например, если мы изменим имя точки входа, то сгенерированный пакет будет переименован. Но файл index.html по-прежнему будет ссылаться на старое имя. Поэтому нужно будет вручную обновлять HTML- файл каждый раз, когда понадобится переименовать точку входа или добавить новую. Этого можно избежать с помощью html-webpack-plugin. Установите этот плагин:

Чтобы активировать плагин, создайте файл webpack.config.js и поместите в него следующий код:

Чтобы активировать плагин webpack, нужно включить его и добавить в массив plugins . При необходимости передаем плагину необходимые параметры.

Запустим сборку и посмотрим на результат:

Откроем файл index.html . Как видим, плагин автоматически создает обновленный файл index.html , который использует параметр title из конфигурации:

Теперь определим пользовательские имена для свойств input и output . В webpack.config.js перед свойством plugins добавляем следующий код:

После этого создадим файл src/component.js :

Переименуем index.js в app.js , чтобы отразить внесенные изменения, и заменяем его содержимое следующим кодом:

Теперь запустим webpack:

Изучим и проясним для себя информацию из вывода, предоставляемого webpack. Вверху указаны хэш сборки, версия webpack и время выполнения сборки.

Работа со скриптами

Мы рассмотрим, как перенести ES6 в ES5-совместимый код, который работает во всех браузерах. Начнем с выполнения приведенной ниже команды:

Затем откроем файл main.bundle.js :

Современные функции из стандарта JavaScript ES6 (стрелочная функция и объявление const ) из модуля component.js по умолчанию не преобразованы в ES5-совместимый код. Чтобы код работал в более старых браузерах, необходимо добавить загрузчик Babel:

Затем в файле webpack.config.js добавьте module после свойства output :

При определении правил для загрузчика webpack нужно установить три основных свойства:

test – описывает, какие файлы следует трансформировать.
exlude – определяет, какие файлы из загрузчика не следует обрабатывать.
use – указывает, какой загрузчик следует использовать для сопоставленных модулей.

Еще раз введите приведенную ниже команду:

На этот раз код в файле main.bundle.js компилируется в следующий:

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

Работа со стилями

Чтобы добавить CSS в проект, потребуются два загрузчика:

css-loader преобразует CSS-код в JavaScript и разрешает любые зависимости, а style-loader выводит CSS в теге <style> в HTML- документе.

Добавим в файл webpack.config.js необходимую конфигурацию:

Создадим файл src/style.css :

Затем импортируем его в файл app.js :

Управление ресурсами

Далее мы рассмотрим пример с изображениями. Сначала нужно установить загрузчик файлов:

Затем добавить новое правило в файл webpack.config.js:

Чтобы протестировать загрузчик, создадим файл image-component.js в каталоге src со следующим кодом:

Здесь мы импортируем изображение как модуль и используем его в теге <img/> . Нужно поместить это изображение в каталог src .

После этого импортируем компонент изображения в файл app.js :

Ускорение процесса разработки с помощью webpack-dev-server

Нам приходиться перестраивать проект всякий раз, когда вносим какие-то изменения в код. К счастью, webpack предоставляет веб-сервер, который автоматически создает и обновляет страницу. Чтобы установить его, запустите приведенную ниже команду:

Чтобы использовать сервер, нужно обновить dev -скрипт в файле package.json :

А затем настроить сервер в файле webpack.config.js , добавив следующее свойство:

После этого webpack-dev-server начинает обслуживать файлы из каталога dist и автоматически открывать страницу входа.

Теперь при запуске webpack ( npm run dev ) мы увидим, как страница открывается в браузере автоматически на localhost: 8080 :

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

Очистка вывода

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

Затем запустите webpack ( npm run build ) и проверьте папку dist . Теперь вы увидите в ней только файлы, сгенерированные из сборки. В нашем случае файл, который следует удалить, это main.js .

Заключение

Webpack – это полезный и мощный инструмент. В данном руководстве представлены только его базовые возможности. Но webpack способен на большее. Вот список ресурсов для дальнейшего изучения возможностей сборщика:

Пожалуйста, оставьте ваши комментарии по текущей теме материала. За комментарии, лайки, отклики, дизлайки, подписки низкий вам поклон!

Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.

Перед изучением новой технологии задайте себе два вопроса:

Зачем нужен этот инструмент?
Какие задачи он выполняет?

Зачем нужен вебпак?

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

Какие проблемы решает вебпак?

Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.

Это не только утомительно, но и подвержено ошибкам. Важно не только не забыть про какой-нибудь скрипт, но и расположить их в правильном порядке. Если загрузить скрипт, зависящий от React, до загрузки самого React, приложение сломается. Вебпак решает эти задачи. Не нужно беспокоиться о последовательном включении всех скриптов.

Как мы скоро узнаем, сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.

Установка вебпака

После инициализации проекта с помощью npm, для работы вебпака нужно установить два пакета — webpack и webpack-cli .

webpack.config.js

После установки указанных пакетов, вебпак нужно настроить. Для этого создается файл webpack.config.js , который экспортирует объект. Этот объект содержит настройки вебпака.

Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:

Точка входа приложения
Преобразования, которые необходимо выполнить
Место, в которое следует поместить сформированный бандл

Точка входа

Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является index.js. Это может выглядеть так:

Если мы сообщим вебпаку путь до этого файла, он использует его для создания графа зависимостей приложения. Для этого необходимо добавить свойство entry в настройки вебпака со значением пути к главному файлу:

Преобразования с помощью лоадеров (loaders)

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

По умолчанию при создании графика зависимостей на основе операторов import / require() вебпак способен обрабатывать только JavaScript и JSON-файлы.

Едва ли в своем приложении вы решитесь ограничиться JS и JSON-файлами, скорее всего, вам также потребуются стили, SVG, изображения и т.д. Вот где нужны лоадеры. Основной задачей лоадеров, как следует из их названия, является предоставление вебпаку возможности работать не только с JS и JSON-файлами.

Первым делом нужно установить лоадер. Поскольку мы хотим загружать SVG, с помощью npm устанавливаем svg-loader.

Информация о лоадере состоит из двух частей. Первая — тип обрабатываемых файлов ( .svg в нашем случае). Вторая — лоадер, используемый для обработки данного типа файлов ( svg-inline-loader в нашем случае).

Теперь мы можем импортировать SVG-файлы. Но что насчет наших CSS-файлов? Для стилей используется css-loader .

Теперь мы можем импортировать как SVG, так и CSS-файлы. Однако для того, чтобы наши стили работали корректно, нужно добавить еще один лоадер. Благодаря css-loader мы можем импортировать CSS-файлы. Но это не означает, что они будут включены в DOM. Мы хотим не только импортировать такие файлы, но и поместить их в тег <style> , чтобы они применялись к элементам DOM. Для этого нужен style-loader .

Обратите внимание, что поскольку для обработки CSS-файлов используется два лоадера, значением свойства use является массив. Также обратите внимание на порядок следования лоадеров, сначала style-loader , затем css-loader . Это важно. Вебпак будет применять их в обратном порядке. Сначала он использует css-loader для импорта './styles.css' , затем style-loader для внедрения стилей в DOM.

Лоадеры могут использоваться не только для импорта файлов, но и для их преобразования. Самым популярным является преобразование JavaScript следующего поколения в современный JavaScript с помощью Babel. Для этого используется babel-loader .

Существуют лоадеры почти для любого типа файлов.

Точка выхода

Теперь вебпак знает о точке входа и лоадерах. Следующим шагом является указание директории для бандла. Для этого нужно добавить свойство output в настройки вебпака.

Весь процесс выглядит примерно так:

Вебпак получает точку входа, находящуюся в ./app/index.js
Он анализирует операторы import / require и создает граф зависимостей
Вебпак начинает собирать бандл, преобразовывая код с помощью соответствующих лоадеров
Он собирает бандл и помещает его в dist/index_bundle.js

Плагины (plugins)

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

Давайте рассмотрим пример.

HtmlWebpackPlugin

Основной задачей вебпака является генерация бандла, на который можно сослаться в index.html .

HtmlWebpackPlugin создает index.html в директории с бандлом и автоматически добавляет в него ссылку на бандл.

Мы назвали бандл index_bundle.js и поместили его в dist . HtmlWebpackPlugin создаст новый файл index.html в директории dist и добавит в него ссылку на бандл — <script src='index_bundle.js'></script> . Здорово, правда? Поскольку index.html генерируется HtmlWebpackPlugin , даже если мы изменим точку выхода или название бандла, HtmlWebpackPlugin получит эту информацию и изменить содержимое index.html .

Как нам использовать этот плагин? Как обычно, сначала его нужно установить.

Далее добавляем в настройки вебпака свойство plugins .

Создаем экземпляр HtmlWebpackPlugin в массиве plugins .

EnvironmentPlugin

Если вы используете React, то захотите установить process.env.NODE_ENV в значение production перед разворачиванием (деплоем) приложения. Это позволит React осуществить сборку в режиме продакшна, удалив инструменты разработки, такие как предупреждения. Вебпак позволяет это сделать посредством плагина EnvironmentPlugin . Он является частью вебпака, так что его не нужно устанавливать.

Теперь в любом месте нашего приложения мы можем установить режим продакшна с помощью process.env.NODE_ENV .

HtmlWebpackPlugin и EnvironmentPlugin — это лишь небольшая часть системы плагинов вебпака.

Режим (mode)

В процессе подготовки приложения к продакшну, необходимо выполнить несколько действий. Мы только что рассмотрели одно из них — установку process.env.NODE_ENV в значение production . Другое действие заключается в минификации кода и удалении комментариев для уменьшения размера бандла.

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

Обратите внимание, что мы удалили EnvironmentPlugin . Дело в том, что после установки mode в значение production вебпак автоматически присваивает process.env.NODE_ENV значение production . Это также минифицирует код и удаляет предупреждения.

Запуск вебпака

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

У нас есть файл package.json , в котором мы можем создать script для запуска webpack .

Теперь при выполнении команды npm run build в терминале будет запущен вебпак, который создаст оптимизированный бандл index_bundle.js и поместит его в dist .

Режимы разработки и продакшна

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

При сборке для продакшна, мы хотим все оптимизировать, насколько это возможно. В случае с режимом разработки верно обратное.

Для переключения между режимами необходимо создать два скрипта в package.json .

npm run build будет собирать продакшн-бандл.

npm run start будет запускать сервер для разработки и следить за изменениями файлов.

Если помните, мы установили mode в значение production в настроках вебпака. Однако теперь нам это не нужно. Мы хотим, чтобы переменная среды имела соответствующее значение в зависимости от выполняемой команды. Немного изменим скрипт build в package.json .

Если у вас Windows, то команда будет такой: "SET NODE_ENV='production' && webpack" .

Теперь в настроках вебпака мы можем менять значение mode в зависимости от process.env.NODE_ENV .

Для сборки готового бандла для нашего приложения мы просто запускаем npm run build в терминале. В директории dist создаются файлы index.html и index_bunlde.js .

Сервер для разработки

Когда речь идет о разработке приложения принципиально важное значение имеет скорость. Мы не хотим презапускать вебпак и ждать новую сборку при каждом изменении. Вот где нам пригодится пакет webpack-dev-server .

Как следует из названия, это вебпак-сервер для разработки. Вместо создания дирекории dist , он хранит данные в памяти и обрабатывает их на локальном сервере. Более того, он поддерживает живую перезагрузку. Это означает, что при любом изменении webpack-dev-server пересоберет файлы и перезапустит браузер.

Все, что осталось сделать, это добавить скрипт start в package.json .

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

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

команда «webpack-dev-server» теперь выглядит как «webpack-serve»
отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и < stream: «stream-browserify» >в качестве алиаса в настройки вебпака

Что такое вебпак?

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

Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

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

Установка

Создаем директорию проекта и инициализируем его:

Устанавливаем webpack и webpack-cli в качестве зависимостей для разработки:

— сборщик модулей и ресурсов — интерфейс командной строки для вебпака

Создаем директорию «src» для хранения файлов приложения. Я начну с создания простого файла «index.js»:

Отлично, у нас имеется Node.js-проект с установленными основными пакетами и файл «index.js». Займемся настройкой вебпака.

Базовая настройка

Приступим к настройке сборщика. Создаем файл «webpack.config.js» в корневой директории проекта.

Точка входа

Прежде всего, необходимо определить точку входа приложения, т.е. то, какие файлы вебпак будет компилировать. В приведенном примере мы определяем точку входа как «src/index.js»:

Точка выхода

Минимальная настройка для сборки проекта готова. Добавляем скрипт «build» в файл «package.json», запускающий команду «webpack»:

В директории «dist» создается файл «index.bundle.js». Файл не изменился, но мы успешно осуществили сборку проекта.

Плагины

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

Плагин создания HTML на основе шаблона

У нас есть готовая сборка, но она бесполезна без разметки, которая загрузит сборку в качестве скрипта. Поскольку мы хотим, чтобы такой HTML-файл генерировался автоматически, используем html-webpack-plugin.

Создаем файл «template.html» в директории «src». Мы можем добавить в шаблон переменные и другую информацию. Добавим переменную «title», в остальном шаблон будет выглядеть как обычный HTML-файл с контейнером с идентификатором «root»:

Добавляем в настройки вебпака свойство «plugins», где определяем плагин, название выходного файла (index.html) и шаблон:

Добавим немного контента в DOM. Изменим содержимое файла «index.js» и перезапустим сборку.

В открывшейся вкладке браузера вы должны увидеть заголовок, гласящий «Как интересно!». Также обратите внимание на уменьшение размера файла.

Очистка

Установим clean-webpack-plugin, очищающий директорию «dist» при каждой сборке проекта. Это позволяет автоматически удалять старые файлы, ставшие ненужными.

Модули и загрузчики

Вебпак использует загрузчики для разбора файлов, загружаемых с помощью модулей. Это могут быть JavaScript-файлы, статические ресурсы, такие как изображения или стили и компиляторы, такие как TypeScript и Babel. Вебпак 5 имеет несколько встроенных загрузчиков ресурсов.

В нашем проекте имеется HTML-файл, который загружает некоторый скрипт, но больше он ничего не делает. Давайте подумаем, чего мы хотим от сборщика?

Компиляция новейших возможностей JavaScript в код, совместимый со всеми или большинством браузеров
Импорт стилей и преобразование SCSS в CSS
Импорт изображений и шрифтов
Настройка React или Vue (опционально)

Для начала настроим Babel для компиляции JavaScript.

Babel (JavaScript)

Babel — это инструмент, позволящий использовать будущий JavaScript сегодня.

Мы собираемся определить правило, согласно которому все файлы с расширением «js» в проекте (кроме файлов, содержащихся в директории «node_modules») будут транспилироваться с помощью babel-loader. Для работы Babel требуется несколько зависимостей:

— транспиляция файлов с помощью Babel и вебпака — транспиляция ES2015+ в обратно совместимый JavaScript — полезные стандартные настройки Babel — пример кастомной конфигурации Babel (установка свойств экземпляров в теле класса, а не в его конструкторе)

Если вы настраиваете TypeScript-проект, то вместо babel-loader следует использовать typescript-loader для всех JavaScript-файлов, нуждающихся в транспиляции. Вы проверяете файлы с расширением «ts» и используете ts-loader.

Итак, Babel настроен, но плагин еще нет. Вы можете убедиться в этом, добавив следующий код в начало index.js:

Запускаем сборку с помощью yarn build. Теперь все работает.

Изображения

Мы хотим импортировать изображения в JavaScript-файл, но JavaScript не умеет этого делать. Чтобы убедиться в этом, создаем директорию «src/images», помещаем туда изображение и пытаемся импортировать его в файле «index.js»:

При запуске сборки будет выброшено исключение:

Как отмечалось ранее, вебпак обладает некоторыми встроенными загрузчиками для работы со статическими файлами. Для изображений следует использовать тип «asset/resource». Обратите внимание, что речь идет именно о типе (type), а не о загрузчике (loader):

В директории «dist» появляется новый файл.

Шрифты и другие встраиваемые данные

Вебпак также имеет встроенный модуль для обработки некоторых встраеваемых данных, таких как шрифты и SVG. Для этого достаточно указать тип «asset/inline»:

Стили

Многие люди используют CSS-in-JS, стилизованные компоненты (styled components) и другие инструменты, позволяющие использовать стили в JavaScript.

Порой мы можем ограничиться загрузкой одного CSS-файла. Но, возможно, вы хотите использовать PostCSS, позволяющий использовать последние возможности CSS в браузере. Или вы хотите использовать препроцессор Sass.

Я хочу использовать все три — писать код на Sass, обрабатывать его с помощью PostCSS и компилировать в CSS.

— загружает SCSS и компилирует его в CSS — Node Sass — обработка CSS с помощью PostCSS — полезные настройки PostCSS — загрузка стилей — применение стилей к элементам DOM

Как и для Babel, для PostCSS требуется отдельный файл настроек:

Для проверки работоспособности названных инструментов создадим файл «src/styles/main.scss», содержащий переменные Sass и пример использования PostCSS (lch):

Импортируем этот файл в index.js и добавляем 4 загрузчика. Загрузчики используются вебпаком справа налево, так что последним должен быть sass-loader, затем PostCSS, затем CSS и, наконец, style-loader, который применяет скомпилированные стили к элементам DOM:

После сборки вы заметите, что Sass и PostCSS применились к DOM.

Обратите внимание, что мы установили настройки для режима разработки. Для продакшна следует использовать MiniCssExtractPlugin вместо style-loader, который экспортирует минифицированный CSS.

Разработка

Каждый раз набирать команду yarn build (npm run build) при необходимости повторной сборки проекта может быть утомительным. Чем больше проект, тем дольше он будет собираться. Поэтому необходимо иметь два файла настроек вебпака:

Настройки для продакшна, включающие минификацию, оптимизацию и удаление всех карт ресурсов (source maps)
Настройки для разработки, включая запуск сервера, обновление при каждом изменении и карты ресурсов

Вместо создания директории «dist», режим разработки может предполагать хранение нужной информации в памяти.

Для этого необходимо установить webpack-dev-server.

В целях демонстрации принципов использования сервера для разработки мы можем определить соответствующие настройки в файле «webpack.config.js». На практике лучше иметь два файла настроек: один с mode: production и другой с mode: development. В специально подготовленной для вас webpack 5 boilerplate я использую webpack-merge для получения базовых настроек в виде одного файла, а специальные требования содержатся в файлах «webpack.prod.js» и «webpack.dev.js».

Мы добавили mode: development и свойство «devServer». В данном свойстве содержится несколько стандартных настроек — номер порта (8080), автоматическое открытие браузера, использование hot-module-replacement, для которого нужен webpack.HotModuleReplacement(). Это позволит модулям обновляться без полной перезагрузки страницы, т.е. если изменятся отдельные стили, только они будут обновлены, вам не потребуется перезагружать JavaScript, что очень сильно ускоряет разработку.

Для запуска сервера используется команда «webpack serve»:

После запуска этой команды браузер откроется по адресу localhost:8080. Теперь вы можете изменять Sass и JavaScript и они будут обновляться на лету.

Заключение

Надеюсь, данная статья помогла вам начать знакомство с вебпаком. Для облегчения решения ваших повседневных задач мной разработан webpack 5 boilerplate с Babel, Sass, PostCss, оптимизацией для продакшна и сервером для разработки. Взяв его за основу, вы легко сможете настроить вебпак для работы с React, Vue или TypeScript.

Webpack является одним из самых мощных и гибких инструментов для сборки frontend. Она содержит основные понятия, однако для начала их будет достаточно.

Инструменты сборки стали неотъемлемой частью веб-разработки, в основном из-за возрастающей сложности JS-приложений. Бандлеры позволяют нам упаковывать, компилировать, организовывать множество ресурсов и библиотек, необходимых для современного веб-проекта.
В этом гайде будет рассмотрен webpack, мощный бандлер с открытым исходным кодом, который может обрабатывать огромное количество различных задач. Автор статьи покажет вам как писать модули, бандл код, использовать некоторые плагины загрузчика. Пособие подойдет для тех, кто только начинает изучать этот инструмент, однако уже имеет некоторые знания JS.

Как и во многих других аспектах веб-разработки, здесь нет стандартного набора инструментов, который нужно использовать. Прямо сейчас разработчики могут выбирать между webpack, Gulp, Browserify, NPM scripts, Grunt и еще десятком других. Можно, конечно, провести их глубокое сравнение, но в целом все эти инструменты очень похожи, поэтому чаще всего дело сводится к личным предпочтениям и типу проекта, над которым вы работаете.
Тут некоторые плюсы и минусы, которые помогут вам решить, подходит ли этот бандлер именно вам:

Великолепен для работы с одностраничными приложениями
Воспринимает как require()- так и import-синтаксисы модуля
Позволяет осуществлять продвинутое разделение кода для более быстрой разработки с помощью React, Vue.js и подобных фреймворков
Наиболее популярный инструмент разработки по версии обзора JS в 2016 году

Не подойдет для новичков
Работа с файлами CSS, картинками и другими не JS ресурсами по началу сбивает с толку
Документация могла бы быть лучше
Очень много изменений, большинство гайдов 2016 уже устарели

Самый простой способ установки это использовать менеджер пакетов. Мы будем пользоваться npm, но вы можете использовать Yarn или любую другую альтернативу. В обоих случаях вам нужно иметь Node.js и готовый к работе package .json на компьютере.
Предпочтительнее устанавливать его локально без тега –g . Это поможет каждому, кто работает над вашим проектом, быть уверенным в том, что у вас одна и та же версия webpack’a.

После того как вы установили бандлер, лучше всего запустить его с помощью скрипта Node.js. Добавьте эти строки в ваш package.json.

Теперь с помощью вызова npm run build из командной строки мы можем сделать webpack bundle нашими файлами ( -р означает создание и уменьшает связанный код). С запуском npm run watch начнется процесс, который автоматически свяжет наши файлы в случае изменения любого из них.
Последняя часть нашей настройки — это указать webpack, какие файлы связывать. Рекомендуем сделать это путем создания config файла.

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

В корневой директории вашего проекта добавьте файл webpack.config.js.

webpack.config.js

entry указывает webpack’y, какой из JavaScript файлов является основным. Существует множество различных стратегий настройки входных точек, но в большинстве случаев достаточно одной записи. В output мы указываем имя нашего пакета и путь к нему. После запуска webpack мы получим весь наш JavaScript в файле bundle.js. Это единственный файл, который мы будем связывать в нашем HTML:

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

Webpack предоставляет несколько способов работы с модулями, и большую часть времени вы можете свободно работать с любым из них. Для этого урока мы будем использовать синтаксис импорта ES6.

Мы хотим добавить модуль, который приветствует наших пользователей. Мы создаем файл greeter.js и экспортируем простую функцию.

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

Теперь, когда мы запускаем bundler с npm run build и открываем наш HTML в браузере, мы видим следующее:

Наша точка входа и наш модуль greeter были скомпилированы в один файл, называемый bundle.js, и он был выполнен браузером. Вот простая схема того, что происходит на данный момент:

Мы хотим, чтобы наше приложение указывало, в какой день недели он встречает пользователей. Для этого мы будем использовать moment.js, импортируя его непосредственно в наш модуль greeter.
Сначала мы должны установить библиотеку через npm:

Затем в нашем модуле приветствия мы просто импортируем библиотеку точно так же, как мы импортировали локальные модули в предыдущую точку:

Наша блок-схема теперь выглядит так:

Примечание. Существуют и другие, более продвинутые методы для включения библиотек, но они выходят за рамки этой статьи. Подробнее о них можно прочитать здесь.

Загрузчики - это способ webpack выполнять задачи во время компоновки и до или после обработки файлов каким-либо образом. Например, они могут компилировать TypeScript, загружать компоненты Vue.js, отображать шаблоны и многое другое. Большинство загрузчиков написаны сообществом, поскольку список популярных загрузчиков можно посмотреть здесь.
Предположим, мы хотим добавить линтер к нашему проекту, который проверяет наш код JS на наличие ошибок. Мы можем это сделать, включив загрузчик JSHint, который будет перехватывать все виды плохого кода.
Сначала нам нужно установить JSHint и загрузчик webpack JSHint:

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

webpack.config.js

Теперь, когда webpack запущен, он покажет нам список предупреждений в терминале (которые мы проигнорируем):

Поскольку moment.js находится в папке node_modules, он не будет линтирован загрузчиком JSHint:

На этом мы заканчиваем наше знакомство с webpack! Поскольку это урок для новичков, мы попытались охватить только самые полезные и обязательные концепции инструмента. Мы надеемся, что руководство было полезным, не слишком запутывающим, и, исходя из названия, займет 15 минут.
В ближайшем будущем автор планирует добавить вторую часть к этому учебному пособию, объясняя, как работать с модулями CSS и другими более продвинутыми функциями. Тем временем, если вы хотите больше узнать о webpack (и есть намного больше), он рекомендует проверить эти потрясающие ресурсы:

Читайте также: