Часы Webpack и BrowserSync

Часы Webpack и BrowserSync

Пока все было бы здорово, если бы вы нас не задерживали.

Теперь при каждом внесении изменений нам нужно запускать хотя бы сценарий разработки, ждать, пока веб-пакет переведет файлы, а затем проверять статус сайта в браузере. Это занимает очень много времени.

Вот почему разработчики веб-пакета сделали возможным его постоянную работу. И когда он обнаруживает изменение в наших файлах — переводить их как можно быстрее самостоятельно.

Также добавим в package.json следующий скрипт:

"часы": "npm run dev — -w"

Название еwatch, и что заставляет enpm run dev — -w.

Получается одна рекурсия — npm run watch выполнит npm run dev. Однако наконец-то у нас есть— -w.

Читать также:  Хук GIT postmerge для объединения и минимизации JavaScript

Оба дефиса означают, что информация после них передается в качестве дополнительных параметров в предыдущий сценарий. Итак, chenpm run dev — -w all переводится как webpack —mode = development -w.

Мы все равно могли бы это ввести. Однако с помощью рекурсии мы гарантируем, что если мы добавим больше аргументов в сценарий разработчика, не будет необходимости повторять их и смотреть. Вместо этого они будут "кусаться" автоматически.

Попробуйте добавить код в файл src / js / functions.js. Например:

предупреждение (‘JavaScript’);

К тому времени, как вы сохраните файл, почти сразу веб-пакет будет готов для транскрипции. Где вы можете загрузить страницу index.html и посмотреть результат.

BrowserSync

Еще одна вещь, которую мы можем использовать для оптимизации нашей работы, — это BrowserSync..

Читать также:  Массивы в PHP (часть 1)

Это инструмент Node.JS, который позволяет автоматически перезагружать, не обновляя сайт вручную..

Это особенно удобно, если вы работаете на 2-х мониторах. На одном вы смотрите на свой сайт, а на другом вы пишете CSS. Пока вы сохраняете файл и видите изменения, даже не меняя фокуса в редакторе браузера..

Для этого нам необходимо установить:

npm install browser-sync browser-sync-webpack-plugin —save-dev

Затем в webpack.config.js нужно загрузить:

const BrowserSyncPlugin = require (‘browser-sync-webpack-plugin’);

И в плагины добавить:

новый BrowserSyncPlugin ({хост: ‘localhost’, сервер: {baseDir: » ‘}}})

При вызове часов BrowserSync должен запускаться автоматически.

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?