第 05 课：搭建本地开发环境

背景

在前面的课程中，我们已经完成了项目模板的整体框架了，但是在开发过程中还有很多地方需要补充和完善以提高开发效率。比如：

• 手动执行构建。每次代码发生变动后，我们都需要手动执行以下构建命令。
• 手动刷新浏览器。构建完成后，如果我们需要在页面中验证效果，需要手动刷新。
• 无法精确定位错误。代码构建完成后，源代码被打包成一个 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";
// 新增代码，测试观察模式。
cons