---
description: https://kentrung256.blogspot.com/2020/06/webpack-watch-mode.html
---

# Webpack từ A đến Á: Webpack watch mode (ok)

## Webpack từ A đến Á: Webpack watch mode

&#x20;[July 21, 2020](https://kentrung256.blogspot.com/2020/06/webpack-watch-mode.html)  [webpack](https://kentrung256.blogspot.com/search/label/webpack?\&max-results=20)Ở bài [trước](https://kentrung256.blogspot.com/2020/07/basic-webpack-configuration.html) 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 xảy ra là nếu thay đổi code trong file `src/index.js` như thay đổi chữ đỏ sang xanh thì sao? 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

**Nội dung chính**

* Cách 1. Watch mode trong webpack.config.js
* Cách 2. Watch mode trong package.json

### Cách 1. Watch mode trong webpack.config.js

```

module.exports = {
  ...
  watch: true
}
```

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? Trong cửa sổ `cmd` sẽ hiện thông báo kiểu như này:

```

...
webpack is watching the files…
```

### 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 trên. Cá nhân mình thì thích viết cách hai, 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.
