Как создать файл конфигурации webpack

Обновлено: 14.01.2025

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

Webpack — инструмент веб-разработчика, который соединяет JavaScript- и CSS-файлы в единое целое — файл, который часто называется «bundle» (с англ. «пачка»). В этой статье представлена инструкция по настройке среды для проекта на JavaScript и Sass.

Устанавливаем Node и npm

Webpack построен на Node.js, поэтому для его работы требуется запуск как Node, так и npm (node package manager — менеджер пакетов Node). Порядок действий:

Скачиваем и устанавливаем Node.js с официального сайта.
Для установки npm открываем командную строку (например, Терминал MacOS) и выполняем команду:

При создании файла package.json просто нажимайте «Enter»: настройки по умолчанию приемлемые. Кроме того, при необходимости можно их изменить.

Когда package.json создан, вы увидите небольшой документ с настройками. В нём хранится всё, что нужно знать о себе проекту.

Добавляем Webpack

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

После чего произойдёт 3 вещи:

Имя «Webpack» добавится в package.json в качестве devDependency (будет использоваться при разработке, но не в рабочей версии). Для этого указывается ключ -D .
Новый каталог node_modules добавится к проекту.
Webpack (файлы модуля) появятся в каталоге node_modules .

Добавляем Webpack как скрипт

Добавляем следующий скрипт в package.json :

Теперь запускаем Webpack-версию проекта через npm, выполнив npm run build и npm run start в командной строке.

В документации Webpack глобальную установку не рекомендуют. Она вынуждает разработчика использовать во всех проектах определенную версию Webpack и приводит к краху, если использовать другую версию.

Файловая структура

Создаём новый каталог src в корне проекта.
Создаём файл src/app.js , в котором укажем путь к нашим .js и .scss файлам.
Создаём файл index.html в корне проекта.
Делаем ссылку на JavaScript-файл перед тегом </body> в index.html :

Конфигурация Webpack

Создаём файл webpack.config.js в корне проекта.
Копируем и вставляем следующий фрагмент кода, который подскажет Webpack, что от него нужно.

«Entry» и «Output»

«Output» (выходные данные) . Это место, куда Webpack будет размещать готовый файл. Он будет называться bundle.js и появляться в каталоге dist («distribution» — с англ. «размещение»).

PricewaterhouseCoopers , Удалённо , По итогам собеседования

Изменять имена можно, но при этом необходимо синхронизировать изменения в webpack.config.js , файлах, каталогах и связанных скриптах в HTML.

Добавляем JavaScript

Теперь напишем код для последующей обработки с помощью Webpack:

В каталоге src создаем каталог js .
Внутри js создаем JavaScript-файл rainbows.js .
Пишем код в rainbows.js . Например:
Создаём другой JavaScript-файл — unicorns.js в каталоге js .
Пишем код в unicorns.js . Например:
Добавляем следующий код в app.js , чтобы импортировать rainbows.js и unicorns.js :
Запускаем Webpack в Терминале командой:

Теперь появился каталог dist !

Добавляем SCSS

Создаём каталог scss в src .
Создаём файл base.scss в каталоге scss .
Добавляем CSS-код в base.scss . Например:
Добавляем следующий код в src/app.js , чтобы импортировать base.scss :

Чтобы Webpack прочитал sass-стили, необходимо добавить дополнительные загрузчики.

Добавляем загрузчики стилей

1. Выполняем команду в Терминале, чтобы установить style-loader, css-loader, sass-loader, node-sass, extract-text-webpack-plugin.
2. Добавляем плагин «Extract Text Plugin» в начало webpack.config.js . Он отвечает за перемещение CSS в отдельный файл.
3. Теперь указываем Webpack, что необходимо обработать .scss файлы. Он выполнит их через «Extract Text Plugin», CSS- и Sass-загрузчик. Вставляем следующий код после фигурной скобки группы «output». Обратите внимание на запятую!
4. Делаем ссылку на «Extract Text Plugin» прямо перед последней фигурной скобкой. Это даст знать Webpack, что все CSS-файлы необходимо соединить в отдельный файл и назвать его «style.css».
Webpack.config.js теперь выглядит так:

Расскажем HTML про всё!
1. Делаем ссылку на CSS-файл в <head> .
2. Запускаем Webpack в Терминале.
3. Открываем index.html в браузере. Если фон розовый, значит, CSS загрузился.
4. Благодаря команде Webpack watch , которую мы добавили в npm-скрипты, обработка происходит после каждого изменения. Она будет производиться автоматически после каждого сохранения исходного файла в редакторе.
5. Вносим изменения в base.scss . Например:
6. Обновляем страницу в браузере. Цвет фона меняется на оранжевый.
Добавляем и редактируем файлы
1. Создаём файл typography.scss в каталоге src/scss .
2. Добавляем в него немного кода SCSS. Например:
3. Прописываем ссылку на typography.scss в src/app.js .
4. Обновляем страницу в браузере. Типографика изменилась? Да, он работает!
Заключение

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

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

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:

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

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

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 (и есть намного больше), он рекомендует проверить эти потрясающие ресурсы:

Большинство разработчиков так или иначе взаимодействовали с 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 — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.

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

Он также способен выполнять множество иных операций:
- помогает собрать воедино ваши ресурсы
- следит за изменениями и повторно выполняет задачи
- может выполнить транспиляцию JavaScript следующего поколения до более старого стандарта JavaScript (ES5) с помощью Babel, что позволит использовать новейшие функции JavaScript, не беспокоясь о том, поддерживает их браузер или нет
- может выполнить транспиляцию CoffeeScript в JavaScript
- может конвертировать встроенные изображения в data:URI
- позволяет использовать require() для CSS файлов
- может запустить webpack-dev-server (в нём встроен локальный сервер и livereload (“живая перезагрузка браузера”))
- может работать с Hot Module Replacement (замена горячего модуля)
- может разделить выходной файл (output file) на несколько файлов, чтобы избежать медленной загрузки страницы из-за большого размера JS-файла
- может выполнить Tree Shaking
Webpack не ограничивается одним лишь фронтендом, его также успешно применяют в бэкенд разработке на Node.js.

У Webpack есть предшественники, у которых он перенял многие идеи. Основное различие заключается в том, что те инструменты известны как task runners (такс-раннеры), в то время как Webpack ничто иное, как сборщик модулей.

Webpack — э т о более целенаправленный инструмент. Вам достаточно указать точку входа в ваше приложение (это может быть даже HTML-файл с тегами <script>), а webpack проанализирует файлы и объединит их в один выходной JavaScript-файл, содержащий все необходимое для запуска приложения.

Webpack может быть установлен глобально или локально для каждого проекта.

Глобальная установка

Глобальная установка с помощью Yarn:

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

Локальная установка

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

Установка с помощью Yarn:

После этого добавьте эти строчки в свой package.json файл:

Как только все будет сделано, вы можете запустить Webpack, набрав:

в корневом каталоге проекта.

По умолчанию, Webpack (начиная с 4-й версии) не требует никакой настройки, если вы соблюдаете эти правила:
- точкой входа вашего приложения является ./src/index.js
- вывод (output) размещается в ./dist/main.js
- Webpack работает в production mode (режим производства)
Конечно, если понадобится, вы сможете настроить каждую мельчайшую деталь в Webpack. Конфигурационный файл Webpack - webpack.config.js хранится в корневой директории проекта.

Точка входа

По умолчанию, точкой входа является ./src/index.js . Нижеприведенный пример использует файл ./index.js в качестве входной точки.

Вывод (output)

По умолчанию, вывод размещается в ./dist/main.js . В нижеприведенном примере, результат работы в Webpack генерируется в файле app.js :

С помощью Webpack можно использовать оператор import или require в своем JavaScript коде для того, чтобы подключать файлы любого типа (например, CSS).

В Webpack загрузчики являются аналогами задач (tasks) в Grunt и Gulp. Они принимают содержимое файлов, а затем преобразуют его необходимым образом и включают результат преобразования в общую сборку. Например, они могут компилировать TypeScript, загружать компоненты Vue.js и многое другое.

Например, в своем коде вы можете использовать:

указав конфигурацию данного загрузчика в файле webpack.config.js :

Регулярное выражение применяет данный загрузчик только к CSS файлам.

У загрузчика есть параметры:

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

Порядок выполнения перевернут (последнее выполняется первым).

Так сколько всего существует загрузчиков? Очень много! Здесь вы сможете найти полный список.

Самым часто используемым загрузчиком является Babel — он используется для транспиляции современного JavaScript в ES5:

Данный пример заставляет Babel предварительно обрабатывать все наши React/JSX файлы:

Здесь вы можете увидеть параметры babel-loader .

Плагины — это почти то же самое, что и загрузчики, но под стероидами. Они могут сделать то, что не могут загрузчики. Ко всему прочему, Webpack построен на системе плагинов, которые вы используете в своем файле конфигурации.

Рассмотрим следующий пример:

Плагин HTMLWebpackPlugin автоматически создает HTML-файл с уже подключенным скриптом.

Здесь доступно множество плагинов.

Еще один полезный плагин, CleanWebpackPlugin , мы можем использовать перед перегенерацией файлов, чтобы очистить нашу папку dist/ и получить аккуратный файл с конфигурацией.

Данные режимы (появившиеся в 4-й версии Webpack) настраивают среду, в которой будет работать Webpack. Режим может быть настроен на development или production (по умолчанию стоит production ).

Режим production работает медленнее, чем development , так как ему нужно создать более оптимизированный бандл. Полученный JavaScript файл меньше по размеру, поскольку многое из режима development в нем отсутствует.

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