Вашему вниманию — Webpack 4
Всем привет! На этот раз на повестке дня перевод статьи 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 в будущем? Пишите в комментариях.
Спасибо за внимание.
