Ở bài bốn chúng ta đã test thành công webpack và kết quả hết sức mĩ mãn. Giờ vấn đề tiếp theo nếu thay đổi code trong file src/index.js
thì chúng ta sẽ phải chạy lại câu lệnh npm run dev
để build lại, quả thật là mất thời gian. Webpack thấu hiểu điều đó và đã cung cấp cho chúng ta option watch mode (chế độ theo dõi). Watch mode là cách thiết lập để webpack có thể tự động build lại nếu có thay đổi từ các file nguồn.
Cách 1. Watch mode trong webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
watch: true // Thêm mới dòng này
}
Khi chúng ta thêm option này vào file config thì khi chạy câu lệnh npm run dev
webpack sẽ luôn theo dõi các file, bất cứ thay đổi code nào sau khi ấn save sẽ được tự động build lại. Quá tuyệt phải không?
Cách 2. Watch mode trong package.json
{
...
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack --watch"
}
}
Với cách thứ hai chúng ta set giá trị --watch
vào scripts > dev. Với cách viết này chúng ta cũng có được kết quả tương tự như cách 1. Cá nhân mình thì thích viết cách 2, còn bạn thích cái nào thì comment bên dưới cho mình biết nhé.
Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo.
- Tham khảo thêm tại: https://webpack.js.org/configuration/watch/
- Source code github: https://github.com/kentrung/webpack-tutorial/tree/master/5. Webpack watch mode
- Series webpack: https://viblo.asia/s/webpack-tu-a-den-a-cung-kentrung-pmleB8Am5rd
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chínhCách 1. Watch mode trong webpack.config.jsCách 2. Watch mode...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chínhCách 1. Watch mode trong webpack.config.jsCách 2. Watch mode trong package.json1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chínhCách 1. Watch mode trong webpack.config.jsCách 2. Watch mode trong package.jsonV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn...
Directory traversal vulnerabilities (phần 3)
Nội dung chínhCách 1. Watch mode trong webpack.config.jsCách 2. Watch mode trong package.jsonV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file...
Directory traversal vulnerabilities (phần 2)
Nội dung chínhCách 1. Watch mode trong webpack.config.jsCách 2. Watch mode trong package.jsonIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng...