У нас есть файл package.json, в котором мы можем создать script для запуска webpack.
"scripts": {
"build": "webpack"
}
Теперь при выполнении команды npm run build в терминале будет запущен вебпак, который создаст оптимизированный бандл index_bundle.js и поместит его в dist.
Режимы разработки и продакшна
В целом, мы закончили с вебпаком. Напоследок давайте рассмотрим, как переключаться между режимами.
При сборке для продакшна, мы хотим все оптимизировать, насколько это возможно. В случае с режимом разработки верно обратное.
Для переключения между режимами необходимо создать два скрипта в package.json.
npm run build будет собирать продакшн-бандл.
npm run start будет запускать сервер для разработки и следить за изменениями файлов.
Если помните, мы установили mode в значение production в настроках вебпака. Однако теперь нам это не нужно. Мы хотим, чтобы переменная среды имела соответствующее значение в зависимости от выполняемой команды. Немного изменим скрипт build в package.json.
"scripts": {
"build": "NODE_ENV='production' webpack",
}
Если у вас Windows, то команда будет такой: "SET NODE_ENV='production' && webpack".
Теперь в настроках вебпака мы можем менять значение mode в зависимости от process.env.NODE_ENV.
...
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
Для сборки готового бандла для нашего приложения мы просто запускаем npm run build в терминале. В директории dist создаются файлы index.html и index_bunlde.js.
Сервер для разработки
Когда речь идет о разработке приложения принципиально важное значение имеет скорость. Мы не хотим презапускать вебпак и ждать новую сборку при каждом изменении. Вот где нам пригодится пакет webpack-dev-server.
Как следует из названия, это вебпак-сервер для разработки. Вместо создания дирекории dist, он хранит данные в памяти и обрабатывает их на локальном сервере. Более того, он поддерживает живую перезагрузку. Это означает, что при любом изменении webpack-dev-server пересоберет файлы и перезапустит браузер.
Устанавливаем пакет.
npm i webpack-dev-server -D
Все, что осталось сделать, это добавить скрипт start в package.json.
"scripts": {
"build": "NODE_ENV='production' webpack",
"start": "webpack-dev-server"
}
Теперь у нас имеется две команды: одна для запуска сервера для разработки, другая для сборки готового бандла.