## 觀察模式
你可以指示 webpack "watch" 依賴圖中的所有文件以進行更改。如果其中一個文件被更新，代碼將被重新編譯，所以你不必手動運行整個構建。
我們添加一個用于啟動 webpack 的觀察模式的 npm script 腳本：
**package.json**
```json
"scripts": {
"start": "webpack --config conf/webpack.base.js",
"watch": "webpack --watch --config conf/webpack.base.js"
}
```
現在，你可以在命令行中運行 `npm run watch`，就會看到 webpack 編譯代碼，然而卻不會退出命令行。這是因為 script 腳本還在觀察文件。
唯一的缺點是，為了看到修改后的實際效果，你需要刷新瀏覽器。如果能夠自動刷新瀏覽器就更好了，可以嘗試使用 `webpack-dev-server`，恰好可以實現我們想要的功能。
## webpack-dev-server
`webpack-dev-server` 為你提供了一個簡單的 web 服務器，并且能夠實時重新加載(live reloading)，可以實現不刷新瀏覽器看到修改效果。
詳解: https://doc.webpack-china.org/configuration/dev-server
GitHub: https://github.com/webpack/webpack-dev-server
**安裝**
```
yarn add webpack-dev-server webpack-cli -D
```
**conf/webpack.config.js** 配置
```js
const path = require('path');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].[chunkhash].js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, "..", "dist"), // 服務器根目錄
compress: true, // 壓縮
port: 9000, // 監聽端口
open: true // 直接使用瀏覽器打開
}
};
```
**package.json**
```json
"scripts": {
"start": "webpack-dev-server --config conf/webpack.base.js",
"watch": "webpack --watch --config conf/webpack.base.js",
"build": "webpack"
}
```
這樣，使用 `npm start` 即可打開服務。
