要实现什么效果？

• 咱们就实现一个项目中常用并且简单的效果：通过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这个方法

怎么看效果？

• cd到目录下，npm i 先安装好所有的插件，再node server.js，启动服务，然后浏览器访问localhost:5000，取可看到效果

Github源码请点我