从零搭建 Vue 项目：使用 Webpack 配置开发环境
很多时候，直接使用 Vue CLI 会让我们忽略底层构建工具的配置。为了深入理解模块打包原理，咱们不妨手动搭建一个基于 Webpack 的 Vue 开发环境。这个过程虽然繁琐，但能让你对 Loader、Plugin 以及热更新机制有更直观的认识。
1. 初始化项目结构
首先，在本地创建一个文件夹作为项目根目录，比如 webpack-demo。我们需要规划好基础的文件结构，确保入口清晰：
webpack-demo/
├── index.html # 页面入口
├── main.js # JS 入口文件
├── app.vue # Vue 主组件
├── User.vue # 子组件（需自行创建）
├── package.json # 依赖与脚本配置
├── webpack.config.js # Webpack 核心配置
└── .babelrc # Babel 转译配置
2. 安装依赖
接下来是安装必要的包。这里建议使用 cnpm 加速下载，当然 npm 也可以。注意区分生产依赖 (--S) 和开发依赖 (-D)。
# 安装 Vue 核心库
npm install vue --save
# 安装 Webpack 及开发服务器
npm install -D webpack webpack-dev-server
# 处理 CSS 样式
npm install -D css-loader file-loader style-loader
# 处理 Vue 单文件组件
npm install -D vue-loader vue-html-loader vue-style-loader vue-template-compiler
# 处理 ES6 语法转换
npm install -D babel-loader babel-core babel-preset-env
安装完成后，检查 package.json。特别留意 scripts 字段，我们定义了一个 dev 命令来启动服务：
{
"name": "vue-cli-created-by-self",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts"
