https://habrahabr.ru/post/347812/

• Системы сборки
• Node.JS
• JavaScript

Всем привет! На этот раз на повестке дня перевод статьи Valentino Gagliardi
Webpack 4 tutorial: All You Need to Know, from 0 Conf to Production Mode



Команда разработчиков Webpack этот раз изрядно потрудилась над новым поколением популярного сборщика модулей (бандлера) — webpack 4.

Репозиторий с используемым кодом здесь.

Webpack 4 как сборщик модулей с нулевой конфигурацией

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

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

Шон и команда webpack улучшили жизнь всем нам: webpack 4 больше не требует файла конфигурации по-умолчанию!

Что ж, протестируем.

Создайте новую директорию и перейдите туда:

mkdir webpack-4-quickstart && cd $_

Инициализируйте package.json:

npm init -y

Теперь пускаем в бой webpack 4 (Версия сейчас находится в стадии beta, поэтому нужно добавить next):

npm i webpack@next --save-dev

Добавим webpack-cli, живущий своей жизнью в отдельном пакете:

npm i webpack-cli --save-dev

Открываем package.json и прописываем скрипт сборки:

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

Сохраните файл, закройте. Запустите:

npm run build

Что же случилось?

ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'

Webpack 4 ищет входную точку приложения ./src! Если не знаете, почему так получилось, то опишу вкратце: входная точка — это файл, с которого webpack начинает сборку. В ранних версиях нужно было объявить ее напрямую в webpack.config.js.

Но начиная с 4-ой версии вам не нужно указывать входную точку. Она будет взята из ./src/index.js по-умолчанию!

Проверим. Создайте ./src/index.js:

console.log(`Можно я тут просто постою?`);

Снова запустите сборку:

npm run build

Вы получите файл ~/webpack-4-quickstart/dist/main.js.

Неужели нам не нужно задавать и точку выхода тоже? Именно! Ни точку входа, ни выхода. Тем более, не нужен файл конфигурации.

Я знаю, что для большинства это неудивительно: сила webpack в разделении кода. Но поверьте: ноль конфигурации ускоряет разработку в разы.

Режимы production и development

Очень часто можно встретить разделения конфига на несколько файлов.

Типичный проект может иметь:

• Конфигурацию для разработки (development), с webpack-dev-server и прочими игрушками разработчиков.
• Конфигурация для продакшена с UglifyJSPlugin, картами сайта и другим.

Пока крупные проекты продолжают использовать разделение конфигов, мы с webpack 4 сделаем все одной строкой.

Как так? Встречайте режимы production и development.

Если вы обратите внимание на вывод npm run build, то увидите красивую ошибку:


Опция ‘mode’ (режим) не была задана. Включите режим в ‘development’ или ‘production’, чтобы применить настройки по-умолчанию.

Что это значит? Будем разбираться. Откройте package.json и допишите объект скриптов, как показано ниже:

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  }

И теперь попробуем:

npm run dev

Взглянем на ./dist/main.js. Что вы видите? Да, я знаю, скучный бандл… не уменьшен. А если:

npm run build

Что теперь? Файл сборки был уменьшен. Да! Режим ‘production’ использует все виды оптимизации самостоятельно. И там не только минимизация.

С другой стороны режим разработчика (development mode) оптимизирует скорость приложения и ничего больше.

Таким образом, с 4-ым webpack’ом вы можете менять всю сборку одной строкой. Просто добавьте флажок --mode и получите результат совершенно безболезненно.

Нравятся ли вам нововведения? Чего ожидаете от webpack в будущем? Пишите в комментариях.

Спасибо за внимание.