webpack

🎓 webpack

	Сборщик модулей

Webpack создает граф зависимостей приложения

Каждый модуль приложения может иметь зависимости - модули, необходимые для его нормальной работы

Модули ( ES6 ) - это файлы с расширением js, содержащие код

---

Установка

Пакет webpack устанавливается с помощью npm

Команда

npm install -g webpack webpack-cli

установит webpack и webpack-cli глобально

Сокращение для команды install ( i )

npm i webpack webpack-cli --save-dev

установит webpack и webpack-cli в текущей папке

🎓 webpack-cli

⚠️ раньше по умолчанию устанавливался как часть самого Webpack

Теперь вынесен в отдельный модуль, и его нужно устанавливать

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

🎓 webpack.config.js

Из коробки webpack не потребует от вас использования файла конфигурации

Однако при этом предполагается, что точкой входа вашего проекта является src/index.js, а результат будет выведен в dist/main.js, минимизированный и оптимизированный для производства

Обычно проектам нужна расширенная функциональность

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

--config

Если вы хотите использовать различные файлы конфигурации в зависимости от ситуации, это можно настроить с помощью флага --config

в командной строке:

webpack --config prod.config.js

📝 в файле package.json:

"scripts": {
    "build": "webpack --config prod.config.js"
}