从零开始搭建vue-ssr系列之二：纯client端渲染以及webpack2+vue2注意事项

要实现什么效果？

咱们就实现一个项目中常用并且简单的效果：通过Ajax从后端取数据，前端做展示，点列表的每一项，alert出这一项的标题
效果如下：

> 为什么要说 Client端的渲染？

因为Client端的渲染是ssr渲染的一部分，这一块是必须要说的，同时，Client端的渲染在我做的时候，也有一些问题和一些坑，尤其是使用webpack2的时候，之前webpack1时代的东西大部分都不好使了，只能重新学，重新试，正好在这也分享给大家

项目目录树

|____.gitignore
|____build
| |____client
| | |____css
| | | |____main.css
| | |____script
| | | |____main.js
| | | |____vendors.js
| |____index.html
|____package.json
|____postcss.config.js
|____readme.md
|____server.js
|____src
| |____component
| | |____List.vue
| |____index.js
|____tools
| |____dev.js
| |____webpack.js

各目录的用处

build目录为webpack打包好的静态资源文件，css、js、image等
src目录下存放源码
tools目录下为编译相关的文件
package.json文件为包依赖
postcss.config.js这个文件很重要，vue-loader和这个文件，能解决css前缀问题（这里用的是webpack2的解决方案，目测为唯一的解决方案，webpack1有其他解决方案）。
server.js为服务启动文件，用的是express
使用的是webpack的nodeAPI进行打包，不是通过config文件打包

这个webpack打包能实现哪些功能？

可以把共用的js库打到一个单独的文件里，代码在这：

// 将vue等框架/库进行单独打包, 并输入到vendors.js文件当中
new webpack.optimize.CommonsChunkPlugin({
    names: ['vendors']
})

可以把.vue文件里面的style都打包到一个css文件中，代码在这：

new ExtractTextPlugin('css/[name].css')

有哪些坑？

alias里面其他的可以不要，但是vue是必填，就是'vue$': 'vue/dist/vue.common.js'，要不然会报错，因为你import vue的时候，不写这个引用文件不是同一个，只有vue2里会出这个问题，vue1不会
webpack2里面想把.vue文件的css抽取出来，只有一个loader是不好使的，这个我找了好久，webpack.js里面的方案好使
在dev.js里面，webpack的nodeAPI里面提供2个方法，一个run，一个是watch，开发的时候用watch，要上线了得用run这个方法