最近一直在研究webpack+vue的组合拳，现在分享一下：
webpack就是一个项目管理工具，可以各种模块化加载，然后压缩，当然还有热加载技术（时灵时不灵。。）
vue是mv*模式的框架，组件化开发，很轻量级的,有自己的路由系统，组件，数据绑定等等。（可以配合animate.js做出来）
当他们组合起来用的时候是这样的。。。学习阶段的搭建：
1.webpak准备工作:
首先，安装环境
安装webpack，开启webpack服务器
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev
//App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
编译html，css，热加载等，都是模块化开发的工具
vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2
//es6的语法编译为es2015
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
-----------------------------------------------------------
webpack.config.js的配置：
module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:'build.js'
},
module:{
loaders:[
{test:/\.vue$/, loader:'vue'},
{test:/\.js$/, loader:'babel', exclude:/node_modules/}
]
},
babel:{
presets:['es2015'],
plugins:['transform-runtime']
}
};
接下来就是vue模块开发了。。。
2.介绍一下脚手架的工具运用：
基本使用流程:
1. npm install vue-cli -g 安装 vue命令环境
验证安装ok?
vue --version
2. 生成项目模板
vue init <模板名> 本地文件夹名称
webpack 可以使用(大型项目)，Eslint 检查代码规范
单元测试
webpack-simple 推荐使用, 没有代码检查
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev