Ранее в Части 3 мы говорили о линтинге, что это такое и как мы можем интегрировать его в наш рабочий процесс через веб-пакет. Сегодня мы поговорим о webpack-dev-server, о том, как он может нам помочь и как просто настроить его для нашего проекта, так что давайте начнем!
Для контекста давайте вспомним, как мы сейчас работаем над нашим проектом:
Во-первых - отредактируйте код;
Второе — запустить скрипт сборки;
Третий — обновите браузер, чтобы увидеть изменения.
Просто и ничего сложного, но его можно улучшить, и мы можем сделать это с помощью webpack-dev-server. Как следует из названия, webpack-dev-server — это сервер, который будет обслуживать наш код в соответствии с конфигурацией webpack. Мало того, он автоматически перестроит наш код при сохранении файла, а также автоматически обновит наш браузер при каждой перестройке, круто, правда?! Итак, что нам нужно, чтобы это заработало? Сначала устанавливаем его:
$ npm install webpack-dev-server --save-dev
После установки откройте файл package.json и отредактируйте scripts, добавив следующую команду start:
“scripts”: {
“start”: “node_modules/.bin/webpack-dev-server --progress”,
// ...
И… Прежде чем продолжить, поскольку нам не понадобится index.html в его текущей форме, мы выполним некоторую очистку и просто удалим его.
Итак, с этими 3 простыми шагами мы почти закончили! Теперь просто запустите свой сервер, запустив:
$ npm start
Обратите внимание, что нам не нужно писать npm run start, потому что npm распознает start как имя команды скрипта, а run необходим. для пользовательских имен команд скрипта, которые npm не распознает, например build или clear. Теперь, если все прошло нормально, вы должны увидеть что-то вроде этого:
После запуска сервера укажите в браузере https://localhost:8080/webpack-dev-server/bundle и вуаля, теперь мы должны увидеть нашу страницу (это возможно, потому что сервер автоматически загружает для нас связанный файл)! Теперь оставьте браузер открытым и попробуйте отредактировать src/index.js (например, изменить hello world! на hello Universe!) и сохранить его. Ваш браузер должен автоматически обновиться с помощью новый код. Кроме того, поскольку наш веб-пакет настроен на анализ нашего кода, автоматические сборки также будут анализировать его (попробуйте написать неверный код и сохранить файл, чтобы посмотреть, что произойдет). Честно говоря, как же это круто?!
И это все на сегодня. Эта статья была короткой и оказалась очень тривиальной в настройке (в контексте нашего проекта), но я чувствую, что это важный мир, чтобы заставить все работать вместе.
Сегодняшний код опубликован здесь.
Спасибо за чтение!
