最近一直在研究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