背景
在前面的课程中，我们已经完成了项目模板的整体框架了，但是在开发过程中还有很多地方需要补充和完善以提高开发效率。比如：
- 手动执行构建。每次代码发生变动后，我们都需要手动执行以下构建命令。
- 手动刷新浏览器。构建完成后，如果我们需要在页面中验证效果，需要手动刷新。
- 无法精确定位错误。代码构建完成后，源代码被打包成一个 bundle，如果代码中出错，无法精确定位到出错代码的位置。
自动构建
每次修改都要手动执行 npm run build 确实麻烦。不过 Webpack 中提供了方法解放我们的双手。
观察模式
在 Webpack 命令行中，提供了 --watch 选项，如果指定该选项，Webpack 会监视入口文件依赖的所有文件。一旦文件有变化，自动执行构建。
首先我们在 package.json 中的 npm 脚本更新：
"scripts": {"build": "webpack --watch"}
执行 npm run build，可以看到 Webpack 启动构建，构建完成后，并不退出命令行。因为 Webpack 在观察文件。
为了看一下效果，我们在 ./src/app.js 中添加一行代码：
import Vue from "vue";
import App from "./app.vue";
import router from "../src/router";
// 新增代码，测试观察模式。
conso