Webpack watch и BrowserSync

Всичко до момента щеше да е супер, ако не ни бавеше.

Сега трябва при всяка промяна, която правим, да пуснем поне dev script-а, да изчакаме webpack да транспилира файловете и тогава вече да проверим в браузъра за състоянието на сайта. Това отнема страшно много време.

За това разработчиците на webpack са направили възможност той да върви постоянно. И когато засече промяна по файловете ни – да ги транспилира възможно най-бързо самичък.

Нека добавим и следния script в package.json:

"watch": "npm run dev -- -w"

Името е watch, а това, което прави е npm run dev -- -w.

Получава се една рекурсия – npm run watch ще изпълни npm run dev. Обаче накрая имаме -- -w.

Двете тирета означават, че информацията след тях се подава като допълнителни параметри на предния script. Така че npm run dev -- -w се превежда до webpack --mode=development -w.

Можехме да го въведем и така. С рекурсията обаче се уверяваме, че ако добавим още аргументи към dev script-а, няма да има нужда да ги повтаряме и за watch. Вместо това те ще си „захапят“ автоматично.

Опитайте да добавите код към src/js/functions.js файла. Примерно:

alert('JavaScript');

Още докато запишете файла и почти моментално webpack вече ще е готов с транспилирането. При което можете да заредите index.html страницата и да видите резултата.

BrowserSync

Още нещо, с което можем да си оптимизираме работата е BrowserSync.

Това е Node.JS инструмент, който позволява без да refresh-вате сайтът си на ръка, автоматично да презарежда.

Особено удобно е, ако работите на 2 монитора. На единия си гледате сайта, а на другия си пишете CSS. Докато save-нете файла и виждате промяната, без дори да сменяте фокуса от редактора си на браузъра.

За целта трябва да инсталираме:

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

После в webpack.config.js трябва са заредим:

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

А към plugins да добавим:

new BrowserSyncPlugin({
    host: 'localhost',
    server: {
        baseDir: ['.']
    }
})

При извикване на watch трябва BrowserSync да тръгне автоматично.