vue-loader 与 webpack

参考

[1] Vue.js build set-up from scratch with webpack, vue-loader and hot reload
[2] Vue笔记二：进阶[译]用Webpack构建Vue（上一篇的翻译）

准备

1. 安装 npm, vue, webpack, node.js，安装方法见 Ubuntu, Mac 下 Web 开发环境搭建：node.js, golang 与 revel 配置安装

杂记

1. babel 用于将 ES6（JavaScript 的下一代标准）代码转换为现代标准（ES5）的 JavaScript 代码的工具；

2. webpack 用于将必要的 JavaScript 代码打包为一个 .js 文件；

3. npm 用于下载依赖包，package.json 文件中指定了需要的依赖包（见 Using a package.json）；

4. 以上代码仅仅运行在前端，并没有服务端的数据或服务提供。运行顺序：打开 html → 查找 dist/build.js 文件。编译时 build.js 文件是将 main.js 文件转换并和许多依赖文件由 webpack 打包生成，打包规则和入口 javascript 代码（这里是 main.js）由 webpack.config.js 指定，依赖文件由 npm 根据 package.json 文件里的内容 fetch 得到。

5. babel 可看成是将下一代的 .js 代码（ES6）转成当代的 .js 代码（ES5）的工具，而 vue-loader 可看成是将 vue 组件转成 .js 代码的工具。二者都在 webpack.config.js 里的 “loaders” 部分指定好，用于代码转换，并最终打包成一个 .js 文件；

6. webpack 打包必须要有 webpack.config.js 文件，而 npm 安装依赖则必须要有 package.json 文件，文件名和后缀不能变；

7. npm (node package manager) 是 node.js 相关包的管理器，为了使用 babel，node.js 是必须的；

8. 需要一个 main.js 作为入口函数，在 webpack.config.js 的 entry 中指定；

9. 在 .vue 文件中设计一个模块（component），在 main.js 中导入这个模块，并通过 Vue 的声明式绑定来使用这个模块；

问题

1. 网页为什么需要入口函数 main.js 呢？
2. module.exports 中的 data，为什么是 function() 中 return 而不是直接指定呢？（经试验，确实是不可以的，直接写 a:”b” 的映射时，页面不显示组件）