1. webpack 简介
webpack是一款模块加载器及处理工具，它能把各种资源，例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。也就是说，webpack可以把ES6语法的js文件，sass样式等无法直接在浏览器中使用的语言编译成浏览器支持的形式，也可以把需要的文件进行合并、压缩混淆。
webpack的使用
1.使用 sudo cnpm/npm install webpack -g 将webpack全局安装到本地环境中，这样就能使用webpack命令了
2.在项目文件下创建下列文件： index.html，main.js，App.vue， webpack.config.js。 其中index.html是最终展示的html文件，main.js是入口文件，App.vue是一个vue文件，为main.js提供需要的组件，webpack.config.js是webpack的配置文件，用于配置编译各类文件所需要的加载器，例如.js 文件要用到的babel-loader，.css文件要用到的css-loader和style-loader。此外，还要利用npm init --yes 生成package.json工程文件。
3.而在package.json里面可以配置常用命令:
4.利用cnpm install XXXX --save-dev下载相应的加载器，配置文件package.json也会自动更新。
5.在webpack.config.js中配置相应的加载器。简单解释如下配置。文件的入口是./main.js，出口是bundle.js文件。以.vue结尾的文件用vue-loader加载编译，除/node_modules/目录以外的其他所有以.js结尾的文件都用babel-loader加载编译。babel是下一代js语法编译器，可以将ES6转成ES5代码。
6.main.js文件这时候就可以引入vue实例以及App组件，这个App.vue组件是被vue-loader加载加载过后的模块，可以直接引入。在创建vue的实例的时候，el与index.html中的根元素想对应，并且vue2.0用箭头函数包含组件。
7.App.vue就是对应的组件，在早期进行组件化编写时，我们往往会把一个组件的html，css，js放在三个不同的文件中，然后利用编译工具再合到一起。这样产生的不便就时文件过多。vue-loader的出现，使得我们能将一个组件的html，css，js放在一个文件中，用不同的标签包裹住即可。vue-loader会将这三块代码分别编译成可执行的代码。还有一点要注意的是，在template里面编写html代码，一定要事先用一个跟元素div包含起来。
8.最后运行npm run dev指令，然后打开http://localhost:8080，就可以看到如下页面:
2.配合vue-router使用
1.继续用cnpm install vue-router --save下载。
2.在 App.vue中增加两个超链接
3.创建Home.vue、News.vue文件。
4.创建一个router.config.js文件配置router的路径，在这个文件中要引入之前创建的两个vue文件Home.vue、News.vue。在配置路径的时候要用到。
5.在入口文件main.js引入vue-router，router.config.js。并且创建路由实例router放入Vue中。
5.最后运行npm run dev即可得到相应页面。
3.注意事项
1.组件导出:
比如在New.vue文件中，引入了一个Child作为其子组件,并直接在template中作为标签应用。
而这个自组件Child则是在Child.vue中定义,这个组件可以有自己的方法change，自己的数据，以及绑定了其父组件的对象news，因为绑定的是这个对象引用，因此在子组件Child.vue中定义的change方法改变了news.news1之后，父组件的news.news1也会改变。
此外，这种定义组件的方法等价于直接在父组件中定义成:(这个定义方法其实有bug，这里只是为了说明.vue文件导出的含义)
2.组件间通信
1)、父组件给子组件传递消息
父组件如下，首先引入子组件Child.vue，并在componets中对子组件重命名为child。其次，在template中使用child标签，并为其绑定父组件的数据对象
而在子组件中通过props得到父组件的对象的引用，并且可以以此来改变该对象里面的属性。
2)、子组件给父组件传递消息
子组件通过.$emit方法将数据msg发出去，让父组件响应receive事件。
而父组件则在<child></child>标签上响应receive事件，参数msg就是子组件传递过来的数据msg。
