
У нас есть файл 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"
}
Теперь у нас имеется две команды: одна для запуска сервера для разработки, другая для сборки готового бандла.