Сборка в Webpack
Webpack
позволяет регулировать режим сборки проекта. Существуют три режима:
development
для разработки, в этом режиме собирается код удобным для разработки образомproduction
для прода, в этом режиме код будет минифицирован, чтобы уменьшить его размер и увеличить скорость загрузкиnone
режим по умолчанию, без оптимизации и подробных отчётов об ошибках и предупреждениях
Смена режима сборки
Режим сборки регулируется в файле конфигурации с помощью настройки mode
.
Давайте укажем режим разработки development
:
webpack.config.jsexport default {
mode: 'development',
entry: './src/index.js',
};
А теперь укажем продакшн режим production
:
webpack.config.jsexport default {
mode: 'production',
entry: './src/index.js',
};
Сборки через scripts
Можно задавать режим сборки не файле конфигурации, а через настройку scripts
файла package.json
. Сейчас в этом файле у нас расположена команда build
, которая собирает проект в том режиме, который указан в файле конфигурации:
package.json"scripts": {
"build": "webpack"
}
Давайте добавим команду, собирающую проект в режиме разработки и продакшн:
package.json"dev": "webpack --mode development"
"prod": "webpack --mode production"
В итоге наш файл package.json
станет выглядеть следующим образом:
package.json"scripts": {
"build": "webpack",
"dev": "webpack --mode development",
"prod": "webpack --mode production",
}
Теперь в терминале мы сможем различными командами вызывать сборку в различных режимах:
npm run dev
npm run prod
Автоматическая сборка
Можно сделать так, чтобы Webpack
отслеживал изменения файлов проекта и сам каждый раз запускал сборку. Для этого в scripts
нужно внести следующую настройку:
package.json"watch": "webpack --mode development --watch"
В итоге наш файл package.json
станет выглядеть следующим образом:
package.json"scripts": {
"build": "webpack",
"dev": "webpack --mode development",
"prod": "webpack --mode production",
"watch": "webpack --mode development --watch"
}
Запустить отслеживание файлов можно следующей командой:
npm run watch