Laravel Mix without Laravel (P2)

Chào các bạn, ở phần trước mình đã hướng dẫn các bạn tích hợp Laravel Mix vào project rồi. Nhưng sau khi làm theo P1 thì mình thấy việc sử dụng Laravel Mix như vậy vẫn khá là nông dân. Vì vậy , hôm nay mình sẽ hướng dẫn các bạn tiếp tục sử dụng nó để tự động hoá mọi việc.

Việc bạn cần làm duy nhất lúc này là chạy lệnh npm run watch thay vì chạy lệnh npm run dev.Giờ đây, sau mỗi lần Ctrl+S file thay đổi ở thư mục src/js(sass) thì nó sẽ ngay lập tức được compile sang thư mục public/js(css).

Sau khi chạy lệnh npm run watch thì việc compile các file đã đc diễn ra 1 cách tự động rồi, giảm được lượng lớn các thao tác. Giờ các bạn sẽ thêm đoạn code .browserSync('http://localhost/laravelmix') vào file webpack.mix.config để trình duyệt tự động reload sau mỗi lần có file thay đổi . Chú í bạn cần thay đổi link http://localhost/laravelmix sao cho phù hợp với đường vẫn trỏ đến thư mục của bạn trên local.

Tổng kết lại từ P1 -> P2 thì file webpack.mix.js của mình sẽ full nội dung như sau

let mix = require('laravel-mix');
mix
.setPublicPath('public')
.js('src/js/app.js', 'public/js')
.sass('src/sass/app.scss', 'public/css')
.browserSync('http://localhost/laravelmix');

Các bạn nhớ để í đến cấu trúc thư mục & lệnh** npm run watch**(giúp compile thay đổi liên tục).

Thật ra thì mình có hơi dốt văn chút nên viết bài hơi lủng củng >< . Nếu bạn k hiểu chỗ nào or có góp í gì thì comment phía dưới giúp mình nhé.
Thank guys.