Вашему вниманию — Webpack 4

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

image

Команда разработчиков 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


image

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

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

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

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

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

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

image
Опция «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 в будущем? Пишите в комментариях.

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

© Habrahabr.ru