## 观察模式
你可以指示 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` 即可打开服务。
